Conventional Commits 规范

它提供了一组用于创建清晰的提交历史的简单规则； 这使得编写基于规范的自动化工具变得更容易。 这个约定与SemVer相吻合， 在提交信息中描述新特性、bug 修复和破坏性变更。 —- Conventional Commits 官网

规范总结
  • 可格式化信息，自动产生 changelog；
  • 校验拦截不符合规则的 commit 描述；
  • 根据类型决定当前版本变更的性质；
  • 统一提交信息，有利于代码审查者的阅读。

commitizen & cz-customizable

commitizen：说到了 Conventional Commits 规范，我们要遵循此规范时，可能手动去处理 commit 信息会比较繁琐，并且出错率也很高，比如在我们书写 fix(scope): xxx 时，很容易对于符合的全角还是半角输入法搞混，这样很容易造成信息格式化的失败。那么我们该如何高效稳定的遵循 Conventional Commits 规范呢？Commitizen 应声而来 cz-customizable：作为一个用于自定义 Commitizen 的扩展插件，可以在原生 Commitizen 的标准上，根据配置文件来自定义我们的提交规范。可以说是用来扩展 Commitizen 的神器。一般都用于 Commitizen 的配套使用。

  1.  yarn add commitizen cz-customizable -D

在最外层 package.json 文件中添加脚本命令和配置项，使 commitizen 使用cz-customizable 插件

  1.   {
  2.       "scripts" : {
  3.           "commit": "git cz"
  4.       }
  5.       "config": {
  6.           "commitizen": {
  7.               "path": "cz-customizable"
  8.           }
  9.       }
  10.   }

根目录新建 .cz-config.js 文件，并加入我们的汉化配置

  1. module.exports = {
  2.   types: [
  3.       { value: "feat", name: "feat 🍄:    新增新的特性" },
  4.       { value: "fix", name: "fix 🐛:    修复 BUG" },
  5.       { value: "docs", name: "docs 📄:    修改文档、注释" },
  6.       { value: "refactor", name: "refactor 🎸:    代码重构，注意和特性、修复区分开" },
  7.       { value: "perf", name: "perf ⚡:    提升性能" },
  8.       { value: "test", name: "test 👀:    添加一个测试" },
  9.       { value: "tool", name: "tool 🚗:    开发工具变动(构建、脚手架工具等)" },
  10.       { value: "style", name: "style ✂:    对代码格式的修改不影响逻辑" },
  11.       { value: "revert", name: "revert 🌝:     版本回滚" },
  12.       { value: "update", name: "update ⬆:    第三方库升级 " }
  13.   ],
  14.   scopes: [{ name: '组件' }, { name: '样式' }, { name: '文档更改' }, { name: '其它变更' }],
  15.   allowTicketNumber: false,
  16.   isTicketNumberRequired: false,
  17.   ticketNumberPrefix: 'TICKET-',
  18.   ticketNumberRegExp: '\d{1,5}',
  19.   messages: {
  20.       type: "选择一种你的提交类型:",
  21.       scope: "选择一个scope (可选):", customScope: "Denote the SCOPE of this change:",
  22.       subject: "简要说明:\n",
  23.       body: '详细说明，使用"|"换行(可选)：\n',
  24.       breaking: "非兼容性说明 (可选):\n",
  25.       footer: "关联关闭的issue，例如：#31, #34(可选):\n",
  26.       confirmCommit: "确定提交?"
  27.   },
  29.   allowCustomScopes: true,
  30.   allowBreakingChanges: ['新增', '修复'], 
  31.   subjectLimit: 100
  32. };

commitlint

commitlint 用来校验检查我们的提交 commit 是否符合conventional commit format。类似于 eslint，commitlint 可以根据我们的配置文件或者默认的选项值来校验我们的 commit 信息，不通过的校验会被直接打回

  1. yarn add husky@1.2.0 -D //这里使用老的版本、新版本无法兼容老版本
  2. yarn add commitlint-config-cz @commitlint/cli yorkie -D

在 package.json 中的 husky hook 中添加每次 commit 信息的校验回调

  1. {
  2.     "husky": {
  3.         "hooks": {
  4.             "commit-msg": "commitlint -e -V"
  5.         }
  6.     }
  7. }

在根目录构建 commitlint.config.js 文件，进行 commitlint 的配置。

  1. module.exports = {
  2.   extends: ['cz'],
  3.   parserPreset: {
  4.     parserOpts: {
  5.       headerPattern: /^(.*?)\((.*?)\):\s?(.*)$/,
  6.       headerCorrespondence: ['type', 'scope', 'subject'],
  7.     },
  8.   },
  9.   rules: {
  10.     'type-empty': [2, 'never'],
  11.     'subject-empty': [2, 'never'],
  12.   }
  13. };

standard-version

standard-version 是一款遵循语义化版本（semver）和 commit message 标准规范的版本自动化工具，它还可以使生成 changelog 自动化。并且将我们符合 Conventional Commits 规范的提交信息格式化，并完成以下操作：

  • 根据现在 package.json 文件中的 版本号 version 进行 commit 的整合。并更新 changelog 文件。
  • 提交暂存文件 git add . 。
  • git commit 。
  • 打标签 git tag。 ```javascript yarn add standard-version -D

// package.json { “scripts”: { “release”: “standard-version” } }

  1. **增加 .versionrc.js 文件来格式化 log ，使我们的 changelog 根据 Conventional Commits 规范更加语义化。**
  2. ```javascript
  3. module.exports = {
  4.   "types": [
  5.       { "type": "feat", "section": "✨ Features | 新功能" },
  6.       { "type": "fix", "section": "🐛 Bug Fixes | Bug 修复" },
  7.       { "type": "init", "section": "🎉 Init | 初始化" },
  8.       { "type": "docs", "section": "✏️ Documentation | 文档" },
  9.       { "type": "style", "section": "💄 Styles | 风格" },
  10.       { "type": "refactor", "section": "♻️ Code Refactoring | 代码重构" },
  11.       { "type": "perf", "section": "⚡ Performance Improvements | 性能优化" },
  12.       { "type": "test", "section": "✅ Tests | 测试" },
  13.       { "type": "revert", "section": "⏪ Revert | 回退" },
  14.       { "type": "build", "section": "📦 Build System | 打包构建" },
  15.       { "type": "update", "section": "🚀 update | 构建/工程依赖/工具升级" },
  16.       { "type": "tool", "section": "🚀 tool | 工具升级" },
  17.       { "type": "ci", "section": "👷 Continuous Integration | CI 配置" }
  18.   ]
  19. }

测试

测试提交一个空的commit 执行 yarn commit 、简要说明不填、详细说明也不填、发下被拦截无法提交上去、我们在尝试在当前文件夹下使用git命令提交
image.png
git commit -m”111”
image.png
发现依然不行、我们必须按照配置的规则去提交规范的信息
commitlint官方提供配置
我们按规范提交下
git commit -m”feat(组件):测试提交”
image.png

完美