Global installation

npm install -g eslint

And then into the project, the execution eslint – init, then on-demand option (react/vue, typescript, node/browser, select), finally asked whether immediately NPM install package (optional, behind their installation with yarn, Otherwise, select yes), and the configuration file is automatically generated.

Basics (skippable)

The configuration file

.eslintrc.js,.eslintrc.json,.eslintrc.yml, etc

Three relatively useful properties

(1) Parser

ESLint uses Espree as its parser by default. You can specify a different parser in the configuration file as long as it meets the following requirements:

  1. It must be a NPM module installed locally.
  2. It must have an Esprima compatible interface (it must output oneparse()Methods)
  3. It must produce AST and token objects that are compatible with Esprima.

As long as you know how to use it. The aim is for front-end frameworks such as vue files, which cannot be used by the default Parser, which only knows native JS related files. In this case, use a third party like Parser: ‘vue-eslint-parser’.

(2)env

env: {
    browser: false,
    node: true,
    es6: true
  }
Copy the code

Tell ESLint what environment you are developing js in. In fact, it is mainly to determine whether global variables, such as the window object in the browser, are valid

(3) extends (string array)

Specifies where the current rule configuration is inherited.

There are two different types of NPM package names:

  1. Rule package: eslint-config-xxx, which provides specific code style checks based on existing rules
  2. Plugin package: eslint-plugin-xxx, which provides new rules

Rules of writing:

Extends can omit the package name prefixes eslint-config-, eslint-plugin-.

  1. Rules package:The package name or Package name :(path or shareable configuration)
"extends": [
        "eslint:recommended"."standard",].Copy the code
  1. The plug-in package:Plugin: package name/configuration
"extends": [
        "plugin:vue/recommended"].Copy the code

The core use

The rules: {… } to select which rules to enable.

Chinese document of Rules: Rules

Example:

    "rules": {
       "quotes": "error"
    }
Copy the code

Values for rules:

A string or number:

“Off” or 0 – Turns off the rule

“Warn” or 1 – Treat the rule as a warning (does not affect exit codes)

“Error” or 2 – Treats the rule as an error (exit code 1)

Array form:

“Quotes “: [“error”, “double”], the first value is the error level, the second value is the option (argument), see the document query

Rule override:

We manually define the highest priority in rules, overriding the Settings of other plug-in extensions.

To configure a rule defined in a plugin, you must use the plugin name/rule ID. Such as:

{
    "plugins": [
        "plugin1"]."rules": {
        "eqeqeq": "off"."curly": "error"."quotes": ["error"."double"]."plugin1/rule1": "error"}}Copy the code

File

You can use block comments in the following format to temporarily disallow a rule warning in your file:

/* eslint-disable */ Code starting here is not checked by ESLint /* eslint-enable */ Code starting here is checked by ESLintCopy the code

You can also enable or disable warnings for specified rules:

/* eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');
/* eslint-enable no-alert, no-console */
Copy the code

The same is true for custom rules in plug-ins. Just put the plug-in name/rule ID in the comment.

vscode

To install the ESLint extension, refer to the official example, vscode(etc.) should also manually configure the types of files to check

    "eslint.validate": [
        "javascript"."javascriptreact", / / JSX namely"typescript"."typescriptreact", the / / TSX composite"html"."vue"].Copy the code

Make eslint available as a formatting tool, so you can use the vscode default formatting shortcuts, eliminating one shortcut memory

    "eslint.format.enable": true.Copy the code

Note: There is a strange problem after changing VSCode Settings/reinstalling the package, try to restart VScode