Commitizen + Commitlint + husky 实践

# Commitizen

# 安装 Commitizen CLI 工具包

#npm
npm install commitizen -g

#pnpm
pnpm add commitizen -g

1
2
3
4
5

注：在使用 pnpm 安装的时候，若拋错 ERR_PNPM_NO_GLOBAL_BIN_DIR Unable to find the global bin directory

# 在项目中初始化适配器

这里选择的是 cz-conventional-changelog ，官方还提供了其它的，可以尝试一下差异

# npm
commitizen init cz-conventional-changelog --save-dev --save-exact

# yarn
commitizen init cz-conventional-changelog --yarn --dev --exact

# pnpm
commitizen init cz-conventional-changelog --pnpm --save-dev --save-exact

1
2
3
4
5
6
7
8

# 搭配 husky 使用

添加 prepare-commit-msg 钩子

npx husky add .husky/prepare-commit-msg  'exec < /dev/tty && git cz --hook || true'

注：原版 exec < /dev/tty && git cz --hook || true 中的 git cz是npx cz 这里我进行了替换，如果拋错，可以改为 npx cz 或者 cz

# 使用方式与示例 commit

当时用 git commit 时触发 hook 进入交互页面，选择变更类型，补充变更内容。

# 可选：交互 UI 支持中文

安装适配器

# npm
commitizen init cz-customizable --save-dev --save-exact

# yarn
commitizen init cz-customizable --yarn --dev --exact

# pnpm
commitizen init cz-customizable --pnpm --save-dev --save-exact

1
2
3
4
5
6
7
8

注：如果已经按照上面的命令装过 cz-conventional-changelog ，需要加 --force 参数，或者把 cz-conventional-changelog 从项目里删除

配置 config

# package.json

"config": {
    "commitizen": {
      "path": "./node_modules/cz-customizable"
    }
}

1
2
3
4
5
6
7

重新定义交互信息

// .cz-config.js

module.exports = {
    // type 类型
    types: [
        { value: 'feat', name: 'feat:     引入新功能' },
        { value: 'fix', name: 'fix:      修复 bug' },
        { value: 'style', name: 'style:    更新 UI 样式文按键' },
        { value: 'format', name: 'format:   格式化代码' },
        { value: 'docs', name: 'docs:     添加/更新文档' },
        { value: 'perf', name: 'perf:     提高性能/优化' },
        { value: 'init', name: 'init:     初次提交/初始化项目' },
        { value: 'test', name: 'test:     增加测试代码' },
        { value: 'refactor', name: 'refactor: 改进代码结构/代码格式' },
        { value: 'patch', name: 'patch:    添加重要补丁' },
        { value: 'file', name: 'file:     添加新文件' },
        { value: 'publish', name: 'publish:  发布新版本' },
        { value: 'tag', name: 'tag:      发布新版本' },
        { value: 'config', name: 'config:   修改配置文件' },
        { value: 'git', name: 'git:      添加或修改.gitignore 文件' }
    ],

    // allowTicketNumber: false,
    // isTicketNumberRequired: false,git
    // ticketNumberPrefix: 'TICKET-',
    // ticketNumberRegExp: '\\d{1,5}',

    // 可以设置 scope 的类型跟 type 的类型匹配项，例如: 'fix'
    // scopeOverrides: {
    //   config: [
    //     { name: 'merge' },
    //     { name: 'style' },
    //     { name: 'e2eTest' },
    //     { name: 'unitTest' }
    //   ]
    // },
    // 覆写提示的信息
    messages: {
        type: "选择你要提交的类型:",
        // scope: '\n选择一个 scope (可选):',
        // 选择 scope: custom 时会出下面的提示
        // customScope: '请输入自定义的 scope (可选):',
        subject: '填写一个简短精炼的描述语句 (必填):\n',
        body: '添加一个更加详细的描述，可以附上新增功能的描述或 bug 链接、截图链接 (可选)。使用 "|" 换行:\n',
        breaking: '列举非兼容性重大的变更 (可选):\n',
        footer: '列举出所有变更的 ISSUES CLOSED (可选)。 例如.: #31, #34:\n',
        confirmCommit: '确认提交?（y/n）',
    },

    // 是否允许自定义填写 scope ，设置为 true ，会自动添加两个 scope 类型 [{ name: 'empty', value: false },{ name: 'custom', value: 'custom' }]
    allowCustomScopes: false,
    allowBreakingChanges: ['feat', 'fix'],
    // 跳过问题
    // skipQuestions: ['body', 'footer'],

    // subject 限制长度
    subjectLimit: 100,
    // breaklineChar: '|', // 支持 body 和 footer
    // footerPrefix : 'ISSUES CLOSED:'
    // askForBreakingChangeFirst : true,
};

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

注：该文件支持放在其它地方，但是需要重命名。配置依赖。

// package.json

"config": {
    "commitizen": {
      "path": "./node_modules/cz-customizable"
    },
    "cz-customizable": {
      "config": ".husky/git/commitizen.js" // 新路径
    }
}

1
2
3
4
5
6
7
8
9
10

参考文档与项目

leoforfree/cz-customizable (opens new window)

LeadrateMSK/nuxt3-starter (opens new window)

# Commitlint

# 安装依赖包

# 安装 commitlint cli and conventional config
npm install --save-dev @commitlint/{config-conventional,cli}

# pnpm
pnpm install --save-dev @commitlint/{config-conventional,cli}

1
2
3
4
5

# 配置依赖

# 添加 commitlint 配置
echo "'use strict'; module.exports = { extends: [ '@commitlint/config-conventional' ] };" > commitlint.config.js

1
2

注: 若 eslint 报错，可以添加 'use strict'; 另外其支持单独配置。使用方法可以参照该项目。 LeadrateMSK/nuxt3-starter (opens new window)

# 撘配 husky 使用

npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

Commit message 和 Change log 编写指南 - 阮一峰的网络日志 (ruanyifeng.com) (opens new window)

egg/CONTRIBUTING.zh-CN.md at master · eggjs/egg (github.com) (opens new window)

编辑

上次更新: 2024/01/23, 17:20:27

← pnpm 下载依赖更换源不生效 package.json 中波浪号~ 异或号^ 是什么意思？→