下面我们具体看看如何让ESLint来主导格式化。

⚙️ 让ESLint接管格式化工作

你的目标是让代码缩进遵循ESLint规则，核心是确保保存时代码的自动修复和格式化都由ESLint来完成。

1. 安装ESLint扩展：在VSCode的扩展商店中搜索并安装 "ESLint" 插件。

2. 配置VSCode设置：按下 Ctrl + , (或 Cmd + , on Mac) 打开设置，点击右上角的 "打开设置(JSON)" 图标，将以下配置添加到你的 settings.json 文件中：

{
  // 指定ESLint为特定文件的默认格式化器
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  // 保存时自动运行ESLint修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 如果你还使用了Prettier, 可能需要关闭保存时自动格式化，避免冲突
  // "editor.formatOnSave": false,
}

• editor.defaultFormatter 告诉VSCode在格式化JavaScript、TypeScript等文件时使用ESLint扩展。

• editor.codeActionsOnSave 中的 source.fixAll.eslint 是关键，它会在保存文件时自动修复ESLint能识别的所有问题，包括缩进。

3. 配置ESLint规则：在你的项目根目录下的 .eslintrc.js (或 .eslintrc.json) 文件中，确保已经配置了缩进规则。例如：

module.exports = {
  rules: {
    "indent": ["error", 2] // 示例：使用2个空格进行缩进
    // ... 其他ESLint规则
  }
};

完成以上配置后，当你保存文件时，VSCode就会调用ESLint并根据你配置的规则（例如2个空格缩进）来自动修正代码格式。

🔧 处理与Prettier的协同工作

如果你在项目中同时使用了ESLint和Prettier，它们很容易发生冲突（比如一个要求缩进2格，另一个要求4格）。这时你需要让ESLint“知道”并遵从Prettier的格式规则。

1. 安装必要的npm包：

   bash

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

2. 修改ESLint配置：在你的 .eslintrc.js 文件中扩展Prettier的配置：

   javascript

   module.exports = {
     extends: [
       // ... 其他配置
       'plugin:prettier/recommended' // 这行需要放在最后，以确保覆盖其他格式相关规则
     ],
     rules: {
       // 你的其他规则
     }
   };

   eslint-config-prettier 会关闭ESLint中所有与Prettier冲突的规则（包括缩进规则indent），而 eslint-plugin-prettier 则会让你在运行ESLint时直接应用Prettier的格式化规则。

3. 配置Prettier规则：在项目根目录创建一个 .prettierrc 文件，来定义你的代码风格。例如：

   json

   {
     "tabWidth": 2,
     "useTabs": false
   }

   这样，ESLint在格式化时，就会遵循你在 .prettierrc 中设置的缩进规则了。

🧹 检查并清理其他配置源

如果以上设置完成后，缩进仍然不符合预期，你需要检查一下其他可能干扰格式化的因素：

• VSCode的基础缩进设置：在VSCode的设置中搜索 editor.tabSize 和 editor.insertSpaces，确保它们与你的ESLint/Prettier规则一致（例如，都设置为2个空格）。可以考虑将 editor.detectIndentation 设置为 false，以防止VSCode根据文件内容自动检测并更改缩进。

• 项目中的 .editorconfig 文件：如果项目根目录有 .editorconfig 文件，它也会影响缩进。请检查其中的 indent_size 和 indent_style 设置，确保它们与你的ESLint规则没有冲突。

• 禁用或配置其他格式化扩展：如果你安装了多个格式化插件（如多个Prettier版本或其他语言特定格式化工具），它们可能会相互竞争。可以尝试暂时禁用其他格式化扩展，或者在VSCode设置中为特定语言明确指定使用ESLint作为默认格式化器。

遵循这些步骤，你应该就能让VSCode在保存时按照ESLint的规则进行代码缩进和格式化了。如果问题依然存在，可以检查一下VSCode的“输出”面板，选择“ESLint”频道，看看那里是否有任何错误日志，这有助于定位问题。