Format checking tool eslint

eslint What is it? ？

eslint Is a tool for reporting whether the syntax format conforms to the specification , The purpose is to improve the readability and maintainability of the code , Its principle is to use AST To evaluate the code format . The feature is high scalability ( You can add your own rules )、 Full pluggability ( About eslint The rules of can be applied in many places ).

1. For example, to perform npm install eslint Command after installation ,package.json Under the devDependencies There will be eslint
   
2. stay vscode There will be... In the expansion store in eslint plug-in unit
   
3. about gitlab Remote format verification of , Is to use gitlab ci runner Inside eslint check

that package.json Under the eslint、vscode Inside eslint and ci runner Inside eslint What's the difference? ？

First ,package.json Inside eslint Only applicable to this package.json Project , This approach applies when you just want to reference locally eslint Check the situation ( That is, you just want to reference format verification in a single project ).

Second, let's look at vscode Inside eslint and ci runner Inside eslint！

The code specification verification of a project usually consists of two parts ：

1. be based on git hook The check
2. webpack Medium eslint-loader validators

The user has installed the corresponding dependency , Starting the project will trigger webpack Calibrator in , Submitting code triggers git Verifier set in hook , At this time , The code format submitted to the remote end is generally secure . The condition that the code format can meet the verification rules is to start the project or execute the submission operation after installing the corresponding dependencies , Therefore, there will also be a blind area that cannot trigger the calibrator . It can be divided into the following two situations ：

1. Do not install package （ Do not download node_modules） The situation of
   In this case webpack and eslint Dependency does not exist , The corresponding two validators themselves do not exist . Thus, the code pushed to the remote end may have the problem of code format error , To prevent such problems , need gitlab in ci runner Inside eslint Open the remote eslint check .

2. Installed package , But don't start and don't submit
   In this case eslint and webpack Dependency installed , The project didn't start , therefore eslint-loader Do not trigger verification . No submission , So... Is not triggered git hook , There is no trigger eslint validators . In order to know whether the code conforms to eslint standard , Need to use vscode Inside eslint plugin, This plug-in is based on AST Provides a method of local verification , After installing this plug-in , Will automatically detect js and jsx Whether the document does not conform to eslint Standard code .
   Then you can execute some commands , For example, according to .eslintrc.js( This file is automatically generated after installing the plug-in , There is a set of rules by default , You can add your own rules on this basis later ) Configure rules to correct automatically demo.js Non conformance in eslint Standard code ：eslint demo.js --fix

   stay vscode Want more convenient 、 Automatic repair and detection of multiple files can be achieved without using commands , Need to be in vscode Configure the settings in preferences , Every time you save a file, you can use .eslintrc.js Configure rules to check the format of various types of files and make some simple repairs .

vscode in eslint plugin How to configure automatic detection and simple repair ?

1. open vscode Settings in
   

2. It opens at json Settings in form
   

3. Here are eslint Some configuration methods ( Add... After the original configuration )：

   (1) A set of language identifiers , Specify the file to validate , Only by default "javascript", "javascriptreact" two , That is, only for js And jsx Document carried out eslint check , If you want to edit more files eslint check , Manual configuration required , My project is applied to ts,tsx and vue Type file , Here is my configuration , Added later ts,tsx and vue file ：

   "eslint.validate": [
       "javascript", 
       "javascriptreact",
       "typescript",
       "typescriptreact",
       "vue",
   ],
   

   (2) The following settings include ESLint All providers including turn on automatic repair ：

    "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
    },
   

   (3) More configuration Click here