Eslint is often used in static code scanning, through the set ESLint syntax rules, to check the code, through the rules to constrain the style of the code, in order to improve the robustness of the code, to avoid the possibility of bugs in the application because the code is not standard. Rules are free, you can set your own rules for your own team, or you can directly use popular rule sets in the open source community, such as Airbnb, eslint-plugin-Vue, etc

1. Eslint configuration

Before writing the rules, let’s review the ESLint configuration. Eslint is usually configured using.eslintrc.js, or you can define eslintConfig properties directly from package.json

👆 is the main configuration for ESLint, so let’s briefly review the meaning behind each configuration

1.1 the parse

Parse is used to define the parser used by ESLint. The default is Espree🔗. The parser converts code into an AST abstract syntax tree, called ESTree in ESLint

Consider the following example for Espree

Common parsers include the following

  • Esprima: The espree mentioned above is based on Esprima

  • Babel-eslint: A wrapper around the Babel parser. When you use Babel in your project, the Babel parser converts your code to an AST, which then converts it to an ESTree that esLint understands. We currently use this a lot, and currently no longer maintain or update it, upgraded to @babel/eslint-parser

  • @typescript-eslint/parser: Converts typescript to estree compatible form for use in ESLint.

For simulation generation of AST, students who are interested can try it online using AstExplorer

Summary: Whatever parser you use, the essence is to convert code into a language that ESLint can read: ESTree🔗

1.2 parseOption

The parserOptions parameter is used to control the parse parser and includes the following properties 👇, which we’ll highlight

  • ecmaVersionFor example: ESLint supports ECMAScript 5 syntax by default, but if you want ESLint to support ES6 features, you can do so by modifying parserOptions"ecmaVersion": 6

1.3 rules

Rules are esLint rules. You can add custom rules to your rules configuration for different scenarios and specifications. For details, see the previous 🌲 tree jam front-end specification

1.4 Extends and Plugins

The extends extends extends is confusing with plugins. The essence of the extends extends is to make ESLint more extensible, so that you can use esLint rules that have already been written by someone else and apply them to your project quickly and easily. Present and plugin in the Babel configuration mentioned

If you use extends {“extends”: [“eslint:recommended”, “plugin:react/recommended”, “eslint-config-standard”,]}

{“plugin”: [‘react’,’standard’]}

⏰ note: NPM package extensions must officially start with eslint-config-, which can be omitted. In the example above, eslint-config-standard can be simply written as standard. Similarly, if you’re developing an ESLint plug-in, you’ll need to name it this way, as described in the next section

Let’s do another example

Using the configuration example above, we can see that both plugins:[] and extends:[] are not parser, parserOptions, plugins, etc. This is because the extends: Plugin: @typescript-esLint /recommended function defined in Configuration 2 automatically loads several other configurations mentioned above

2 Develop the ESLint plugin

With the configuration of ESLint learned in the previous section, let’s take a look at how to develop an ESLint plug-in from 0 to 1.

2.1 EsLint plug-in initialization

For developers’ convenience, ESLint officially provides templates that use Yeoman scaffolding (generator-esLint 🔗). So that we can pull the ESLint plugin template from the scaffolding and learn more about Yeoman by reading about front-end engineering for Tree Jam at 🌲 – Yeoman

  • Step 1: Installnpm install -g yo generator-eslint
  • Step 2: Create a folder and then initialize the project structure of the ESLint plug-in from the command lineyo eslint:plugin
  • Step 3: Complete plug-in initialization

2.2 Creating rules

After the plugin project structure is initialized, start generating ESLint rules. In the ESLint project, run the yo ESLint :rule command to generate templates for ESLint rules, as shown below

Once created, let’s take a look at the final directory structure

  • Docs: Use a document that describes the rules you write
  • Lib /rules directory: rule development source files (for example, no-extra-semi.js)
  • The tests/lib/rules directory: unit test files (for example, no-extra-semi.js)

2.3 Writing Rules

Once the esLint plugin template is initially complete, we’ll go to the lib/ Rules directory and develop the rules we just created

Let’s say we have a scenario where we want to create a rule that can be used to determine whether a console method is called in our code. Let’s go back to the parse parser mentioned in the first section. In essence, the rule’s logic is determined by recognizing the abstract syntax 🌲 returned by Espree, defining the check method for each type. Before writing the code, let’s take a look at what the AST returned by console looks like.

Console. log() is a type of CallExpression in ExpressionStatement. You can use the object in the Callee attribute to determine whether it is console. You can also use its property attribute to determine which methods of console, such as log, info, etc

So we start building toys by defining a CallExpression method in the object returned by create. When ESLint starts iterating through esTree, it checks whether the call statement is a console call by listening for it, as shown in 👇

Each rule is a Node module, which consists of meta and create, with emphasis on the following two 👇

  • meta: The metadata that represents the rule, including categories, documents, schemas for accepted parameters, etc. The main one is schema. If this option is specified, ESLint can avoid invalid rule configurations (excluding validation) by passing identified parameters, see options passed in unit tests in the next section
  • Context.report () : This is used to issue warnings or errors (depending on the configuration you are using)

🌲 Recommended reading:

  • Eslint – Working with Rules

2.4 Unit Tests

Once the Eslit plug-in is developed, we need to validate the plug-in to ensure that the rule validation function is working properly. Mocha is used as a unit testing framework by default in the ESLint plug-in development project structure

We modified the tests/rules/treegogo.js unit test file to define the different examples of invalid and valid

The last execution

2.5 About Publishing

Before publishing, you also need to define the entry file lib/index.js in packjson main to expose rules and configs

👨🎓 Ahkuan: How do I define a set that contains configuration?

Yes, the official documentation says: you can specify packaged configurations in a plugin under the Configs key. This is useful when you want to provide not only a code style, but also some custom rules to support it. Each plugin supports multiple configurations, and when you use it, you can use {“extends”: [“plugin:tree-eslint/myConfig”]}, which includes preset rule configurations

Finally, NPM released NPM Pulish

To learn more about NPM publishing, you can read tree Jam’s 0-1 Development Tool library – NPM publishing is not covered here

2.6 How to Use it

The configuration described in section 1 requires an.eslintrc file, which can be initialized using the eslint-init command line if the directory is not available. After configuration, install the newly opened ESLint plugin

Configuration 1 can configure the rule we developed: Error, WARN,off, add option if you need to exclude parts, or refer to the default extends like configuration 2

Previous popular articles 📖 :

  • Developing visual Data Screens from 0 to 1 (PART 1)
  • Developing visual data Screens from 0 to 1 (part 2)
  • Construction of front-end Knowledge System of Tree Jam (PART 1)
  • Construction of front-end Knowledge System of Tree Jam (Part 2)
  • Talk about daily collaboration tools for front-end development
  • Babel configuration is stupid
  • How to better manage the Api
  • The interviewer asks you about Node
  • Front-end engineering stuff
  • Did you learn BFF and Serverless
  • Front-end operations and deployment

Hello, I am 🌲 tree sauce, please drink a cup 🍵 remember three lian oh ~

1. Remember to click a thumbs-up after reading oh, there is 👍 motivation

2. Pay attention to the interesting things at the front of the public account, and chat with you about the interesting things at the front

3. Github frontendThings thanks to Star✨