Husky - 你一定需要的Git Hook 工具

Husky - 你一定需要的Git Hook 工具

前言

在团队开发协作中，Git作为不可或缺的利器，想必每个开发人员都已经对它的基本运用驾轻就熟了。然而，在实际的团队协作开发中，你是否曾经遇到过这样的问题：当你在本地执行拉取（pull）操作，获取到团队成员的代码时，却发现他们的代码并未经过格式化，或者存在一些语法错误，甚至遗漏了某个文件的提交。而此时，那位同事却恰好处于休假状态。你只能先着手解决这些报错问题，才能顺利地在本地运行代码。而如果你也修改了那些未经格式化的代码，并在推送（push）之后，同事休假回来，他们对代码进行了格式化处理，并添加了新的功能，当他们提交时，就会产生大量的冲突，而再去解决这些不必要的冲突，又需要消耗你大量的精力。所以规范git提交操作，在git提交时进行eslint静态代码检查，以及格式化代码，这是必要的。

安装husky

Git Husky 是一个 Git Hook 工具，它为 Git 客户端增加了钩子（hooks）功能，使得在特定阶段执行一系列流程，以保证每一个 commit 的正确性。Git Hook允许开发者在特定事件（如 commit、push）发生时触发自定义脚本。帮助开发者在代码审查、自动化测试等方面提高工作效率。

使用husky-init用于快速初始化husky项目。

npx husky-init && npm install
1

执行完这个命令，将自动化完成一些操作
1、它将prepare脚本添加到package.json
2、在项目根目录自动创建.husky文件夹，包含可编辑的pre-commit钩子

安装lint-staged

lint-staged可以在git staged阶段的文件上执行代码检查（Linters），包括ESLint和Stylelint等。简单说就是，当开发者运行ESlint或Stylelint命令时，可以通过设置指定只检查通过git add添加到暂存区的文件，避免每次检查都把整个项目的代码都检查一遍，从而提高效率。

1、执行此命令来安装lint-staged，执行后.husky/_文件夹下将自动生成husky.sh 脚本

npm i -D lint-staged
1

2、在package.json 中添加scripts

"pre-commit": "lint-staged"
1

3、新建 .lintstagedrc配置文件并添加以下命令

提交时执行prettier代码格式化，eslint检查修复

{
  "src/**/*.{ts,vue}": [
    "prettier --write",
    "eslint --fix"
  ]
}
1
2
3
4
5
6

4、修改.husky/pre-commit文件，使提交时能执行lint-staged钩子

npm run pre-commit
1

commit-msg

commitlint检查提交消息是否符合常规提交格式，用于在每次提交时生成符合规范的commit消息。

1、安装commit-msg

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

2、在项目根目录下添加commitlint.config.js配置文件，配置文件详细说明如下：

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [ // type枚举
        2, 'always',
        [
          'build', // 编译相关的修改，例如发布版本、对项目构建或者依赖的改动
          'feat', // 新功能
          'fix', // 修补bug
          'docs', // 文档修改
          'style', // 代码格式修改, 注意不是 css 修改
          'refactor', // 重构
          'perf', // 优化相关，比如提升性能、体验
          'test', // 测试用例修改
          'revert', // 代码回滚
          'ci', // 持续集成修改
          'config', // 配置修改
          'chore', // 其他改动
        ],
    ],
    'type-empty': [2, 'never'], // never: type不能为空; always: type必须为空
    'type-case': [0, 'always', 'lower-case'], // type必须小写，upper-case大写，camel-case小驼峰，kebab-case短横线，pascal-case大驼峰，等等
    'scope-empty': [0],
    'scope-case': [0],
    'subject-empty': [2, 'never'], // subject不能为空
    'subject-case': [0],
    'subject-full-stop': [0, 'never', '.'], // subject以.为结束标记
    'header-max-length': [2, 'always', 72], // header最长72
    'body-leading-blank': [0], // body换行
    'footer-leading-blank': [0, 'always'], // footer以空行开头
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

3、执行以下命令添加commitlint钩子

npx husky add .husky/commit-msg "npm run commitlint"
1

4、在package.json script中增加

"commitlint": "commitlint --config commitlint.config.js -e -V"
1

注意

按上面步骤修改完，我们在提交代码时候，如果随便写一个提交message将会报错，不允许提交，如下所示：

> commitlint --config commitlint.config.js -e -V

⧗   input: 测试
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]

✖   found 2 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

husky - commit-msg hook exited with code 1 (error)

1
2
3
4
5
6
7
8
9
10
11

如果我们修改提交语句，则能正确提交

git commit -m 'fix: 测试'
1

总结

在配置完成以上git hooks后，可以看到提交的代码都是被格式化，而且经过eslint检查，干净没有格式问题的代码，统一了团队代码格式规范。增加了整体代码质量，因此，觉得有用的小伙伴们快去给自己的项目中加上试试吧。