preface

The previous article talked about using EditorConfig and Prettier to constrain a project’s code style, but these tools don’t do much for syntactic constraints. So even with these two tools, some syntactic problems still require specialized tools like ESLint.

Begin to use

The installation

Install ESLint into your project using NPM:

$ npm install eslint --save-dev
Copy the code

Run the init command for ESLint:

$ npx eslint --init
Copy the code

To create an ESLint configuration file, follow the command line prompt:

{
    "env": {
        "browser": true."es2020": true
    },
    "extends": [
        "eslint:recommended"."plugin:react/recommended"."plugin:@typescript-eslint/recommended"]."parser": "@typescript-eslint/parser"."parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2020."sourceType": "module"
    },
    "plugins": [
        "react"."@typescript-eslint"]."rules": {}}Copy the code

The 👆 configuration allows ESLint to validate typescript, React, and other code in projects. But what if you want to change this configuration? That’s when you need to look at the documentation and move on

configuration

parser

ESLint parses code using the AST, and it’s parser that converts code to the AST. ESLint uses Espree as its default parser and supports other parsers (Esprima, babel-ESLint, etc.). In general, the default will do, but if you want ESLint to support checking typescript code, Use the @typescript-esLint /parser parser to convert typescript to estREE compatible formats for use.

parserOptions

As you can probably guess from the name, this is the parser option that allows the user to specify which JavaScript options they want to support. In other words, this option lets the user decide which JavaScript syntax to support. ParserOptions supports the following properties

  • EcmaVersion: ECMAScript version. Default is 5. You can specify the version you want to use using either a number or a year. Note: The version specified here only means that the corresponding syntax is supported. New global variables and types (such as Promise, Set, etc.) need to be specified in the env option.
  • SouceType:
    • Script (default)
    • Module, which is required when code is ESModule
  • EcmaFeatures: List of language features that require additional support. For example, JSX support can be configured as follows:
"ecmaFeatures": {
	"jsx": true
},
Copy the code

Note: parserOptions are also passed to the parser when using a third-party parser, but it is up to the parser to use these properties.

env

JavaScript code may run in a browser or Node, and different class libraries will be introduced to aid development. Different environments may introduce different global variables, and ESLint does not have global variables by default. Using these global variables with no_undef enabled (which disallows undefined variables) will cause an error.

Env is a set of predefined global variables that ESLint knows exist in the current environment. For example, if your project is running in a browser, written using ES2020 and using Jest tests, you can configure env like this:

"env": {
 	"browser": true."es2020": true."jest": true
},
Copy the code

rule

Rules specify how code should be written, such as requiring that undefined variables cannot be used in code and that semicolons must be added to the end of lines.

"rules": {
	"no-undef": "error"."semi": "error"
}
Copy the code

Each rule can have one of the following values:

  • “Off” or 0, indicates to turn off the rule
  • “Warn” or 1, turn on the rule and use the warning level
  • “Error” or 2, turn on the rule and use the error level

If a rule has additional arguments, pass the value through an array, for example using double quotes:

"quotes": ["error"."double"]
Copy the code

All of the rules can be viewed here

plugins

For example, eslint-plugin-react adds some react-related validation rules:To use the plugin, simply add the package name to the plugins field:

"plugins": [
	"eslint-plugin-react",
]
Copy the code

Plugin names can be abbreviated as follows

  • eslint-plugin-name -> name
  • @foo/eslint-plugin -> @foo
  • @foo/eslint-plugin-name -> @foo/name

Plugin only adds additional rules for use, so to configure these rules, you need to manually add them in the rules field. Note that you cannot use the name of the new plugin rule directly. Instead, you need to name it with the abbreviated package name /rule

"Rules ": {"react/display-name": "error", // eslint-plugin-react displays the display-name rule "@typescript/camelcase": "Off ", // @typescript/eslint-plugin camelcase rule}Copy the code

extends

As you can see from the above, rule by rule is a hassle. ESLint helpfully provides an extends field that allows you to quickly use someone else’s configuration. For example, to use the configuration recommended by ESlint, you can configure it like this:

"extends": [
	"eslint:recommended",].Copy the code

In this way, we are using a configuration recommended by ESLint and redefining rules in Rules that are not project-specific. ESLint provides two types of configurations, one is Recomn, the other is ALLhere. In addition to the configuration provided by ESlint, plugins also provide corresponding configurations for developers to use. For example, eslint-plugin-react configuration:To use this configuration, use:

"Extends ": ["eslint:recommended", "plugin:react/recommended", // this first extends configuration esLint :recommended],Copy the code

globals

There may be global variables that are unique to your project, and you need to define them in Globals to avoid being identified as undefined. To declare a global variable, add the following configuration:

"globals": {
	"var1": "writable".// Variables can be read and written
	"var2": "readonly".// Variables cannot be overridden
    "Promise": "off" // Disable this global variable
}
Copy the code

conclusion

JavaScript as a dynamic, weakly typed language makes it easy to write bad code without constraints, burying hidden bugs, while ESLint can regulate the way we write code so that problems can be found and warned as we write code, reducing the likelihood of problems.

ESlint official documentation

The last

Pay attention to the wechat public number “front-end barbecue stall” and get the summary and discovery of the front-end road of BBQ Jun in the first time.