Why did husky abandon the traditional JS configuration

Time:2021-11-27

preface

huskyEveryone must be familiar. As an indispensable tool in front-end engineering, it can be added to our projectgit hooks。 Simultaneous coordinationlint-stagedIt can be easily done before code submissionlint

An old project will be added recentlycommit-msgCheck, and at the same timecommitBeforeeslintCheck. I wrote a similar article beforeGit commit specification that you may have ignored, just get started.

The general process is to install dependencies first:

npm i husky -D

Then inpackage.jsonto configure:

{
  "husky": {
    "hooks": {
      "Pre commit": "NPM run test"
      "Commit MSG": "commitlint - E $husky_git_params" // verify whether the comments added during commit meet the specifications we require
    }
  }
}

Then I tested itcommitOperation, good guy, directcommitsucceed. Not at allcommit-msgCheck.

I wonder, isn’t that what happened before

No way. Go check the documents.

Then I saw this:
Why did husky abandon the traditional JS configuration
It was originally done in husky (6.0.0)Breaking change。 Look at the version number installed in the project:"husky": "^7.0.1"。 No wonder it doesn’t work,,

Before writingGit commit specification that you may have ignoredWhen the article is written, it is still used1.0.1Version of.

In that case, let’s first look at why the author made such a change:
Why did husky abandon the traditional JS configuration

This is an article written by the authorWhy husky has dropped conventional JS config, that isWhy did husky abandon the traditional JS configuration。 Here is a brief summary.

Why did husky abandon the traditional JS configuration

stayv4Before versionhuskyIt works like this: in order to enable users to set any type ofgit hookshuskyYou have to create all types ofgit hooks

The advantage of this is that no matter what type of user settingsgit hookhuskyCan ensure its normal operation. But the disadvantages are obvious, even if the user does not set anygit hookhuskyAlso togitAll types of have been added togit hook

at that timehuskyThere is such an assumption: is it possible to makehuskyJust add what we needgit hookAnd? The author tried to solve this problem, but failed.

becausehuskyYou need to configure in two places to complete a completegit hookFunction. One is inpackage.jsonMedium configurationgit hookOne of the real commands to be executed is.git/hooks/Corresponding to the configuration ingit hook。 That is, whether it is added or deletedgit hookIt 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 he failed.

How does the new version of husky work?

Until 2016,Git 2.9Introducedcore.hooksPath, you can setGit hooksScript directory, this introduction is the new versionhuskyBasis for improvement:

  • have access tohusky installtakegit hooksThe specified directory is.husky/
  • usehusky addCommand to.husky/Add inhook

In this way, we can only add what we needgit hookAnd all scripts are saved 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 wants to do this destructive update. So let’s follow the new version abovehuskyConfigure our project according to the configuration rules of.

New husky practice

We can directly follow the guidelines of official documents.

install

Install husky

npm install husky --save-dev

Enable Git hooks

npx husky install

If you want to enable it automatically after installationhooks, you can perform:

npm set-script prepare "husky install"

This will be inpackage.jsonAdd a script:

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

prepareyesNPMA link in the operation life cycle, during executioninstallThe corresponding hooks will be executed according to the life cycle sequence:
NPM7: preinstall -> install -> postinstall -> prepublish -> preprepare -> prepare -> postprepare

The following structure will be generated in the code root directory:
Why did husky abandon the traditional JS configuration

Add hook

We can usehusky add <file> [cmd]Command to add ahook

commit-msg

We will use it in the projectcommit-msgthisgit hookTo verify uscommitWhether the remark information added during is in compliance with the specification. In the past, we usually configured it like this:

{
  "husky": {
    "hooks": {
      "Commit MSG": "commitlint - E $husky_git_params" // verify whether the comments added during commit meet the specifications we require
    }
  }
}

In the new versionhuskyin$HUSKY_GIT_PARAMSThis variable is no longer used, but instead$1。 So we should do the following:

implementnpx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'Will be.huskyNext generationcommit-msgofshellFile:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
Echo "============ execute commit MSG verification =========
npx --no-install commitlint --edit $1

At this point, if you executegit commitDuring operation, the following errors will be reported:
Why did husky abandon the traditional JS configuration
Hint that we are missingcommitlint.config.jsFile, install the dependency here first:

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

Then create a new one in the root directorycommitlint.config.jsFile and add the following:

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

Execute again at this timecommitYou will find that it has taken effect:
Why did husky abandon the traditional JS configuration

pre-commit

staycommitBefore, we can execute test cases, eslint verification, etc. only after these pass can we submit them. This is wherepre-commitWhat needs to be done in this hook.

implementnpx husky add .husky/pre-commit "npm run test:unit"Will be.huskyNext generationpre-commitShell file for:

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

Echo "================================================
npm run test:unit

Let’s do it againcommitOperation:
Why did husky abandon the traditional JS configuration

So far, we are based on the new versionhusky, completed the projectcommit-msgpre-commitAddition of two hooks.