husky+commitlint 检查提交描述是否符合规范要求
对于代码提交规范，我们通过使用husky来监测git hooks钩子
这里要用到的git hooks钩子: commit-msg：检测提交信息(可以用来检查commitmsg是否符合规范，不符合规范将不可被提交)
如果我们习惯用git commit命令，这个时候就需要强制检查提交信息是否符合规范;后面会介绍commitizen代替git commit
安装 commitlint cli 以及 conventional插件 以及husky
# 安装 commitlint cli 以及 conventional插件
pnpm install --save-dev @commitlint/config-conventional @commitlint/cli
# 安装 Husky
pnpm install husky --save-dev
配置commitlint.config.js
新建commitlint.config.js文件，并添加下面的内容：
/**
* 约定git提交规范
* types:[空格]message
* e.g. feat: 这是一个新的feature
*/
const types = [
'feat', // 新功能 feature
'fix', // 修复 bug
'docs', // 文档注释
'style', // 代码格式(不影响代码运行的变动)
'refactor', // 重构(既不增加新功能，也不是修复bug)
'perf', // 性能优化
'test', // 增加测试
'chore', // 构建过程或辅助工具的变动
'revert', // 回退
'build' // 打包
]
const commitTypeRules = [
2, 'always', types
]
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
"type-enum": commitTypeRules
}
};
激活husky, 添加commit-msg
使用下面的指令，在提交commit前，检查提交信息。
# 激活husky钩子 这一步会创建.husky文件
npx husky install
# 添加husky的commit-msg钩子，在提交前对提交信息进行检查
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
.husky目录如图
commit-msg文件内容如下
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx --no-install commitlint --edit $1
ps. 如果想要监听
pre-commit那么我们也可以 在commit-msg的同级目录下添加pre-commit文件,然后添加想要执行的命令,比如`npm run lint`来对代码eslint等等
测试提交
我们先将工作区改动暂存
git add .
然后提交
git commit -m "123123"
能够看到,系统警告我们的subject和type为空
Commit Message 参数
git 的 Commit Message 包含三部分：Header，Body 和 Footer。 其中 Header 是必需的，在绝大部分的项目开发中，我们的git提交信息只包含该部分。 Header 也包含三个部分：
type、scope、subject，其中 type 和 subject 是必需项。type代表提交信息的类型，上面配置文件里就主要规范了该类型。subject代表提交信息的说明描述内容。
我们按照commitlint.config.js规范提交信息
git add .
git commit -m "chore: 添加提交信息规范"
发现这样就可以提交成功了
总结
husky在git commit的时候去调用命令npx --no-install commitlint --edit $1,通过commitlint来验证commit信息是否符合commitlint.config.js文件中的规范,如果不符合规范那么不允许commit
用 commitizen 规范化提交代码
我们每次都需要手动输入commit信息很麻烦，并且容易造成不规范，我们可以使用commitizen来规范化提交代码(但是笔者认为这样有点繁琐)
安装commitizen
pnpm install commitizen --save-dev
安装cz-customizable
pnpm install cz-customizable --save-dev
添加脚本
"scripts": {
"commit": "cz"
},
"config": {
"commitizen": {
"path": "./node_modules/cz-customizable"
}
},
添加.cz-config.js文件
module.exports = {
// 可选类型
types: [
{ value: 'feat', name: 'feat: 新功能' },
{ value: 'fix', name: 'fix: 修复' },
{ value: 'docs', name: 'docs: 文档变更' },
{ value: 'style', name: 'style: 代码格式(不影响代码运行的变动)' },
{ value: 'refactor', name: 'refactor: 重构(既不是增加feature，也不是修复bug)'},
{ value: 'perf', name: 'perf: 性能优化' },
{ value: 'test', name: 'test: 增加测试' },
{ value: 'chore', name: 'chore: 构建过程或辅助工具的变动' },
{ value: 'revert', name: 'revert: 回退' },
{ value: 'build', name: 'build: 打包' }
],
// 消息步骤
messages: {
type: '请选择提交类型:',
customScope: '请输入修改范围(可选):',
subject: '请简要描述提交(必填):',
body: '请输入详细描述(可选):',
footer: '请输入要关闭的issue(可选):',
confirmCommit: '确认使用以上信息提交？(y/n/e/h)'
},
// 跳过问题
skipQuestions: ['body', 'footer'],
// subject文字长度默认是72
subjectLimit: 72
}
测试一下
git add .
pnpm run commit
一步一步就ok了
release-it生成版本变更日志
安装release-it
pnpm install -D release-it
为了兼容当前的提交信息格式，还需要执行下面的指令安装一个插件
pnpm install @release-it/conventional-changelog --save-dev
在.release-it.json中加入如下配置.更多配置
{
"github": {
"release": true
},
"git": {
// 生成tag的提交信息,
//注意要在`.commitlint.config.js`中添加`'release', // 发布版本`
"commitMessage": "release: v${version}"
},
"npm": {
"publish": true
},
"hooks": {
"after:bump": "echo 更新版本成功"
},
}
还需要安装一个插件
npm install @release-it/conventional-changelog --save-dev
然后添加如下配置
"plugins": {
"@release-it/conventional-changelog": {
"preset": "angular",
"infile": "CHANGELOG.md",
"ignoreRecommendedBump": true,
"strictSemVer": true
}
}
默认配置下，只会有feat和fix的提交会在changelog中显示出来。
定制化changelog
如果想要定制化changelog中显示多种类型的提交,可以参考.注意下面演示没有使用定制化的changelog,想要去看效果可以自己去试试
"plugins": {
"@release-it/conventional-changelog": {
"infile": "CHANGELOG.md",
"ignoreRecommendedBump": true,
"strictSemVer": true,
"preset": {
"name": "conventionalcommits",
"types": [
{
"type": "feat",
"section": "✨新功能"
},
{
"type": "fix",
"section": "🐛问题修复"
},
{
"type": "docs",
"section": "📚文档"
},
{
"type": "chore",
"section": "🔧配置文件"
},
{
"type": "style",
"section": "💄修改样式"
},
{
"type": "release",
"hidden": "true"
}
]
}
}
}
把自己工作区的代码都提交完 然后测试一下
npm run release
选择版本 这里选择patch 这里几个选项的具体的意思可以百度一下
Publish vite-project-2 to npm (是否发包到npm) 这里选择no 如果开发的是一些库,可以选择发包到npm上
可以看到changelog文件已经生成,并且提交到git仓库中了,配置文件中设置的"commitMessage": "release: v${version}"也生效了
我们再在项目根目录下去创建一个1.js文件,然后提交到远端,同样输入npm run release 可以看到changelog文件变了,然后commit记录多了一个release:v0.02
demo仓库
参考文章
格式化
changelog
快速搭建标准化编程规范
cz-customizable
最后
本文章为笔者学习总结记录用，后续可能会更新
