ESLint + VSCode_如何使用.eslintrc格式化你的代码ESLint + VSCode:如何使用.esl

ESLint + VSCode:如何使用.eslintrc格式化你的代码

我已经非常习惯于在保存时让VSCode自动格式化我的文件。通常情况下，我使用Prettier。但我加入了一个使用ESLint来管理其代码风格的项目，我想与团队的格式化相匹配。

我希望在保存时有那种甜蜜的自动格式化，但使用项目根目录下的 eslintrc.json 文件，而不是Prettier。

大多数博客文章都想把这个做成一个完整的教程......如何设置eslint，如何创建.eslintrc文件，等等......但我不需要这些。我有一个现有的项目，我只是想配置VSCode来使用ESLint而不是Prettier。

结果这只需要4行的设置配置和一个插件。

下面是如何做的：

在VSCode中，用左边的按钮打开扩展浏览器。在Mac上，键盘上的快捷键Cmd+Shift+X应该也能做到。

搜索 eslint

安装顶部的结果，称为 "ESLint"。(就是这个下载量超过1000万的)

打开VSCode的设置。在Mac上，按 Cmd+, ，或通过菜单到达那里。代码 > 偏好 > 设置。

它将打开花哨的设置编辑器，但我们需要原始的JSON设置文件来代替。

点击右上角的小图标，看起来像一张带小箭头的纸：

在顶层设置对象中添加这4个新行：

    "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.format.enable": true,

或者

  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "editor.formatOnSave": true,

第一行打开ESLint进行格式化，接下来的三行让它在你点击保存时进行格式化。

这应该就可以了!保存设置文件并关闭它，我们就完成了。

试着对一个文件做一些违反ESLint规则的修改--也许是在需要分号的情况下省去分号？- 然后按保存。它应该会自动格式化。

这两个配置都能实现自动格式化，但底层机制和适用场景有所不同：

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": "explicit"
},
"eslint.format.enable": true

🎯 工作原理：
- source.fixAll.eslint ： 仅触发ESLint的自动修复 （根据.eslintrc规则）
- eslint.format.enable ： 让ESLint兼任格式化工具 ，相当于用 eslint --fix 替代常规格式化
✅ 优势：
- 纯ESLint生态，规则一致性最佳
- 只处理ESLint定义的问题，无第三方干扰
⚠️ 注意：
- 需在ESLint配置文件中明确定义所有格式规则（如通过 eslint-plugin-prettier ）

"editor.codeActionsOnSave": {
  "source.fixAll": "explicit"
},
"editor.formatOnSave": true

🎯 工作原理：
- source.fixAll ： 触发所有注册的修复器 （ESLint+其他插件）
- formatOnSave ： 使用默认格式化工具 （可能是Prettier/VS Code内置等）
✅ 优势：
- 支持多工具协作（如ESLint修复逻辑错误，Prettier处理样式）
- 更灵活的格式化工具选择
⚠️ 注意：
- 需要保证不同工具的规则一致性
- 可能重复处理同一问题（如同时用ESLint和Prettier格式化引号）

当ESLint规则与格式化工具规则完全一致时（比如同时配置了 eslint-config-prettier 和 eslint-plugin-prettier ），两种方案最终效果会趋同。但实现路径不同：

🚀 推荐ESLint专属方案如果：
- 项目完全使用ESLint管理代码风格
- 已经配置了 eslint-plugin-prettier
- 希望减少工具链复杂度
🚀 推荐组合方案如果：
- 需要同时使用ESLint和其他格式化工具
- 已有历史Prettier配置
- 需要更快的格式化速度（Prettier通常比ESLint格式化更快）

禁用Prettier - Code formatter 否则会冲突

我最近遇到了一个问题，Prettier的设置覆盖了ESLint的设置。老实说，我不确定这些设置是怎么进去的......也许是我把它们放进去后忘了。

在任何情况下，如果你想让ESLint缩进你的文件，确保Prettier没有覆盖它。找出任何像这样的行，说 defaultFormatter 应该是Prettier（Cmd+F或Ctrl+F为 "prettier"，因为可能有几个！），并把它们注释掉：

// "[javascriptreact]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },

如果你切换回一个不使用ES Lint的项目，你可能需要撤销这个。