背景
最近新起了一个后台项目,还要迁移旧的项目代码,练手之余各种踩坑,临近上线才想起来添加commit提交代码前格式化检查代码并规范提交信息。
在团队多人开发中,规范的commit message可以快速定位代码提交历史,回溯问题根源,方便组内多人协作,提高团队效率。
由于我的项目采用的是 husky + commitlint 配置,接下来围绕这两个简要介绍下我的踩坑史。
注: husky 6.0.0 版本发生了破坏性变更,下述方案使用的是 7.0.1 版本husky,对于低于 6.0.0 版本不适用,低于7.0.1 版本husky也可能存在问题。
husky 安装
参考 husky 的README:GitHub husky 小白如果看着有疑问可以跟着我的步骤来:
1、项目内安装
npm i lint-staged husky -save-dev
2、创建.husky/目录并指定该目录为git hooks所在的目录
在package.json中添加prepare脚本
{
"scripts": {
"prepare": "husky install"
}
}
prepare脚本会在执行npm install之后自动执行。也就是说当我们执行npm install安装完项目依赖后会执行 husky install命令。
或者采用命令行方式:
注: 需要npm版本Version 7.x(npm set-script命令需要7.x)
npm set-script prepare "husky install" && npm run prepare
3、添加git hooks
创建一条 pre-commit hook
npx husky add .husky/pre-commit "npm run lint"
执行该命令后,会看到.husky/目录下新增了一个名为pre-commit的shell脚本。
这样,在之后执行git commit命令时会先触发pre-commit这个脚本。
pre-commit脚本内容如下:
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npm run lint
注意:npm run lint
命令根据你自己项目中script脚本而定,eslint --ext .js,.vue src
在lint脚本中
4、规范commit message信息
类似的,我们也可以添加commit-msg钩子,来规范我们的commit message信息
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
husky 使用
随便commit一下
git commit -m "feat: pre-commit优化"
创建了 pre-commit hook之后,在每次执行 git commit 或者 git commit --amend时,都会先触发pre-commit hook,来执行npm run lint中包含的 eslint 等代码检测工作。
理论上,这样就可以有效避免将存在 eslint error 的代码提交到远程仓库了~~~
但是点击执行后却报错了:
> eslint --ext .js,.vue src
not found: commitlint
husky - commit-msg hook exited with code 127 (error)
commitlint 安装与配置
错误提示我们需要安装安装 commitlint。
npm i @commitlint/cli @commitlint/config-conventional -D
接下来继续commit结果又报错了....害!
> eslint --ext .js,.vue src
⧗ input: feat: pre-commit优化
✖ Please add rules to your `commitlint.config.js`
- Getting started guide: https://git.io/fhHij
- Example config: https://git.io/fhHip [empty-rules]
✖ found 1 problems, 0 warnings
ⓘ Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint
husky - commit-msg hook exited with code 1 (error)
提示可知要配置 commitlint.config.js
于是
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js
ok!~~~大功告成!