The problem

One day, the manager assigned an old project with the ESLint configuration, which was in node_modules.

When I was familiar with the Code, I modulated and saved it. Because VS Code installed prettier plug-in and used Prettier to format the Code, various errors were reported at the terminal, as shown in the following figure:ESLint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint

"editor.formatOnSave": true // Save and format
Copy the code

repair

The first thing that came to mind was to change their validation rules to be the same, but the ESLint configuration file for this project is packaged in node_modules, which could be overwritten, but obviously that’s not appropriate.

Leafed through the pairsprettierPlug-in description, seeSuddenly realized, why to start save on the check?

So change editor.formatOnSave to false so that validation can be performed when necessary. You can right-click Format Document to validate the entire file, or right-click Format Selection to validate the selected part.

perfect

Prettier vs. ESLint This sidesteps the problem where Prettier conflicts with ESLint, but ESLint validation must always be found on the terminal. To find bugs in the VS Code editor in real time, you need to install an ESLint plug-in

After installation, add the following configuration to setting.json:

{
  "editor.codeActionsOnSave": { //eslint incorrectly saves automatic fixes
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript"."javascriptreact"."typescript"."typescriptreact"."html"]."eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "eslint.format.enable": true.// The type of language to validate
  "eslint.probe": [
    "javascript"."javascriptreact"."typescript"."typescriptreact"."html"]}Copy the code

Prettier formatting code, save it, and use ESLint validation.

The complete setting.json content is as follows:

{
  "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
}
Copy the code

other

If VS Code installs ESLint and saves without validation, check the lower right corner to see if ESLint validation is enabled. The following figure

If it is disabled, click on it and the option will pop up. Just choose the option on the far left. To take effect.