如何让ESLint缩进规则与VSCode自动格式化保持一致？

问题说明 #

VSCode保存文件时自动格式化的代码，和执行命令 eslint --quiet --fix --ext .js,.ts,.tsx,.jsx . 后的代码出现缩进差异——ESLint会给函数参数内的对象属性添加额外缩进：

VSCode自动格式化结果 #

await myFunction(
  var1, {
  prop1: 'abc'
  prop2: 'xyz'   
} ) 

ESLint Fix后结果 #

await myFunction(
  var1, {
    prop: 'abc'
    ... etc   
  } ) 

当前你的ESLint缩进配置：

'indent': [ 'error', 2, { 'SwitchCase': 1 } ]

解决方法 #

1. 让VSCode用ESLint做格式化 #

打开VSCode设置（快捷键Ctrl+,/Cmd+,），完成以下配置：

• 搜索Editor: Default Formatter，设置为dbaeumer.vscode-eslint（确保已安装ESLint插件）
• 开启ESLint: Fix On Save和Editor: Format On Save，让保存时直接用ESLint规则格式化，避免和其他工具冲突

2. 调整ESLint缩进规则 #

修改.eslintrc.js中的indent配置，添加CallExpression参数对齐规则，让函数内的对象参数和第一个参数保持同层缩进：

'indent': [
  'error',
  2,
  {
    'SwitchCase': 1,
    'CallExpression': { 'arguments': 'first' }
  }
]

这个配置会让ESLint在修复时，将函数参数里的对象与第一个参数对齐，和VSCode之前的格式化结果一致。

3. 关闭其他格式化工具的冲突规则 #

如果项目中使用了Prettier等其他格式化工具，需要确保其缩进规则和ESLint一致（比如设置tabWidth: 2），或者直接关闭这些工具的自动格式化功能，避免规则冲突。

验证 #

修改配置后，先执行一次eslint --quiet --fix --ext .js,.ts,.tsx,.jsx .，再在VSCode中保存文件，检查两者的缩进是否统一，对象属性不再出现额外缩进。

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