Eslint + Prettier common code style EsLint + Prettier

Eslint is used to verify code specifications, check if traversal declarations are called, console.log statements, etc., but it only supports the JS code style.

Prettier is used to unify code style, format code, support JS, TS, CSS,less, SCSS, JSON, JSX, and integrate VSCode, Vim, Webstorm,sublime Text.

So, esLint + Prettier in a simple project

1. During project initialization, select the style as

2. Save and verify the code style, and verify the code style when submitting the code

Eslintrc.js or eslintrc, which is a JSON file 4. Then we go to configure the.eslintrc.js file. Here we only configure the rules section

  • 0 or ‘off’ : disables the rule.
  • 1 or ‘WARN’ : Opens the rule as a warning (does not result in a failed check).
  • 2 or ‘error’ : opens the rule as an error (the exit code is 1 and the check fails).

“rules”: { “quotes”: 2, “semi”: 1, “no-console”: 1, “space-before-function-paren”: 0 } 5. Start the project

6. We want to fix our code while saving, so we install the vscode plugin for eslint

After installation you can see the wavy line error

7. Add the following statement under vscode setting.json

"editor.formatOnType": true,
"editor.formatOnSave": true,
"eslint.codeAction.showDocumentation": {
    "enable": true 
  }, 
"editor.codeActionsOnSave": { 
    "source.fixAll.eslint": true, 
  },
 "eslint.validate": ["javascript", "javascriptreact", "html", "vue"]
Copy the code