The paper

In a multi-person project, everyone’s code style is inconsistent. And in the process of development, there will be some minor problems. In this case, esLint is needed to help us avoid the above problems.

Project configuration for THE VUE-CLI 2.0 build, you can start by reading this article to learn about the configuration of ESLint. But the above configuration was compiled based on the WebPack runtime, using eslint-Loader. Eslint will be checked every time you save code, which can be time-consuming.

To solve the above problem, we will run ESLint every time code commits to Git. Code that does not conform to the ESLint specification will not be submitted. This would be the perfect solution to the problem mentioned above.

What’s a husky?

Husky can be configured via ESLint to prevent non-standard code from being submitted to git services. Husky can use git – based hooks

The usedgitAll of you know thatgitThere are a lot of commandscommit,push,rebaseAnd so on. So these orders are mostly being carried out.gitWhat’s in the folder, sogitThe hook directory is in.gitThe folderhooksBelow, as follows:The above arepre-commit, it is ingit commitThere are things you can do before (e.geslintCheck).

Installation & Configuration

npm install --save-dev husky

The elist configuration refers to the eslint configuration of the project built in VUe-CLI 2.0. Remove the eslint-loader configuration in webpack.config.js

And do the following configuration in package.json:

"scripts": {
	"lint": "eslint src --fix --ext .js,.vue"
 },
 "husky": {
    "hooks": {
      "pre-commit": "npm run lint"."pre-push": "npm run lint"}}Copy the code

Git commit -m ‘XXX’ will run NPM run lint to verify that esLint rules conform to the code specification. Once the specification is met, a COMMIT is made. If the requirements are not met, the execution is interrupted and the COMMIT is not performed.

This allows esLint rules to be checked every time the code is submitted, as much as possible to ensure that the code goes live without problems.

If this is a new project, the above will satisfy the requirements, but if the project is an old project, someone else has been developing for a long time, then add and add the ESLint rule, and check globally, you will find a bunch of error messages. This one is panicking. Modifications may cause additional problems.

To solve this problem, lint-staged episodes need to be introduced

lint-staged

Lint-staged validations of ESLint code specifications are performed only on code from git Add cages. This avoids the problem of global verification. You modify the above code, you commit whatever code, the rest of the code is not esLint checked.

Installation & Configuration

npm install --save-dev lint-staged

Add it in package.json

"lint-staged": {
   "src/**/*.{js,vue}": [
     "npm run lint"]},Copy the code

SRC /**/*.{js,vue} according to their own item directory to modify.

conclusion

The above configuration has met the requirements of the project. The overall changes of package.json are as follows:

"scripts": {
	"lint": "eslint src --fix --ext .js,.vue"
 },
 "husky": {
    "hooks": {
      "pre-commit": "npm run lint"."pre-push": "npm run lint"}},"lint-staged": {
   "src/**/*.{js,vue}": [
     "npm run lint"]},Copy the code

The following dependency packages need to be installed:

"husky": "^ 4.3.0"."eslint": "^ 7.10.0"."eslint-plugin-import": "^ 2.22.1"."eslint-plugin-vue": "^ 6.2.2." "."lint-staged": "^ 10.4.0".Copy the code