Git commit校验工具commitlint的配置与使用

前端环境要求

node： 16.x
npm： 8.x

Tip：npm版本须大于等于 7.24.2，过低的话可能会导致下面有的命令无法使用，需要手动在 package.json 中自行设置。

工具

husky

操作 git 钩子的工具

commitlint

commit 信息校验工具

commitizen

commit自动化提示工具，简称cz

cz-customizable

可自定义的cz适配器

commitlint-config-git-commit-emoji

emoji插件

安装

安装husky工具

安装 husky插件

npm i husky -D
1

在package.json中添加脚本

npm set-script prepare "husky install" 
1

根目录创建.husky文件夹,将 git hooks 钩子交由husky执行

npm run prepare 
1

添加 commit-msg 钩子,执行信息校验

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
1

安装commitlint

安装 commit 校验工具

npm i commitlint @commitlint/config-conventional -D
1

• @commitlint/config-conventional 这是一个规范配置,标识采用什么规范来执行消息校验, 这个默认是Angular的提交规范

创建 commitlint.config.js 配置文件

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

安装commitizen

安装自动化提示工具

npm i commitizen cz-conventional-changelog -D
1

package.json 中添加 commit 指令, 执行 git-cz 指令

npm set-script commit "git-cz" 
1

初始化命令行的选项信息

npx commitizen init cz-conventional-changelog --save-dev --save-exact
1

就可以在命令行中选择需要提交的git commit type了。

安装可自定义的cz适配器

因为commitizen只支持英文，如果我想要支持中文指令和emoji，那么就必须安装可自定义的cz适配器了

安装cz适配器

npm i -D commitlint-config-cz  cz-customizable
1

在根目录创建 .cz-config.js文件

echo > .cz-config.js
1

将以下配置内容复制到.cz-config.js文件中

module.exports = {
  types: [
    {
      value: ':sparkles: feat',
      name: '✨ feat:     新功能'
    },
    {
      value: ':bug: fix',
      name: '🐛 fix:      修复bug'
    },
    {
      value: ':package: build',
      name: '📦️ build:    打包'
    },
    {
      value: ':zap: perf',
      name: '⚡️ perf:     性能优化'
    },
    {
      value: ':tada: release',
      name: '🎉 release:  发布正式版'
    },
    {
      value: ':lipstick: style',
      name: '💄 style:    代码的样式美化'
    },
    {
      value: ':recycle: refactor',
      name: '♻️  refactor: 重构'
    },
    {
      value: ':pencil2: docs',
      name: '✏️  docs:     文档变更'
    },
    {
      value: ':white_check_mark: test',
      name: '✅ test:     测试'
    },
    {
      value: ':rewind: revert',
      name: '⏪️ revert:   回退'
    },
    {
      value: ':rocket: chore',
      name: '🚀 chore:    构建/工程依赖/工具'
    },
    {
      value: ':construction_worker: ci',
      name: '👷 ci:       CI related changes'
    }
  ],
  messages: {
    type: '请选择提交类型(必填)',
    customScope: '请输入文件修改范围(可选)',
    subject: '请简要描述提交(必填)',
    body: '请输入详细描述(可选)',
    breaking: '列出任何BREAKING CHANGES(可选)',
    footer: '请输入要关闭的issue(可选)',
    confirmCommit: '确定提交此说明吗？'
  },
  allowCustomScopes: true,
  // 跳过问题
  skipQuestions: ['body', 'footer'],
  subjectLimit: 72
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

将cz-customizable脚本添加到您的 package.json

npm set-script commit "git add . && cz-customizable"
1

安装git-commit-emoji

安装emoji插件

npm i -D  commitlint-config-git-commit-emoji 
1

更新 commitlint.config.js

移除extends中原来的 @commitlint/config-conventional，加入'git-commit-emoji', 'cz'

module.exports = {
  extends: ['git-commit-emoji', 'cz']
}
1
2
3

含emoji的自动化提示选项列表

使用 npm run commit 代替 git commit
在命令行中输入 npm run commit ，即可通过键盘上下键选择需要要的commit type了。

其他

1. 根据 commit message 自动生成 changelog

安装conventional-changelog

npm install conventional-changelog conventional-changelog-cli --save-dev
1

将changelog脚本添加到您的 package.json

npm set-script changelog "conventional-changelog -p cz-config.js -i CHANGELOG.md -s -r 0"
1

添加成功：

{
  "scripts": {
     "changelog": "conventional-changelog -p cz-config.js -i CHANGELOG.md -s -r 0"
  }
}
1
2
3
4
5

-p 指定风格*
-i CHANGELOG.md 指定输出的文件名称
-s 输出到infile，这样就不需要指定与outfile相同的文件
-r 从最新的版本生成多少个版本。如果为0，则整个更改日志将被重新生成，输出文件将被覆盖。默认值:1
-n ./changelog-option.js 指定自定义配置

运行命令生成最新CHANGELOG

npm run changelog
1

2. 使用自动化工具后，还可以用 git commit - m ""提交代码吗？

可以。
配置自动化工具后，不仅支持npm run commit自动化提示选择提交，也可以继续使用 git commit - m ""提交,只是写type的时候前面还需要加上emoji的字符串。

示例：git commit -m ":sparkles: feat: 新增登录功能"

查看git日志记录，显示已经提交成功。

3. husky报错导致提交失败？

删除根目录下.husky文件夹，在命令行重新运行 npm run prepare 和npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'