作为一枚强迫症程序员，如果源代码格式不能精细控制，那是不可接受的。
HBuilderX 是一款功能强大的 IDE 工具，它提供了多种途径用于对源代码格式进行控制，但要完全驾驭它还需要一些经验。
我这里把个人摸索的结果做个小结，希望有人能觉得有用。
主要考虑的文件类型：
主要考虑的格式：
HX 中编辑代码时，有几处设置可以控制格式风格，优先级从低到高：
- 主菜单【重排代码格式】，实际采用的是
%AppData%\Roaming\HBuilder X\extensions\format\jsbeautifyrc.js
- 主菜单【编辑-缩进】里面设置
- 项目中的
.jsbeautifyrc 配置文件
- 项目中的
.eslintrc.js 配置文件（需安装 eslint-js 和 eslint-plugin-vue 插件）
其中 1/2/3 是在 HX 里【重排代码格式】时起作用，4 是在保存文件时自动触发（如果开启了的话）。
考虑到格式风格的选择与项目相关，所以最好是在项目的根目录下放置 .jsbeautifyrc 和 .eslintrc.js 配置文件。
下面的配置文件可以解决大部分问题：
// .jsbeautifyrc
{
"js": {
"indent_size": 2,
"indent_char": " ",
"indent_with_tabs": false,
"jslint_happy": true
},
"css": {
"indent_size": 2,
"indent_char": " ",
"indent_with_tabs": false
}
}
// .eslintrc.js
module.exports = {
"extends": "plugin:vue/vue3-recommended",
"rules":{
'vue/html-indent': ['error', 2, {
baseIndent: 0
}],
'vue/first-attribute-linebreak': ['error', {
singleline: 'ignore',
multiline: 'below'
}],
'vue/max-attributes-per-line': ['error', {
singleline: 3,
multiline: 1
}],
'vue/script-indent': ['error', 2, {
baseIndent: 0
}],
'no-trailing-spaces': 'error',
'no-multi-spaces': 'error',
'no-mixed-spaces-and-tabs': ['error', 'smart-tabs'],
'no-tabs': 'error',
'indent': ['error', 2],
}
}
注意事项
在 HX 的编辑器中打开 .js 文件时，如果进行【重排代码格式】操作，是 jsbeautify 在起作用，而在保存时的自动重排，是 eslint-js 插件在起作用。
如果两者的格式设置冲突的话，后者会最终胜出，但操作过程会比较困惑。
所以应尽量设置成保持一致，且一般不用【重排代码格式】，不过有些混乱的代码可能需要先用【重排代码格式】来整理一下效果会更好。
