Code normalization is becoming more and more valuable in increasingly large front-end multi-person collaboration projects, and ESLint is a good example of a front-end code specification solution. It provides syntax, error, and code formatting detection capabilities. But using ESLint isn’t going to be easy for many developers because it involves a lot of scenarios and environments.

This article describes the installation, configuration, and use of eslint, focusing on its use in project command line scenarios, git hook scenarios, and how to set up automatic reminders and automatic eslint formatting when saving in vscode. Welcome to exchange ~

The installation

npm install eslint -g 
Copy the code

After the installation, you can run eslint -h on the project command line to check whether the installation is successful. After the installation is successful, the command can be viewed normally.

The configuration file

Generating a Configuration File

eslint --init
Copy the code

Eslintrc.js is automatically generated by selecting the corresponding scenario as prompted

module.exports = {
    "env": {
        "browser": true,
        "es2020": true
    },
    "extends": [
        "eslint:recommended",  
        "plugin:vue/essential"
    ],
    "parserOptions": {
        "ecmaVersion": 12
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
};

Copy the code

use

1, active timing trigger

(1) Manual call script use

Configure script in package.json

"scripts": {
    "lint": "eslint --ext .vue,.js src",
    "lintfix": "eslint --ext .vue,.js src --fix"
 },

Copy the code

To check files in the SRC directory, run NPM run lintfix and NPM run lintfix are executed on the command line.

(2) Used with Git hook

Make sure that all code submitted to Git goes through ESLint, so that the entire team really has the same style. Consciousness alone is not reliable.

Husky and lint – staged
 npm install husky --save-dev
 npm install  lint-staged  --save-dev
Copy the code

Husky: Certain instructions lint-staged can be triggered before git commit execution: used in package.json only for certain processing of files in git Add staging

"husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -e"
    }
 },
 "lint-staged":{
    "src/**/*": ["eslint --fix", "git add"]
 }
Copy the code

Lint-staged execution can be automatically triggered before git commit. Lint-staged execution can specify esLint fixes and Git Adds for files in Git staging that you can specify yourself (if no problems have been detected after automatic fixes, You can add a commit directly, so you don’t need to add a commit yourself.

2, VScode automatic reminder

Install the eslint extension for vscodeThe extension will use the esLint library in the workspace first, or the global one if it doesn’t; So it will automatically check the local.eslintrc.js configuration.

By default, only the js files in the workspace are checked. If you want it to check other file types, you need to set it in vscode’s setting.json:

"eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
],
Copy the code

The number of errors detected in the js vue file is as follows:

3, vscode automatically eslint formatting when saving code

Setting. Json in vscode:

"eslint.autoFixOnSave": true,
Copy the code

After this parameter is configured, js files are automatically formatted according to the. Eslintrc.js rules of the workspace when they are saved. However, saving in.vue files does not allow ESLint formatting, and to automatically save esLint formatting on.vue you need to add the following configuration:

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

This way.js. vue files can be automatically saved for esLint formatting. There’s a pit!! Save automatic formatting may work in multiple scenarios, vscode has the ability to save formatting, in addition to installing Vetur may also have automatic formatting Settings, you need to remove these conflicting formatting Settings in VSCode Settings:

"eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", { "language": "vue", "autoFix": }, "javascriptreact", "vue"], // "editor.formatOnSave": true, // comment on vscode's built-in save formatting to avoid collisionsCopy the code

conclusion

This article covers the installation, configuration, and use of ESLint. You can use it manually on the command line, automatically before git commit, set automatic reminder in vscode, and automatically format your code according to eslint’s fix rules when saving it.

If this article is useful to you, please give the author a thumbs up and a comment