作为一枚强迫症程序员，如果源代码格式不能精细控制，那是不可接受的。

HBuilderX 是一款功能强大的 IDE 工具，它提供了多种途径用于对源代码格式进行控制，但要完全驾驭它还需要一些经验。
我这里把个人摸索的结果做个小结，希望有人能觉得有用。

主要考虑的文件类型：

• .js
• .css
• .vue

主要考虑的格式：

• 缩进用空格而不是 tab
• 缩进 2 个空格

HX 中编辑代码时，有几处设置可以控制格式风格，优先级从低到高：

1. 主菜单【重排代码格式】，实际采用的是 %AppData%\Roaming\HBuilder X\extensions\format\jsbeautifyrc.js
2. 主菜单【编辑-缩进】里面设置
3. 项目中的 .jsbeautifyrc 配置文件
4. 项目中的 .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 插件在起作用。

如果两者的格式设置冲突的话，后者会最终胜出，但操作过程会比较困惑。

所以应尽量设置成保持一致，且一般不用【重排代码格式】，不过有些混乱的代码可能需要先用【重排代码格式】来整理一下效果会更好。