HBuilderX小经验

常用设置

• 制表符长度修改为4。
• 选中 空格代替制表符（因为在VS中默认按下Tab时是插入空格的，故为此统一文档格式）

"editor.tabSize" : 4,
"editor.insertSpaces" : true,

CSS 格式化成一行一条

CSS 一行一条在VS上已经写习惯了，HBuilder不支持自定义，但又需要使用这个编辑器，这里提供修改方法以供参考。

新版本给出了插件配置项，但 js-beautify@1.8.8 插件本身没有提供一行格式的参数项。因此只能手动修改插件，非常简单。

脚本文件位置 X:\HBuilderX\plugins\format\node_modules\js-beautify\js\src\css\beautifier.js 注意不同语言的格式化脚本不同，这里是 css\beautifier.js

修改方法：

1. 修改 this.eatWhitespace(true) 为 this.eatWhitespace() 去除参数 true 则 清除空格但不插入换行
2. 去除或注释掉 this._output.add_new_line(); 不插入换行

具体修改如下：

...
} else if (this._ch === '{') {
[294] this.eatWhitespace(); //去除参数true
[295] this._output.add_new_line(); //注释掉
} else if (this._ch === '}') {
...
[298] this._output.add_new_line(); //注释掉
...
[314] this.eatWhitespace(); //去除参数true
...
} else if (this._ch === ';') {
...
[362] this.eatWhitespace(); //去除参数true
...
[369] this._output.add_new_line(); //注释掉
}

修改了插件后，已经可以实现将CSS合并为一行了，但是每个CSS定义之间都会出现一个空行，这就需要在 jsbeautifyrc.js 中配置CSS格式化定义了。脚本文件位置在 X:\HBuilderX\plugins\format\jsbeautifyrc.js，也可以通过HBuilderX工具栏的 工具 - 插件配置 - format - jsbeautifyrc.js 打开文件编辑。

[48] "html": {
···
[53] }, //在此行插入一个逗号之后添加如下代码
"css": {
   "newline_between_rules": false, //行与行间是否插入空行
   "selector_separator_newline": false,
   "preserve_newlines": false
}