ESlint configuration details

ESlint is a plug-in static checking tool for JavaScript code. The core of ESlint is the ability to check code quality and style issues by analyzing code through pattern matching of the AST (Abstract Syntax Tree) derived from code parsing.

After installing esLint-related dependencies, we can also choose from open source configuration schemes such as eslint-config-Airbnb or eslint-config-standard. It can also be configured according to the individual or team’s code style. Once configured, project code can be statically checked to find and fix code that does not conform to the specification, either through a command line tool or through the editor’s integrated ESLint functionality. ESLint also provides auto-fix capabilities that can help you automatically fix code formatting problems.

Detailed description of the configuration file

1. root

By default, ESLint will look up configuration files all the way to the root directory. Once a configuration file is found at one level with the root parameter and set to true, ESLint will stop looking up one level and all the configuration file rules will be applied on top of each other. If there are duplicate attribute configurations, the configuration file closer to the file has higher priority

PS: If there are multiple configuration files in the project directory, ESLint will only use one with a priority of.eslintrc.js >.eslintrcs > package.json

2. Env Execution environment

Specify the environment in which the script runs, each with a specific set of predefined global variables

Here’s an example:

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

If you set ES6 to false as above, ESLint checks will report errors if the keywords let, const, etc. For example, if browser is true, it means that the script is running in the browser environment. If Browser is set to false, no error is reported when window appears in the code.

3. Globals

Additional global variables accessed by the script during execution

 globals: {
   $: true
   jquery: true
 }
Copy the code

4. ParserOptions parserOptions

ECMAScript5 syntax is supported by ESLint by default. With this configuration, you can specify the ECMAScriipt version and JSX support. The following options are available:

  • EcmaVersion, which specifies the version of ECMAScript we want to use, such as 3, 5(default), 6, 7, 8, 9, 10
  • SourceType, set to script (default), or module (if your code is in an ECMAScript module).
  • EcmaFeatures, which represents additional language features we want to use
    • GlobalReturn, which allows use of return statements in a global scope
    • ImpliedStrict, enable global Strict Mode (if ecmaVersion is 5 or higher)
    • JSX, enable JSX
    • ExperimentalObjectRestSpread, is not recommended
 parserOptions: {
     ecmaVersion: 6,
     sourceType: "module",
     ecmaFeatures: {
         "jsx": true
     }
 },
Copy the code

5. Parser

First, what is a parser? ESLint will only validate ECMAScript languages by default. For example, if we need to validate TypeScript languages, The @typescript-esLint /parser parser needs to be installed. Configure parserOptions. Generally, both Parser and parserOptions need to be used at the same time.

Parser Specifies the parser to use. ESLint uses Espree as its default parser. Common parsers include:

  • esprima
  • @ Babel/eslint – parser:
  • @typescript-eslint/parser: Converts typescript to estree compatible form for use in ESLint
  • vue-eslint-parser

6. processor

Specifies the plug-in’s handler (needed in conjunction with the plugins field), and what the handler does

  • It is a specification that can extract JavaScript code from other files (non-javascript files) and have ESLint examine that JavaScript code
  • During preprocessing, if you need to do some transformation of JavaScript, you can use a processor

Example 1: Enable processor A-processor provided by plug-in A-plugin

 {
  "plugins": ["a-plugin"],
  "processor": "a-plugin/a-processor"
 }
Copy the code

Example 2: Specify a processor for a particular type of file

{
 "plugins": ["a-plugin"],
 "overrides":[{
   "files": ["*.md"],
   "processor": "a-plugin/markdown"
 }]
}
Copy the code

7. Plugins plugins

ESLint supports the use of third-party plugins, which must be installed using NPM before they can be used. The esline-plugin-section can be omitted when introduced.

What are the main functions of plugins? Plugins are usually used to enhance the capabilities of a framework, in this case ESLint. Plugins are simply adding new capabilities to ESLint in addition to its regular ability to check the JS code specification. Here are two examples:

Example 1: ESlint-plugin-prettier This plugin gives ESLint the ability to format code as prettier does.

NPM I eslint-plugin-prettier -d {plugins: ['prettier']}Copy the code

Example 2: To use TypeScript in a project, you first need to change the parser to @typescript-eslint/parser and install the @typescript-eslint/eslint-plugin to extend the rule. Rules in plugins added are not turned on by default, so we need to use them in rules, which means plugins are used in conjunction with rules, or directly through extends.

