ESLint is often used in static code scanning to check code by setting ESLint’s syntax rules, and to restrict the style of the code through the rules, so as to improve the robustness of the code and avoid the possibility of bugs caused by irregular code in the application. And the rules are free, you can set the rules internally for your own team, You can also directly use the popular set of rules from the open source community, ESLint 1.1 Parse1.2 ParseOption 1.3 Rules 1.4 extends Plugins 2: Parse 1.2 ParseOption 1.3 Rules 1.4 extends Developing an ESLint Plugin 2.1 An ESLint Plugin initializes 2.2 Create a Rule 2.3 Write a Rule 2.4 Unit Test 2.5 How do you use 1. ESLint’s configuration for publishing 2.6
Before writing out the rules, let’s review the ESLint configuration. Usually we use.eslintrc.js to configure ESLint, or we can define the image.png property of ESLintConfig directly in package.json
Figure 👆 shows the main ESLint configurations. Let’s briefly review the meaning behind each configuration
1.1 the parse
Parse is used to define the parser that ESLint uses. By default, ESPREE 🔗 is used to convert code into an AST abstract syntax tree. ESLint is called ESTree, which you can interpret as translating code to ESLint to understand 👂. For Espree, see the following example
image.png
Other commonly used parsers include the following
Esprey: The aforementioned Esprey is based on Esprey
Babel-eslint: A wrapper around the Babel parser that converts your code to an AST when you use Babel in your project, and the parser converts it to an ESTree that ESLint understands. This is currently used more by us, and is no longer maintained or updated at this time. It’s updated to @babel/eslint-parser
@typescript-eslint/parser: Converts TypeScript to an estree-compatible form for use in ESLint.
For AST simulation generation, interested students can use ASTExplorer online try
image.png
Summary: Whatever parser you use, the essence is to convert code to ESTree🔗, a language ESLint can read
1.2 parseOption
The parserOptions parameter is used to control the parse parser and consists of the following properties 👇, with particular emphasis on image.png
EcmaVersion: This specifies the version of ECMAScript you want to use. The default is set to 5. For example: By default, ESLint supports ECMAScript 5 syntax, but if you want ESLint to use ES6 features to support it, you can do so by modifying “ecmaVersion”: 6 1.3 rules in parserOptions
Rules are the rules of ESLint, and you can add custom rules to your rules configuration based on different scenarios, different specifications, as described in the previous 🌲 tree paste front-end specification.
Extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends If you use extends to extend {“extends”: [ “eslint:recommended”, “plugin:react/recommended”, “eslint-config-standard”, ]}
But if you want to use a plugin, it’s the same thing as {“plugin”: [‘react’,’standard’]}
⏰ Note: It is official that extensions to the NPM package must start with eslint-config-, so we can omit this prefix. In the example above, eslint-config-standard can be simply written as standard. Also, if you’re developing an ESLint plug-in, you’ll need to name it this way, as discussed in the next section