Author: Duang

Source: Hang Seng LIGHT Cloud Community

Objective: During this time many people develop the same front project, our group met colleagues to submit code with bedding face format changes, find the reason is we vscode install plugin code formatting specification and local configuration is different, and his colleagues set up automatic formatting code, it is easy to can’t find the actual code changes when merging code points, the pitfalls. On the other hand, I’m also responding to the company’s call to formalize code, so I took the time to learn about ESLint and share it with you.

1. Eslint is introduced

Lint is a general name for tools that check code formatting. Specific tools include JsLint, Android-Lint, etc. Eslint in this article is one of those tools.

JavaScript and JSX checking tools that can be assembled.

We are not talking about JSX here, only JS. Js is a weakly typed language, which does not need to execute program compilation, so it is not easy to timely find code errors in the development stage, and code errors need to be modified in continuous debugging. Eslint is a tool that can help front-end engineers find problems during coding rather than during execution.

2. Eslint characteristics

• Built-in rules and custom rules share a set of rules apis;
• Built-in formatting methods and custom formatting methods share a set of formatting APIS;
• Additional rules and formatting methods can be specified at run time;
• The rules and corresponding formatting methods are not mandatory for bundling;
• Each rule is independent and can be turned on or off according to the project;
• The user can set the result to a warning or error;
• Eslint does not recommend any coding style, rules are free;
• All built-in rules are generalized.

3. Eslint + VScode normalizes code operations

3.1. Install the ESLint plugin for the vue project

Terminal input:

npm install eslint --save-dev   
Copy the code

3.2. The configuration eslint

Eslint supports configuration files in several formats. If there are multiple configuration files in the same directory, esLint will only use one. The priorities are as follows:

1. JavaScript – Use.eslintrc.js and output a configuration object.
2. YAML – Use.eslintrc.yaml or.eslintrc.yml to define the structure of the configuration.
3. JSON – Using.eslintrc. JSON to define the structure of the configuration, ESLint’s JSON files allow JavaScript style comments.
4. Deprecated – Using.eslintrc, either JSON or YAML.
5. Package. json – Create an eslintConfig property in package.json and define your configuration there.

The following describes the fifth configuration method:

"EslintConfig ": {"root": true, // predefined global variable "env": {"node": true}, // extend rules by strings or arrays // extentds: 'Standard ', "extends": ["plugin:vue/essential", "eslint:recommended" // Enable recommended rules], "parserOptions": Babel-eslint "parser": "babel-eslint"}, // Custom rules can be customized according to project requirements by filling in "rules": {}},Copy the code

3.3. Vscode installs the ESLint extension

It is not enough to install esLint in your project. You need to install the ESLint extension in VSCode and configure it to see the error in the code.

Prettier-code Formatter, Vetur for example, prettier-code Formatter, vetur for example, prettier-code Formatter, vetur for setting.

After installing the vetur plug-in, the code error is shown as follows:

3.4. Vscode setting.json configuration

Local, private code normalization handling that needs to be set can be written in vscode’s setting.json file. To save and format the code, set it in setting.json. Setting. Json file to open: vscode- File – Preferences – Settings – Search eslint- Select a “Settings. json” file to open settings.json, as shown below:

1. If an error occurs according to the following configuration, use the latest version.

{
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "html",
            "autoFix": true
        }
    ]
}
Copy the code

2. New Version Configuration

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
  "eslint.probe": ["javascript", "vue", "html"]
},
Copy the code

4. Eslint rules

4.1. Three levels of values:

• “Off” or 0, disables this rule
• “Warn” or 1, there will be a warning if there is a problem
• “Error” or” 2 “, you get an error if you have a problem

4.2. Rules written:

Rule name: value

Rule name: [Value, Parameter 1, parameter 2…]

4.3. Examples of Common Rules:

Detailed eslint custom rules can view: cn.eslint.org/docs/rules/

4.4. Format closing rules

When you need to turn the format off, for example: when the re /\.js$/ is present in the code, the format transaction may have “unnecessary escape character:/\.” which cannot be made to disappear by modifying the code, you can use the format off rule to skip this type of code.

Here are some rules:

1. Disable format verification in range

/* eslint-disable */

alert('foo');

/* eslint-enable */
Copy the code

2. Close all format transactions for a row

alert('foo'); // eslint-disable-line
Copy the code

or

// eslint-disable-next-line

alert('foo');
Copy the code

This is the vue project in vscode, using eslint to implement code normalization introduction, hope to help students who are confused by eslint!