// NPM I --save-dev @typescript-eslint/eslint-plugin // register plugins {"parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint"], // Introduce plugin "rules": {"@typescript-eslint/rule-name": "Error" // use the plugin rule '@typescript-eslint/ rabin-overload -signatures': 'error', '@typescript-eslint/ban-ts-comment': 'error', '@typescript-eslint/ban-types': 'error', '@typescript-eslint/explicit-module-boundary-types': 'warn', '@typescript-eslint/no-array-constructor': 'error', 'no-empty-function': 'off', '@typescript-eslint/no-empty-function': 'error', '@typescript-eslint/no-empty-interface': 'error', '@typescript-eslint/no-explicit-any': 'warn', '@typescript-eslint/no-extra-non-null-assertion': 'error', ... }}Copy the code

Or use extends to introduce

{ "extends": ["eslint:recommended", // Official extension "plugin:@typescript-eslint/recommended", // Plugin :@typescript-eslint/recommended", // NPM package, popular configuration solutions in open source community, such as: Eslint-config-airbnb, eslint-config-standard],}Copy the code

8. Extends extension

Used to inherit some base configuration. Values can be strings/arrays. When the value is array, each configuration inherits its previous configuration. Ll: No, I don’t have to write my rules in advance. Don’t write rules one by one, if you have rules that don’t suit you, write rules and override basic configuration items (e.g. Eslint :recommended).

9. Rules Configure rules

.

2, ESLint + Prettier

3, Installing ESlint, Prettier Usually involves installing scaffolding automatically, as well as manually, if there is already a project where you want to introduce ESlint and Prettie

1. Install ESLint

npm i eslint -D
Copy the code

2. ESlint initializes configuration to generate files such as.eslintrc.js

eslint --init
Copy the code

3. Create an. Eslintignore file

Create an. Eslintignore file in the root directory of the project and add directories and file names to the file to skip the check as shown in the following example:

/dist
/publics/libs
/origin
package.json
Copy the code

4. Install Prettier

npm i prettier -D
Copy the code

5. Install eslint – config – prettier

The main purpose of ESLint is to disable rules where Prettier is configured in conflict with ESLint

npm i eslint-config-prettier -D
Copy the code

In.eslintrc.js

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

6. Install eslint – plugin – prettier

The ability to format Prettier into ESLint is used primarily to integrate formatting from Prettier into ESLint

npm i eslint-plugin-prettier -D
Copy the code

Modify the. Eslintrc.js configuration

{" rules ": {" prettier/prettier" : "error"}, "plugins" : [" prettier "],}Copy the code

Or combine the two steps and use extends instead

{
 "extends": [
   "eslint:recommended",
   "plugin:prettier/recommended"
 ]
}
Copy the code

7. Create the.prettierrc.js file where prettier’s default configuration is modified

Module. exports = {// exports need semicolon: false,}Copy the code

8. Create a prettierignore

Ignore formatting of certain files

 dist
 node_modules
 .eslintignore
 .prettierignor
Copy the code

3, integrating ESLint + Prettier in VSCode

1. Install the following plug-ins:

  • ESLint
  • Prettier
  • EditorConfig for VS Code, this plug-in allows the compiler to read configuration files

2. The configuration setting. Json

  1. Configure the workspace setttings. Json file
{// # Automatically format "editor.formatOnSave": true, "editor.codeActionsOnSave": {" source.fixall.eslint ": true}Copy the code
  1. Json user area, create a. Vscode directory in the project root directory, and create a settings.json file in this directory.
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
  "eslint.validate": ["typescript", "javascript", "vue"]
}
Copy the code

3. Configure the EditorConfig file

Create an. Editorconfig file in the project root directory. Once created, the code specification rules defined in this file will be higher than the compiler’s default code specification rules.

 root = true
 [*]
 charset = utf-8
 indent_style = space
 indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
 end_of_line = auto
Copy the code

4. Reference links

  • Eslint.bootcss.com/docs/user-g…
  • Blog.csdn.net/brokenkay/a…
  • zhuanlan.zhihu.com/p/295291463
  • www.cnblogs.com/Yellow-ice/…
  • www.jianshu.com/p/18b27d97a…