Git 项目中使用 husky

husky

Modern native Git hooks made easy

安装

当前版本是 6.0.0

## npm
npm install husky --save-dev

## yarn
yarn add husky --dev

添加 NPM scripts 命令

npm set-script prepare "husky install"
npm run prepare

这一步会在项目根目录生成一个 .husky 文件夹，以后所有 husky 相关任务都在这个文件夹内。团队内其他人只要安装依赖也自动执行这个命令。

所有的任务都是针对 git add 的文件进行操作。

代码检测/格式化

安装 lint-staged

## npm
npm install lint-staged --save-dev

## yarn
yarn add lint-staged --dev

在 package.json 添加 lint-staged 字段，该字段是一个对象格式的配置。

{
    "lint-staged": {
    "*.{yml,yaml,md}": [
      "prettier --write",
      "git add"
    ],
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
  }
}

第一个规则/配置，针对 .yml、.yaml、.md 后缀文件使用 prettier 格式化，如果文件改动了并添加到 Git 待提交文件队列。

第二个规则/配置，针对 .js、.jsx、.ts、.tsx 后缀文件使用 eslint 进行代码检测在格式化等操作。

添加一个 NPM scripts 命令。

{
    "scripts": {
        "lint-staged": "lint-staged --allow-empty"
    }
}

--allow-empty 可以解决当没有变更的时候 git add 抛错。

控制台运行命令。

npx husky add .husky/pre-commit "npm run lint-staged"

生成文件 .husky/pre-commit，在 Git 提交前执行的任务

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

npm run lint-staged

Git commit message 检测

安装 commitlint 相关依赖

## npm
npm install @commitlint/{cli,config-conventional} --save-dev

## yarn
yarn add @commitlint/{cli,config-conventional} --dev

@commitlint/config-conventional 是 commit message 规则，详情请查看 npm 主页。

例子：

echo "foo: some message" # fails
echo "fix: some message" # passes

在项目根目录添加 commitlint.config.js 文件。

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

控制台运行命令。

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

生成文件 .husky/commit-msg，在 Git 提交时检测 commit message 的任务。

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

npx --no-install commitlint --edit $1

每当提交 Git commit 的时候就会起作用。

转载请注明：OnlyLing - Web 前端开发者 » Git 项目中使用 husky