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 校验。以下图

若是被禁用，请点击它，会弹出选项，选择最左边的选项便可。方可生效。