You can understand it at a glance, eslint

1.Eslint What is it for

ESLint It was originally made by Nicholas C. Zakas On 2013 year 6 Open source project created in . Its goal is to provide a plug-in javascript Code detection tools .

2. Why use Eslint

ESLint It's an open source JavaScript Code checker ,. Code checking is a static analysis , Often used to find problematic patterns or code , And it doesn't depend on the specific coding style . There are code checks for most programming languages , Generally speaking, the compiler will have built-in checking tools .
Ten million lines of code , Safety first line ; The front end is not standardized , Two lines of tears of colleagues

1. Unified team coding specification （ name , Many formats, etc ）
2. Unified grammar , After all es There are many versions (var/let…)
3. Reduce git Unnecessary submission （ If the file format is different , Will also be git The submitted ）
4. Avoid low-level mistakes Check syntax at compile time , Instead of waiting JS Check only when the engine is running

3. Download configuration manually ( principle )

3.1 Create project
Create a test folder ：eslint_test
Initialize project ：npm init -y ( establish package.json)
3.2 ESLint install
Install directly in the project eslint package npm i eslint -D
Pay attention to the installation results ：node_moduels There are many packages downloaded from

• .bin/eslint.cmd Script files , Through internal nodejs perform eslint Run package Code for
  

• @eslint package Used for specification eslint The configuration file
  

• eslint The first bag yes eslint Run package , contain eslint Code
  
  3.3 Generate ESLint The configuration file
  Use npx To execute ( recommend )：npx eslint --init
  
  Execution results
  
  
  3.6 ESLint perform

• command ：npx eslint ./ Need to check the syntax of the file path

• If you break the rules , Will prompt the error to terminal , explain eslint Work well

4.ESLint Getting started with profiles

4.1 env node

"env": {
    
    "browser": true,
    "commonjs": true,
    "es2021": true
}

because ESLint In various specifications of , It is generally not allowed to use members that are not declared in the page , So tell me eslint, In which environments does the current code run .
4.2 globals node

When accessing an undefined variable in the current source file ,no-undef The rules will warn . If you want to use global variables in a source file , Recommend you in ESLint Define these global variables in , such ESLint There will be no warning . You can use comments or define global variables in the configuration file .

 "globals": {
    
  "_": true  //  Can read , You can modify 
  "$": false //  Can read , Do not modify 
 }

have access to globals Node to manually configure global members
4.3 extends node
Through this node, you can configure and use Built in specifications still Third party specifications

"extends": [
  "standard" // "eslint-config-standard"
 ]

Be careful ： To configure extends when , It can be omitted eslint-config-, Written directly standard
4.4 parserOptions node
ESLint Parser When parsing code , You can specify Which one to use js Version of

 "parserOptions": {
    
  "ecmaVersion": 12
 }

Be careful ： Here is the designation According to which js Version syntax check , But it doesn't include Global variables
4.5 rules node

 "rules": {
    
 }

Two ways of using ：

1. Don't use extend node To configure A complete set of specifications , But in rules Directly configure in the node
2. Use extend node To configure A complete set of specifications , stay rules Modify the configuration of some specifications in the node

5.ESLint Check the rules of grammar

5.1 ESLint The essence of grammatical norms
Nature is function
We can go through see ESLint Source check ：

• eslint built-in 285 A rule , Every rule It's all one create function
• When checking grammar , Will turn the code into another

6. Syntax specification package type

a. ESLint Built in specification package ：eslint-all / eslint-recommended

b. Standard Specification package ：eslint-config-standard

c. Third party specification package (google/airbnb/facebook…)

6.1 Built in specification package

Have followed eslint Download it together ：
eslint-all： Use all 280 Multiple rules
eslint-recommended： Use only the recommended 60 A rule

6.2 Standard Specification package ( Need to download )
Package name ：eslint-config-standard Also used. 200 Multiple rules
Manual Download ：
a. Check the package and version to download npm info "[email protected]" peerDependencies
b. download Related packages npx install-peerdeps --dev eslint-config-airbnb-base

7. Configuration specification package

7.1 modify eslint The configuration file

module.exports = {
    
    "env": {
    
        "browser": true,
        "commonjs": true,
        "es2021": true
    },
    // "extends": "eslint:all", //  built-in ： All the rules 
    // "extends": "eslint:recommended", //  built-in ： Recommendation rules 
    "extends": "eslint-config-standard", //  The third party ： Standard rules 
    // "extends": "eslint-config-airbnb-base", //  The third party ：airbnb Company rules 
    "parserOptions": {
    
        "ecmaVersion": 12
    },
    "rules": {
    
    }
};

7.2 function ESLint
Be careful ：ESLint By default, only js File code , If you want to Check vue or react file , Need to install other plug-in packages

npx eslint ./index.js //  Check   Target file 
npx eslint ./src //  Check   Destination folder   All in js file 

7.3 Test different packages and check the same code
A piece of the same code


Be careful ： I usually write code in strict mode , If you go to the company, you have to write according to the company's specifications .