VSCode与ESLint(Airbnb配置)缩进冲突，如何调整VSCode设置？

嘿，这个问题我之前也碰到过——Airbnb的ESLint规则要求多参数换行后用2空格缩进，但VSCode默认格式化硬要给4空格，确实闹心。下面给你几个靠谱的解决办法，根据你的格式化工具选择就行：

1. 让ESLint直接接管自动修复（最省心的方案） #

如果你已经装了VSCode的ESLint插件，直接让它在保存时自动修正缩进，完全跳过VSCode的默认格式化：

• 打开VSCode的JSON设置（按Ctrl/Cmd + Shift + P，搜「Open Settings (JSON)」）
• 把这段配置加进去：

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact"
  ]
  

以后每次保存文件，ESLint都会严格按照Airbnb的规则把缩进改成2空格，再也不用手动调了。

2. 调整VSCode内置格式化的设置（不用ESLint自动修复的话） #

如果你更习惯用VSCode自带的JS格式化工具，得改它的缩进配置：

• 在settings.json里添加这些：

  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "javascript.format.indentSize": 2,
  // 确保函数括号的位置和Airbnb规则一致，避免缩进错位
  "javascript.format.placeOpenBraceOnNewLineForFunctions": false
  

不过这种方式偶尔还是会和ESLint的其他规则冲突，所以优先推荐第一种方案。

3. 让Prettier和Airbnb ESLint兼容（用Prettier的情况） #

如果你的项目用Prettier做格式化，得让它和Airbnb的规则对齐，不然两边打架：

1. 先装必要的依赖：

   npm install --save-dev eslint-config-prettier eslint-plugin-prettier
   

2. 修改你的ESLint配置文件（比如.eslintrc.js），让Prettier的规则和Airbnb合并：

   module.exports = {
     extends: [
       'airbnb-base',
       'plugin:prettier/recommended'
     ]
   };
   

3. 最后在VSCode的settings.json里给Prettier设置2空格缩进：

   "prettier.tabWidth": 2,
   "prettier.useTabs": false,
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
   

4. 别忘了检查.editorconfig #

如果项目根目录有.editorconfig文件，它的优先级比VSCode设置还高，确保里面的缩进配置是：

indent_style = space
indent_size = 2

试完上面的方法，VSCode格式化后的参数缩进就会完全符合Airbnb ESLint的要求啦。

内容的提问来源于stack exchange，提问作者Rob Indesteege