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 校驗。以下圖

若是被禁用，請點擊它，會彈出選項，選擇最左邊的選項便可。方可生效。