使用 husky 进行提交前的代码规范校验 husky+lint-staged+commitizen+commitlint
husky 是一个 Git Hook 工具,借助 husky 我们可以在 git 提交的不同生命周期进行一些自动化操作。本文主要介绍提交前 eslint 校验和提交时 commit 信息的规范校验。
husky官网
1.安装
npm i -D husky lint-staged commitizen @commitlint/config-conventional @commitlint/cli
husky初始化
初始化后你的跟目录会出现一个.husky的文件夹npx husky install
2.1维护lint-staged脚本 package.json"lint-staged": { "src/**/*.{js,vue}": [ "eslint --fix" ] },
此时你可以手动执行如下命令就可以检测暂存区的规范了
npx lint-staged
既可以看到报错信息
2.2 commitizen初始化
安装解适配器,cz-conventional-changelog是一个commitizen的适配器,适配器的作用是按照某个指定的规范帮助我们生成commit message,cz-conventional-changelog预设的是Angular团队的规范。
npx commitizen init cz-conventional-changelog --save-dev --save-exact
安装完成后,会在package.json自动添加如下内容,下面的path就是适配器的路径
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
此后执行npx cz,就相当于执行git commit,不过npx cz会以命令行的方式让我们填写commit的信息,如下图所示,以交互的形式
2.3 commitlint初始化
根目录下创建commitlint.config.js
module.exports = {
ignores: [commit => commit.includes('init')],
extends: ['@commitlint/config-conventional'],
rules: {
'body-leading-blank': [2, 'always'], //body换行
'footer-leading-blank': [1, 'always'], // footer以空行开头
'header-max-length': [2, 'always', 108], // header最长108
'subject-empty': [2, 'never'], // subject不能为空 内容不为空 subject may not be empty ,type后必须英文冒号加空格例如 feat: 新增用户列表
'type-empty': [2, 'never'], // never: type不能为空; always: type必须为空
'type-enum': [
2,
'always',
[
'feat', //新功能
'fix', //修补bug
'perf', // 优化相关,比如提升性能、体验
'style', // 代码格式修改, 注意不是 css 修改
'docs', //文档修改
'test', // 测试用例修改
'refactor', // 重构
'build', // 编译相关的修改,例如发布版本、对项目构建或者依赖的改动
'ci', // 持续集成修改
'chore', // 其他改动
'revert' // 代码回滚
]
]
}
};
3.添加钩子到husky
上面我们做好所有工具的初始化工作,都能单独的完成它们自己的功能,现在我们需要添加钩子到husky,让他们关联起来;
3.1添加pre-commit钩子(commit之前触发)
npx husky add .husky/pre-commit
执行上面的命令后会自动在.husky中增加pre-commit文件,然后我们将npx lint-staged增加到这个文件里面去,这样我们在commit之前就会执行npx lint-staged命令,这样husky和lint-staged就关联起来了
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged
3.2 添加commit-msg钩子
npx husky add .husky/commit-msg
执行上面的命令后会自动在.husky中增加commit-msg文件,然后我们将npx --no-install commitlint --edit "$1"增加到这个文件里面去
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx --no-install commitlint --edit "$1"
此时如果我们还像之前那样随意填写内容的话,则会报如下错误
值得注意的是pre-commit在commit-msg之前,如果pre-commit里面执行的npx lint-staged命令检测不通过的话,那么就不会进到commit-msg的钩子了
husky版本
"husky": "^8.0.3",
"lint-staged": "^11.2.6",