vscode 中 prettier 和 ESLint 冲突解决

问题

有一天，领导让接手了个带有 ESLint 配置的老项目，这个 ESLint 配置是打在 node_modules 里。

在熟悉的代码时候，我调制并保存了下，此时由于 VS Code 安装了 prettier 插件，采用 prettier 对代码进行了格式化，此时在终端报了各种错误，如下图：

这是由于 ESLint 跟 prettier 在校验上的不一致，在 VS Code 的 setting.json 里配制了保存就格式化，所以会在保存后就报错。

"editor.formatOnSave": true // 保存就格式化

修复

首先想到的是将两者的校验规则改为一致，可是这个项目的 ESLint 配制文件是打包在 node_modules ，当然也可以重写覆盖，但很明显这不合适。

翻阅了下对 prettier 插件的说明，看到

恍然大悟，为什么要启动保存就校验呢？

所以将 editor.formatOnSave 改为 false ，这样在有需要的时候再进行校验，可以右键选择 Format Document 整个文件校验，也可以选中部分，右键选择 Format Selection 对选中部分校验。

完善

以上规避了 prettier 与 eslint 冲突问题，但 eslint 的验证每次都要在终端里才能发现，要在 VS Code 编辑器中实时发现错误，需安装 ESLint插件

安装好之后，在 setting.json 里添加如下配制：

{
  "editor.codeActionsOnSave": { //eslint错误保存自动fix
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html"
  ],
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "eslint.format.enable": true,
  // 要验证的语言类型
  "eslint.probe": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html"
  ]
}

此时可以通过先右键 Format Document 采用 prettier 格式化代码，再保存采用 ESLint 校验，完美解决。

完整 setting.json 内容如下:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html"
  ],
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "eslint.format.enable": true,
  "eslint.probe": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html"
  ],
  "editor.formatOnSave": false,
  "editor.suggestSelection": "first",
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript|react]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript|react]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.iconTheme": "vscode-icons",
  "window.zoomLevel": 0,
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "git.autofetch": true,
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "explorer.confirmDelete": false
}

其他

如果 VS Code 安装完 ESLint，保存时没有校验，要看下右下角是否开启 ESLint 校验。如下图

如果被禁用，请点击它，会弹出选项，选择最左边的选项即可。方可生效。