Eslint, prettier, tsLint, stylelint… And so on code specification stuff, also mention pre-commit by the way. As the name implies, pre-commit means doing things like checking code before we commit it to avoid committing non-conforming code to the repository. You can view some of the hooks provided by Git in the.git/hooks directory

You can see many xx.sample files, which are hook template files provided by Git. One of them is pre-commit, which we will talk about today. All we need to do is create hooks using these template files. Git automatically executes these hooks, such as pre-commit, before committing.

Here we provide two ways to generate Git hooks

pre-commit

First, install project dependencies

yarn add pre-commit -D
Copy the code

Then go to the.git/hooks directory and you’ll be surprised to see a pre-commit hook. /node_modules/pre-commit/hook? /node_modules/pre-commit/hook

Next we need to configure package.json to tell Node what to do at pre-commit time

{
  "scripts": {
    "eslint": "eslint src/*.js"    
  },
  "precommit": {
    "silent": true,
    "run": ["eslint"]
  },
}
Copy the code

Pre-commit parameter configuration refer to pre-commit.com

If you want to skip the pre-commit hook, add the –no-verify parameter

git commit -am "bypass" --no-verify
Copy the code

husky + lint-staged

Husky: tool that automatically generates Git hooks

Lint-staged: Check the contents of git staging

Since husky4.x and 5.x later versions are configured differently, we’ll separate them here

husky4.x

The first step is to install the dependencies, as we did with V4.3.8

Yarn add [email protected] lint-staged -dCopy the code

After installing ls.git /hooks, you will find that Husky generated all of the Git hooks for us

Second, configure husky in package.json

{" husky ": {" hooks" : {" pre - commit ":" echo \ "ha ha ha ha husky can use the \" && lint - staged "}}, "lint - staged" : {" *.} {js, ts ": "eslint --fix --quiet" } }Copy the code

Register what each hook does in git workflow

Third, submit code validation, the console prints “hahaha husky is ready to use” and ESLint checks the project code

husky5.x+

The first step is to install the highest version of Husky directly, which is 6.0.0 at the time of writing notes

yarn add husky lint-staged -D
Copy the code

And delete the package.json husky configuration. Second, enable Git hooks

npx husky install
Copy the code

The.husky directory is generated in the project root directory

Third, add Git hooks, which register the instructions that execute when Git hooks trigger

npx husky add .husky/pre-commit "npx lint-staged"
Copy the code

“NPX Lint-staged” configuration, as in package.json, is performed when git commit

Well, that’s it for husky versions. Compared to versions prior to 4.0, 5.0+ removes git hooks, which are no longer generated, and do not need to be configured in package.json!!

conclusion

  • The pre-commit is small in size, generates only one pre-commit hook, and is flexible to use
  • Husky (4.x and before) generates all git hooks, fully functional. 5. Versions later than x are different from earlier versions. For details, see the documents
  • If you only want to listen for the pre-commit during development, you are advised to use the pre-commit