Introduction and use of ESLin and problems that ESLin cannot use

1. What is eslint

ESLint Is a code checking tool used to check whether your code meets the specified specifications (for example, there must be a space before and after =).

standard
- Industry recommended specifications; When creating the project, we use the rules of JavaScript == Standard == Style code style
- Custom specification. You and your team can agree on a set of specifications
The advantage of using ESLint is that the code style is unified when multiple people cooperate

eslint is the judge and Standard is the law

2.JavaScript Standard Style specification

We selected this specification at the beginning of the project creation, that is, all our subsequent codes must comply with this requirement, otherwise ESLint will report an error.

Here are a few of the rules:

Use single quotation marks for strings – except where escape is required
Keyword followed by a space if (condition) {...}
Function name followed by whitespace function name (arg) {...}
Insist on using congruence = = = discard = = one, but you can use obj == null when you need to check null | undefined
...

It is suggested that official Read the document, and then you can query and solve the error when writing. If you can't find the rules, you can see here >>>>>>

3. Code specification error

If your code does not meet the requirements of standard, eslint will jump out of the knife mouth and remind you heartily. Let's make some changes in main.js: add a line let a= 10;

import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false let a = 10 // This line of code is newly added new Vue({ router, render: h => h(App) }).$mount('#app')

After pressing save code, you will see the following error output in the console:

4.ESLint - error correction

There are four ways to correct errors:

Manual correction: human flesh modification
Command correction: npm run lint
Modification rules: make the code conform to the modified rules, and of course, no error will be reported
Plug in correction: cooperate with the eslint plug-in in vscode

4.1. Manual correction

Manually correct one by one according to the error prompt.
It is recommended that you manually modify errors to help develop good coding habits and be more professional

4.2 command correction

vuecli provides an automatic repair function when creating a project (some complex errors still need to be corrected manually). The specific method is to run:

npm run lint

4.3 ESLint - custom rules

Under the root directory of the project, there is a. eslintrc.js file, which configures eslint, and one attribute is specially used to set custom code rules: rules

module.exports = { root: true, // The current project uses this configuration file and will not find the. eslintrc.js file in the parent directory env: { // Specify the eslint startup environment (node support at the bottom of vuecli). browser: true can also be set in the browser node: true }, extends: [ // Extended configuration 'plugin:vue/essential', // Necessary rules in vue '@vue/standard' // Make eslint inherit the - standard standard standard in @ vue/cli scaffold ], parserOptions: { // Use eslint for new syntax parser: 'babel-eslint' // Use Babel eslint to parse the new syntax ES6 }, // Custom rule configuration can be performed here // key: rule code // value: specific qualification method // "off" or 0 - close rule // "warn" or 1 - treat the rule as a warning (does not affect the exit code), only a warning and does not exit the program // "error" or 2 - treat the rule as an error (exit code is 1), report an error and exit the program rules: { // Custom rules - in fact, there are many built-in rules after the above integration. You can modify the rules here 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // The online environment reports a warning by printing, and the development environment closes this rule 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // debugger can terminate code execution 'no-multiple-empty-lines': 'off' // Multiple consecutive blank lines are not allowed (closing rule) } }

Rules is an object that specifies rules in the form of key value pairs:

The key name is the rule name (which can be viewed in the error message and eslint official website)
Value is the specific description of this rule. The most common are off, warn and error.
This method needs to be used with caution. If you modify the rules, the whole team needs to modify the rules, otherwise the project cannot be carried out

4.4.ESLint - using plug-ins in vscode

4.4.1 installing the eslint plug-in

We can also install the eslint plug-in to let vscode tell me in real time what's wrong with me

4.4.2 eslint auto format correction code

Follow the following five steps:

Supplementary contents (step 4):

{ "eslint.enable": true, "eslint.run": "onType", "eslint.options": { "extensions": [ ".js", ".vue", ".jsx", ".tsx" ] }, "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }

Note: Step 2: configure in the workspace. Each item needs to be configured separately; If it is configured on the user in the second step, you only need to configure it once, and then the project can be used, but not all projects use this set of rules;

5. Possible problems

5.1 Ctrl + s save without automatic formatting

Open a code file, and there is an ESLint in the lower right corner. If so, click it, and the dialog box pops up. Select AnyWhere to take effect AnyWhere (start ESLint in vscode)

Becoming v means starting

5.2 auto indent 1

Try to uninstall the Beautify plug-in - eslint can also Beautify the code

If you use other extensions in vscode to enable automatic formatting, it may conflict with the rules of eslint!

Solution: turn off automatic formatting in vscode

5.3 auto indent 2

If not, modify the vscode configuration
In File > settings, search for this and remove the check box below

5.4 one preservation, single lead transformer and double lead transformer

Reason: vetur plug-in conflicts with eslint. Modify the eslint plug-in configuration and overwrite the code here

{ "eslint.run": "onType", "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "vetur.validation.template": false, // Remove the template format of vetur extension "editor.formatOnSave": false, // Remove the auto save provided by vscode. Vscode is also false by default. If you want to format with eslint, the default format cannot be opened "eslint.enable": true, // eslint formatted configuration "eslint.autoFixOnSave": true, // Syntax errors are automatically resolved when eslint is saved "eslint.options": { // eslint option - Format js and vue files "extensions": [ ".js", ".vue" ] }, "eslint.validate": [ "javascript", { "language": "vue", "autoFix": true, }, "html", "vue" ], }