什么是约定式提交

先来看一下 git约定式提交，可以看到它规范了git commit 的格式，以一种规范化的提交约定每个开发者，清晰明了并带有语义化，提高人机可读性。

格式如下：

1
2
3
4
5
<类型>[可选 范围]: <描述>

[可选 正文]

[可选 脚注]

常用的一些类型：

1
2
3
4
5
6
7
8
9
10
feat		新功能（feature）
fix			修补bug
docs		文档（documentation）更新
style		不影响程序逻辑的代码修改修改空白字符, 格式缩进, 补全缺失的分号等, 没有改变代码逻辑
refactor重构（即不是新增功能, 也不是修改bug的代码变动）
perf		性能, 体验优化
test		测试
chore		不属于以上类型的其他类, 比如构建流程, 依赖管理, 日志日志更新
revert	回滚某个更早之前的提交"
build		构建流程、外部依赖变更，比如升级 npm 包、修改 webpack 配置等

范围：

范围可以写组件、文件、功能名称

描述：

为一段简短概括性的描述

正文：

详细描述，比如新增了那些文件代码 ，删除了那些文件代码，完整详细的描述

脚注：

有哪些破坏性变更需要指定BREAKING CHANGE：后面紧跟着冒号、空格，然后是描述，或者指明其他受影响功能的修复方法

还可以用ISSUES CLOSED：后面紧跟着冒号、空格，来指明改动修复了哪个问题

例如：

1
2
3
feat(table): 添加table表格用来显示列表

使用table标签，tr、td标签用来指定行列的数据显示
1
fix(time.js): 修复时间格式化在ios端失效的问题
1
2
3
4
5
6
7
8
9
refactor(require.js)!: 重构全局请求方法

使用axios代替fetch请求，添加全局拦截器，更改返回格式，正确格式resolve错误，格式reject，
请求出错error

BREAKING CHANGE：
通过require.js请求的接口将直接返回res.data数据,之前使用此方法的请求将受影响
修改前: req.then(res=>res.data)
变更方式: req.then(res=>res)

使用commitizen规范提交

此工具需要安装 node，安装好后

需要安装commitizen

1
$ npm install -g commitizen

安装好后在项目中提交代码就可以使用git cz 来代替git commit提交了

1
$ git cz

在此之前需要安装commitizen适配器才能使用

安装commitizen适配器

通过安装commitizen适配器来使用git cz 命令，以下介绍两种适配器的安装（选装）：

cz-conventional-changelog

cz-conventional-changelog 遵循AngularJs的提交规范

1
$ npm install -g cz-conventional-changelog

linux或macOS

1
$ echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc

windows在C盘用户根目录下新建.czrc文件写入

1
{ "path": "cz-conventional-changelog" }

安装配置好后就可以使用git cz来提交代码了

1
$ git cz

第一步指定提交类型

image-20211111135346472

第二步指定范围(可以跳过)

image-20211111135628506

接下来第三步第四步…

最后提交

最终形成一个规范化的提交

cz-customizable

cz-customizable 遵循AngularJs的提交规范，可以此基础上可以自定义设置

1
$ npm install -g cz-customizable

linux或macOS

1
$ echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc

windows在C盘系统用户主目录下新建.czrc文件写入

1
{ "path": "cz-conventional-changelog" }

新建自定义配置文件.cz-config.js，放到系统用户主目录下（和.czrc同一目录下）

.cz-config.js

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
module.exports = {
  types: [
    {
      value: "feat",
      name: "feat:     新功能（feature）",
    },
    {
      value: "fix",
      name: "fix:      修补bug",
    },
    {
      value: "docs",
      name: "docs:     文档（documentation）更新",
    },
    {
      value: "style",
      name: "style:    不影响程序逻辑的代码修改(修改空白字符, 格式缩进, 补全缺失的分号等, \n            没有改变代码逻辑)",
    },
    {
      value: "refactor",
      name: "refactor: 重构（即不是新增功能, 也不是修改bug的代码变动）",
    },
    {
      value: "perf",
      name: "perf:     性能, 体验优化",
    },
    {
      value: "test",
      name: "test:     测试",
    },
    {
      value: "chore",
      name: "chore:    不属于以上类型的其他类, 比如构建流程, 依赖管理, 日志日志更新",
    },
    {
      value: "revert",
      name: "revert:   回滚某个更早之前的提交",
    },
    {
      value: "build",
      name: "build:   构建流程、外部依赖变更，比如升级 npm 包、修改 webpack 配置等",
    },
  ],

  scopes: [],
  // 主题描述字数限制
  subjectLimit: 100,
  allowTicketNumber: false,
  isTicketNumberRequired: false,
  // ticketNumberPrefix: 'TICKET-',
  ticketNumberRegExp: "\\d{1,5}",
  allowCustomScopes: false,
  skipQuestions: [],
  allowBreakingChanges: [
    "feat",
    "fix",
    "docs",
    "style",
    "refactor",
    "perf",
    "chore",
    "revert",
    "build",
  ],
  breaklineChar: "|",
  ticketNumberPrefix: "",
  breakPrefix: "BREAKING CHANGE:",
  footerPrefix: "ISSUES CLOSED:",
  askForBreakingChangeFirst: false,
  messages: {
    type: "请确保你的提交遵循了git提交规范！\n选择你要提交的类型:",
    // scope: '\n此更改的范围是什么(例如组件、文件名) (enter跳过):',
    // 选择 scope: custom 时会出下面的提示
    customScope: "\n此更改的范围是什么(例如组件、文件名) (enter跳过):",
    subject: "填写一个简短精炼的描述:\n",
    body: '添加一个更加详细的描述，可以附上新增功能的描述或 bug 链接、截图链接 (enter跳过)。使用 "|" 换行:\n',
    breaking: "列举非兼容性重大的变更 BREAKING CHANGE  (enter跳过):\n",
    footer: "改动修复了哪个问题 ISSUES CLOSED  (enter跳过)。 例如.: #31, #34:\n",
    confirmCommit: "是否确实要继续执行上述提交?",
  },
};

配置完成后执行git cz，会发现变成自定义的询问

image-20211111140159893

自动生成CHANGELOG.md变更日志

通过之前的规范化提交，可以通过工具自动生成版本变更日志，每个版本都会根据提交类型自动归类，最终形成CHANGELOG.md，以下介绍两种生成变更日志的方法（选装）

conventional-changelog-cli

安装conventional-changelog-cli

1
$ npm install -g conventional-changelog-cli

在项目中执行：

1
$ conventional-changelog -p angular -i CHANGELOG.md -s

执行完后会生成CHANGELOG.md，每次执行都会在文件开头累加更新

如果想重新生成覆盖之前日志：

1
$ conventional-changelog -p angular -i CHANGELOG.md -s -r 0

standard-version

安装standard-version

1
$ npm i -g standard-version

不指定参数在项目中执行：

1
$ standard-version

此操作会自动执行生成CHANGELOG.md，升级version，提交，打tag等一些列操作（不推荐）

指定参数来指定版本，跳过提交，跳过打tag标签，最终只会生成CHANGELOG.md：

1
$ standard-version -r v1.0.0 --skip.commit --skip.tag