使用 husky 进行提交前的代码规范校验和 commit 信息检查
husky 是一个 Git Hook 工具,借助 husky 我们可以在 git 提交的不同生命周期进行一些自动化操作。本文主要介绍提交前 eslint 校验和提交时 commit 信息的规范校验。
一、使用新版 husky (v6.x)进行配置
提交前 eslint 校验配置流程
- 安装插件
npm i -D husky lint-staged
注意:推荐使用 npm 安装 eslint 和 husky,因为在 windows 操作系统下, 用 yarn 安装依赖,不会触发 husky pre-commit 钩子命令。
lint-staged: 用于实现每次提交只检查本次提交所修改的文件。
- 在 package.json 添加 scripts
{
"prepare": "husky install",
"lint": "eslint src",
"lint-staged": "lint-staged"
} - 执行 npm run prepare 来启动 husky
- 添加 pre-commit 钩子
npx husky add .husky/pre-commit "npm run lint-staged"
执行完根目录会自动生成一个 .husky/pre-commit 脚本。
创建 .lintstagedrc 配置文件
{ "src/**/*.{js,vue}": "npm run lint" }
到这里,代码提交前的 eslint 校验已经配置好了。当然,提前是你已经配置好 Eslint 了。
提交时 commit 信息规范校验配置流程
commitlint
- 安装插件
npm i -D @commitlint/cli @commitlint/config-conventional
- 在 package.json 添加 scripts
{
"commitlint": "commitlint --config commitlint.config.js -e -V"
} - 添加 commit-msg 钩子
npx husky add .husky/commit-msg "npm run commitlint"
创建 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以空行开头
}
}
二、commitlint 提交信息规范
提交信息规范
提交信息语法:
type(scope?): subject 换行 body 换行 footer
示例:
chore: run tests on travis ci
feat(blog): add comment section
commitlint rule 语法
rule 语法:规则名称: [级别, 适用, 值]
级别:可选0,1,2。0禁用规则,1警告,2报错。
适用:可选 always, never。
三、旧版 husky 配置流程(v4.x)
安装(同上)
创建 .huskyrc
{
"hooks": {
// 提交commit时触发
"pre-commit": "lint-staged",
// 检测commit的message时触发
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
}
创建 .lintstagedrc(同上)
设置 fix 可以自动修复错误:
{
"src/**/*.js": ["eslint --fix", "git add"]
}
或者使用下面的配置,自动格式化代码(谨慎使用):
{
"src/**/*.js": ["prettier --write", "git add"]
}
创建 commitlint.config.js(同上)
三、配置不拆分成多个文件的话也可以全部写在 package.json 里面
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.js": "prettier --write --ignore-unknown"
}
}