@VSCode保存时用eslint自动修复问题 - 掘金

vscode可以安装ESLint插件，以在IDE中显示eslint的报错。这个插件实际是个胶水工具，它调用eslint包，把eslint的结果显示在vscode界面上，实际干活的依然是eslint包。在插件的介绍里有写明，它会优先使用当前项目里的eslint包，如果没有就使用npm -g的eslint，如果还没有可能就不生效了。

它会读取项目中的.eslintrc规则提供给eslint（可能是在运行eslint时指定路径）。另外，在vscode的setting中搜索ESLint，也可以看到这个插件本身也有一些配置，大多是关于“什么时候运行eslint”的。

这个插件是由微软官方制作的（仓库），可以看到，它里边有client、server，这是一种常用的代码校验工具的架构，也称作LSP（Language Server Protocal），在VSCode启动后，这个插件也会启动，它会在后台启动它的server，然后client检测代码编辑，一旦触发（比如保存）就把代码传到server，server进行处理后返回结果（比如代码提示，TS校验，以及这里的ESLint校验结果），由Client对接VSCode显示在IDE里。有Server的好处就是它可以缓存一些东西，比如只校验有改动的行，可以预先load好校验规则等等。

hover在一些错误上，可以看到ESLint是能够通过eslint来auto-fix一部分错误的。我们可以配置vscode在保存时自动修正这些问题。

较新版本的ESLint插件已经移除了formatter功能。因此，虽然它看起来和prettier类似，但在format document with选项里是找不到eslint的（记得挺久以前是有的）。因此不能通过format on save选项在保存时执行eslint。

需要在vscode设置（自行选择user/workspace setting）中找到code action on save，点进去在json中配置：

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

这样就可以在保存时执行eslint。

但此时eslint是对整个文件进行fix，速度比较慢。例如，我没开fix时，保存几乎没有时延，开了之后则会卡顿1-3s。下图两个选项都可以应对这个问题（eslint插件的文档）：

一是配置eslint.codeActionsOnSave.mode为problems，只修正eslint报错的代码。

二是配置eslint.codeActionsOnSave.rules，只修正匹配指定规则的报错（也可以通过!来禁用规则）。

但rules选项生效需要满足一些条件：

1. eslint插件版本>2.2.3（现在2.4了，新装的eslint插件基本都是满足的）
2. eslint.codeActionsOnSave.mode不能是problems（见文档）
3. eslint版本>=8，或版本=7并设置”eslint.useESLintClass”: true

例如，我的eslint@7.32.0，配置如下。在保存文件时，只会自动修正这一条规则。 （tips：修改rules设置后，需要重新打开文件才生效）

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.codeActionsOnSave.rules": [
    "vue/attribute-hyphenation",
  ],
  "eslint.useESLintClass": true,
}