1. Description of premises

What ESLint is: ESLint is a tool for identifying and reporting pattern matches in JavaScript code.

Why ESLint is needed: Ensures consistent code and avoids errors.

2. Narrative outline

  • The required depend on
  • Defining schema rules (.eslintrc configuration file)
  • Report non-conforming schema syntax (a combination of vscode and eslint)
  • Correct syntax that does not conform to a pattern

3. Required dependencies

"Eslint" : "^ 6.7.2", "Babel - eslint" : "^ 10.1.0", "eslint - plugin - vue" : "^ 6.2.2",Copy the code
  • You need to install the ESLint pattern recognition tool first and then create the esLint configuration file in the project root directory. Eslintrc.json. Eslint will automatically read.eslintrc configuration files.
  • The babel-esLint parser (why babel-eslint? Death to you heretic.)
  • Eslint-plugin-vue EsLint only recognizes JS files by default, and this plugin is essential to recognize Vue files.

4. Configuration file

{ "root": true, "env": { "node": true }, "extends": ["plugin:vue/essential", "eslint:recommended" // Enable recommended rules with a tag.] , "parserOptions": {"parser": "babel-eslint" // Use babel-eslint as parser}, "rules": {"no-debugger": ["error"], // [(0: off) ; (1 : warn) ; (2 : error)] "semi": ["warn"] } }Copy the code

The extends option is of concern. Here we have enabled the recommended rule. Recommended rules are preceded by a check. Vue rules are also enabled via plugin:vue/essential. At this point, when the code is in the debugger, an error is reported at compile time. Rules defines the debugger level as error.

5. The report does not conform to regular grammar

To red out incorrect syntax, you need to install the ESLint plugin.

After the installation is complete, the debugger is reported red

6. Fix invalid syntax

Define the rules first"semi": ["error"]A semicolon must end each line. In the absence of a semicolon…Now we want vscode to auto-complete semicolons for us. We need to modify the configuration file Settings -> Extensions -> eslint -> setting.json

  "editor.codeActionsOnSave": {
    "source.fixAll": false,
    "source.fixAll.eslint": true
  },
Copy the code

The missing semicolon will now be completed automatically when we autosave.

7. Precautions

Among the recommended rules, only rules with 🔧 ICONS can be fixed automatically. For example, even if the no-Debugger is started, debugers that appear in the code are not automatically removed.