意义

统一团队规范，降低协作成本

多人协作时，不统一的commit信息往往让团队成员解读困难，摸不着头脑，而统一的规范能够让团队成员了解每次代码提交的目的及解决了具体什么问题

国际化

​ 能够使团队成员更容易去解读一些著名源码，如vue3，element-plus等，说不定你哪天发现了vue3源码bug，改bug后请求合并被尤大接收了，不香吗？vue3的提交记录

快速过滤历史提交

​ 可以过滤某些 commit（比如文档改动），便于快速查找信息。如下图过滤历史bug修复

自动生成版本日志

​ 发布新版本时配合conventional-changelog-cli插件自动根据commit message生成

格式

Angular的代码格式

以祖师爷尤大vue3项目为例，以不规范的commit尝试改下文件进行提交报错：

从报错信息中可以发现vue3采用改编自Angular的代码提交规范

规范指出一次 commit 提交包含 *header*, *body* (可选)和 *footer*(可选). header 中包含 *type*, *scope(可选)* 和 *subject*:

• Header ：只有一行，由三个字段组成：type（必需）、scope（可选）和subject（必需）

  type：包含以下类型

  revert: 恢复上一次提交
  feat: 新功能、新特性
  fix: 修改 bug
  docs: 文档修改
  style: 代码格式修改, 注意不是 css 修改（例如分号修改）
  refactor: 代码重构（重构，在不影响代码内部行为、功能下的代码修改）
  perf: 更改代码，以提高性能
  test: 测试用例新增、修改
  workflow: 工作流相关文件修改
  ci: 持续集成相关文件修改
  chore: 其他修改（不在上述类型中的修改）
  types：类型更改
  

  scope：可以是指定提交更改位置的任何内容. 在vue3如 core, compiler, ssr, v-model, transition 等

  subject:是commit 目的的简要描述

  例：feat(compiler): 增加登录模块

• Body ：主要写改代码的原因，和之前版本有什么区别

  例：修正#5415（回归#4216）

• Footer ：1.不兼容上一个版本的破坏性变更
  2.关闭的 issue

  例1：BREAKING CHANGE: Func()的传参由之前的Object改为Array

  例2：close #28

措施

提交前验证commit message格式

那么尤大在代码中是如何统一commit msg规范的？从源码可以找到以下代码

// Invoked on the commit-msg git hook by yorkie.

const chalk = require('chalk')
const msgPath = process.env.GIT_PARAMS
const msg = require('fs')
  .readFileSync(msgPath, 'utf-8')
  .trim()

const commitRE = /^(revert: )?(feat|fix|docs|style|refactor|perf|test|workflow|ci|chore|types)(\(.+\))?: .{1,50}/

if (!commitRE.test(msg)) {
  ...
  process.exit(1)
}

代码中利用尤大自己写的包yorkie对git commit 信息进行正则匹配，阻止不符合正则的commit message。从yorkie中可以了解到该包是在husky下的部分修改，husky可以让我们在项目中方便添加git hooks，在提交过程中触发正则匹配阻止不符合规范的git commit提交

package.json
{
  ......
  "gitHooks": {
    "commit-msg": "node scripts/verifyCommit.js"
  },
  "devDependencies": {
    "chalk": "^4.1.0",
    "yorkie": "^2.0.0"
  }
}

注意：除了git注入commit message的验证，yorkie还可以在gitHook中配置pre-commit钩子,如阻止不符合eslint规则代码提交

自动生成 Change log

​ 如果你的所有 Commit 都符合格式要求，那么发布新版本时， Change log 就可以用脚本自动生成。生成的文档包括以下三个部分：

• New features

• Bug fixes

• Breaking changes.

  安装方法：

  yarn add conventional-changelog-cli -D
  

  在package.json下script新增命令行：

  "scripts": {
      "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
   },
  

  执行：yarn changelog

  

  可以看到我们的目录下就生成了新的提交日志了

【项目校验示例】:git hook