Why Husky abandoned the traditional JS configuration

Preface

husky must be familiar to everyone. As an indispensable tool in front-end engineering, it can add git hooks to our project. At the same time, with lint-staged you can easily perform lint before code submission.

commit-msg must be added to an old project, and a check of commit before eslint . I also wrote a similar article you may have overlooked in the git commit specification , so let’s get started.

The general process is to install dependencies first:

npm i husky -D

Then configure package.json

{
  "husky": {
    "hooks": {
      "pre-commit": "npm run test", // 在commit之前先执行npm run test命令
      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS" // 校验commit时添加的备注信息是否符合我们要求的规范
    }
  }
}

Then I tested the commit operation, good guy, directly commit succeeded. There is no verification commit-msg

I'm wondering, didn't it all happen like this before 🤔

No way, go check the documentation.

Then I saw this:

In the original husky (6.0.0) version made Breaking change . Look at the version number installed in the project: "husky": "^7.0.1" . No wonder it doesn't take effect anymore,

When writing you may have overlooked, the article of the git commit specification was still 1.0.1 . 😏

In this case, let's first take a look at why the author made such a change:

This is an article written by the author Why husky has dropped conventional JS config , which is Why husky abandoned the traditional JS configuration. Here is a brief summary.

Why Husky abandoned the traditional JS configuration

Before the v4 version, husky worked like this: In order to allow users 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 and husky are set by the user, the normal operation can be ensured. But the disadvantages are also obvious, even if the user does not set any git hook , husky also to git added all types of git hook .

At that time, husky had such an idea: Is it possible for husky to add only the git hook we need? The author tried to solve this problem, but failed.

Because husky needs to be configured in two places to complete a complete git hook function. One is to configure the real command to be executed by package.json git hook , and the other is to configure the corresponding .git/hooks/ git hook . That is to say, whether to add or delete git hook it is necessary to ensure that the corresponding operations are performed synchronously in these two places. The author could not find a reliable way to synchronize the configuration of these two places, so it failed.

What is the working principle of the new version of husky?

Until 2016, Git 2.9 introduced core.hooksPath , which can set Git hooks script. This introduction is the basis for the improvement of the husky

• You can use husky install to git hooks the directory of .husky/
• Use husky add command to .husky/ added in hook

In this way, we can only add the git hook we need, and all scripts are stored in one place (.husky/ directory), so there is no problem of synchronizing files.

Ok, after knowing so much, I think you probably understand why the author is doing such a destructive update. husky to configure our project in accordance with the configuration rules of the new version 0614adb8ab28d4.

New version of husky practice

We can directly follow the guidelines of the official document.

Install

Install husky

npm install husky --save-dev

Enable Git hooks

npx husky install

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

npm set-script prepare "husky install"

This will add a script to package.json

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

prepare is a NPM operation life cycle of install . When 0614adb8ab2a94 is executed, the corresponding hooks will be executed in the order of the life cycle:
NPM7： preinstall -> install -> postinstall -> prepublish -> preprepare -> prepare -> postprepare

This will generate the following structure in the code root directory:


Add hook

We can use the husky add <file> [cmd] instruction to add a hook .

commit-msg

In the project, we will use commit-msg git hook to verify commit conform to the specification. In the past, we usually configured it like this:

{
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS" // 校验commit时添加的备注信息是否符合我们要求的规范
    }
  }
}

In the new version husky in $HUSKY_GIT_PARAMS This variable is no longer used, replaced by $1 . So we need to do the following:

Execution npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"' will .husky generate a lower commit-msg of shell file:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
echo "========= 执行commit-msg校验 ======="
npx --no-install commitlint --edit $1

At this time, if the git commit operation is executed, the following error will be reported:

It reminds us that we are missing the commitlint.config.js file, here is the first install dependency:

npm install --save-dev @commitlint/cli @commitlint/config-conventional

commitlint.config.js file 0614adb8ab2c86 in the root directory and add the following content:

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

Then execute commit will find that it has taken effect:


pre-commit

Before commit , we can execute test cases, eslint verification, etc. Only when these pass, we can submit. This is what needs to be done in the hook pre-commit

Execution npx husky add .husky/pre-commit "npm run test:unit" will be in .husky generate the next pre-commit shell file:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

echo "========= 执行pre-commit操作（如执行测试用例、eslint校验等，可自行添加） ======="
npm run test:unit

Let's do the commit operation again:


So far, based on the new version husky pre-commit two hooks commit-msg and 0614adb8ab2da7 in the project.