preface

Husky must be familiar to everyone. An indispensable tool for front-end engineering, it adds Git hooks to our project. Lint-staged versions can also be used to facilitate linting prior to code submission.

A commit- MSG check was recently added to an old project, along with an ESLint check before commit. I wrote a similar article about git commit specifications that you might have ignored.

The general process is to install dependencies first:

npm i husky -D
Copy the code

Then configure it in package.json:

{
  "husky": {
    "hooks": {
      "pre-commit": "npm run test".// Run the NPM run test command before committing
      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS" // Verify that the remarks added during commit comply with our requirements}}}Copy the code

I then tested the commit operation and, boy, the direct commit succeeded. Commit – MSG is not checked at all.

I feel suspicious, before is not so do 🤔

I can’t. Just check the files.

And then I saw this:Originally made in Husky (6.0.0)Breaking change. Look again at the version number installed in the project:"Husky" : "^ 7.0.1". No wonder it didn’t work,

I used version 1.0.1 to write git Commit specification articles that you may have overlooked. 😏

In that case, let’s take a look at why the author made this change:

Husky has dropped Conventional JS config. Husky has dropped conventional JS config. Here’s a quick summary.

Why did Husky abandon the traditional JS configuration

Before v4, husky worked like this: In order for the user to set any type of Git hooks, Husky had to create all types of Git hooks

The advantage of this is that no matter what type of Git hook the user sets up, Husky will ensure that it works. Husky adds all types of Git hooks to Git even if the user doesn’t set up any.

At the time husky had an idea: would it be possible for Husky to add only the Git hooks we needed? The author tried to solve this problem, but failed.

Husky needs to be configured in two places to complete git Hook functionality. One is the actual command to execute to configure git hooks in package.json, and the other is to configure the corresponding Git hooks in.git/hooks/. In other words, adding or removing Git hooks should be done synchronously. The author was unable to find a reliable way to synchronize the configuration of the two places and failed.

How does the new Husky work?

In 2016, Git 2.9 introduced core.hooksPath, which allows you to set the directory for the hooks script, and this introduction is the basis of the new husky improvements:

  • You can usehusky installwillgit hooksIs specified as.husky/
  • usehusky addThe command to.husky/addhook

This way we can add only the git hooks we need, and all the scripts are saved in one place (.husky/) so there are no synchronization problems.

Ok, now that you know this, I think you can probably understand why the author wants to do this destructive update. So let’s go ahead and configure our project according to the new HusKY configuration rules.

The new Husky practice

We can just follow the official documentation.

The installation

Install husky

npm install husky --save-dev
Copy the code

Enable Git hooks

npx husky install
Copy the code

If you want to enable hooks automatically after installation, you can do:

npm set-script prepare "husky install"
Copy the code

This will add a script to package.json:

// package.json
{
  "scripts": {
    "prepare": "husky install"}}Copy the code

Prepare is part of the NPM operation lifecycle. When install is executed, hooks are executed in lifecycle order: NPM7: preinstall -> install -> postinstall -> prepublish -> preprepare -> prepare -> postprepare

This generates the following structure in the code root directory:

Add the hook

We can use the husky add

[CMD] command to add a hook.

commit-msg

In the project, we will use the commit- MSG git hook to verify whether the remarks added during the commit conform to the specification. In the past we used to configure it like this:

{
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS" // Verify that the remarks added during commit comply with our requirements}}}Copy the code

In the new version of Husky, the $HUSKY_GIT_PARAMS variable is no longer used, but instead $1. So we need to do the following:

NPX husky add. husky/ commitlint –edit ‘NPX –no-install commitlint –edit “$1″‘

#! /bin/sh"$(dirname" $0 ") _ / husky. Sh "echo" = = = = = = = = = perform commit - check MSG = = = = = = = "NPX - no - install commitlint - edit $1Copy the code

Now if I executegit commitOperation, the following error occurs:Remind us of the lack ofcommitlint.config.jsFile, here first install dependencies:

npm install --save-dev @commitlint/cli @commitlint/config-conventional
Copy the code

Then create a new commitlint.config.js file in the root directory and add the following content:

module.exports = {
  extends: ["@commitlint/config-conventional"]};Copy the code

Execute at this pointcommitYou will find that it has already worked:

pre-commit

Before committing, we can perform test cases, ESLint validation, etc., and commit only if these pass. That’s what you need to do in the pre-commit hook.

NPX husky add. husky/pre-commit “NPM run test:unit” will generate a pre-commit shell file under.husky:

#! /bin/sh. "$(dirname "$0")/_/husky.sh" echo "========= Perform pre-commit operations (such as test cases and ESLint verification, which can be added by yourself) =======" NPM run test:unitCopy the code

Let’s do it againcommitOperation:

We have now added the commit- MSG and pre-commit hooks to our project based on the new husky.