使用husky7.0来规范Git提交

未分类 2年前 (2022) 程序员胖胖胖虎阿

334 0 0

大家好，我是前端小贺，希望能够通过自己的学习输出给你带来帮助。

背景

在一个完整的工作流中，Git提交规范是一定需要的。Git提交规范包括什么呢？

我觉得应该包括代码的质检以及commit message校验。

我们使用husky来添加我们上述的需求：

husky是利用Git hooks（下面有常见的Git hooks）在git的钩子函数中（比如pre-commit、commit-msg）做一些事情。下面是官方的介绍：

Modern native Git hooks made easy

声明：我们使用的husky的版本是7.0及之后的版本

安装husky

好了，打开项目的根目录，执行`npm install husky --save-dev,前提是生成了package.json

npm install husky --save-dev

我们按照官方的文档，进行husky install:

注意点：这里的npm的版本必须为7.1及之后的版本（https://github.com/npm/cli/re...）

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

添加eslint hook

我们来配置eslint校验

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

上述我们为什么能够配置npm run lint呢，是因为我们的package.json文件中的script中包含了lint:

{
    "scripts": {
    "lint": "vue-cli-service lint"
  }
}

ok，至此我们在commit的时候就会校验代码了，我们试一下：

git commit -m"验证"

> webpack-vue@2.1.0 lint
> vue-cli-service lint

 DONE  No lint errors found!

如上，我们提交的时候执行了lint脚本。

添加commit-msg hook

接下来，我们限制下commit messge规范。

我们需要采用npm社区中比较成熟的两个依赖包@commitlint/cli,@commitlint/config-conventional。

@commitlint/cli是用来在命令行中提示用户信息的
@commitlint/config-conventional是commit message规范

接下来我们安装下两个包，并添加相关的配置文件：

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

echo "module.exports = { extends: ['@commitlint/config-conventional'] }" > commitlint.config.js

ok，至此我们可以校验commit meassage中的内容了，我们测试一下：

git commit -m"1"

> webpack-vue@2.1.0 lint
> vue-cli-service lint --mode production

The following files have been auto-fixed:

  src/utils/secret.js

 DONE  All lint errors auto-fixed.
npm ERR! canceled

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/hsm/.npm/_logs/2022-04-26T02_21_07_564Z-debug.log
husky - commit-msg hook exited with code 1 (error)

如上，我们 commit message 随便写了点东西，就校验住了。我们修改下我们的commit message重新commit下：

git commit -m"docs: 添加husky相关"

> webpack-vue@2.1.0 lint
> vue-cli-service lint --mode production

 DONE  No lint errors found!
[committest b61be77] docs: 添加husky相关
 1 file changed, 2 insertions(+)

Ok，成功了~

提交规范

关于git commit message提交规范，我们可以参考阮一峰的Commit message 和 Change log 编写指南。

在VSCode中，我们采用了Conventional Commits插件来进行commit提交

Git hooks

pre-commit	`git commit`执行前	可以通过`git commit --no-verify`绕过
commit-msg	`git commit`执行前	可以用`git commit --no-verify`绕过
post-commit	`git commit`执行后	不影响`git commit`的结果
pre-merge-commit	`git merge`执行前	可以用`git merge --no-verify`绕过。
prepare-commit-msg	`git commit`执行后，编辑器打开之前
pre-rebase	`git rebase`执行前
post-checkout	`git checkout`或`git switch`执行后	如果不使用`--no-checkout`参数，则在`git clone`之后也会执行。
post-merge	`git commit`执行后	在执行`git pull`时也会被调用
pre-push	`git push`执行前