Git 提交信息指南：如何使用 commitlint 和 husky 规范化你的提交历史？

在日常的代码开发中，规范化的提交信息是非常重要的，它能够帮助团队更好地理解和管理代码变更历史。本文将介绍如何利用 Angular 提交规范、commitizen、commitlint 和 husky 来规范化提交信息，以及如何定制自定义提交格式。

1. Angular 提交规范

Angular 提交规范是一种约定俗成的提交信息格式，将提交信息分为类型、范围和简短描述三个部分，格式如下：

<类型>(<范围>): <简短描述>

• <类型>: 用于描述提交的性质，常见类型有：
  • feat: 新功能
  • fix: 修复 bug
  • docs: 文档变更
  • style: 代码样式变更
  • refactor: 重构代码
  • test: 测试相关
  • chore: 其他杂项
• <范围>: 描述提交所涉及的范围，可以是任何与提交相关的内容，通常是文件名或模块名。
• <简短描述>: 对提交的简要描述，清晰明了。

例如：

feat(login): add new login feature
fix(api): fix issue with API request
docs(readme): update installation instructions

常见的提交类型包括 feat、fix、docs、style、refactor、test 和 chore。

2. commitizen 介绍和使用

commitizen 是一个用于规范化提交信息的工具，它能够引导用户按照规范填写提交信息，并生成符合规范的提交信息模板。通过命令行界面交互的方式，commitizen 可以帮助用户选择提交类型、范围和描述信息，并以规范的格式生成提交信息。

使用 commitizen 可以避免用户忘记填写关键信息，提高提交信息的一致性和可读性。安装 commitizen 后，可以通过运行 git cz 来代替 git commit 进行提交。

• 安装依赖：

npm i -D commitizen cz-conventional-changelog

• 修改 package.json：

{
  "script": {
    "commit": "git-cz"
  },
  "config": {
    "commitizen": {
      "path": "node_modules/cz-conventional-changelog"
    }
  }
}

使用上述两种方式配置好 commitizen，就能使用 git-cz 或 npm run commit 代替 git commit 了，依次完成所有步骤就能规范地提交了。

若觉得英文看不懂的话，可以将 cz-conventional-changelog 替换成中文版 cz-conventional-changelog-zh，此时运行 npm run commit 就能得到中文版提示:

3. cz-customizable 自定义提交格式

若现有的提交文案不符合项目要求，我们也可以使用 cz-customizable 这个 commitizen 的定制化工具来制定一份项目特有的提交格式，并在提交时生成符合规范的提交信息模板。

接下来演示一下如何使用 cz-customizable 来定义自定义的提交格式，并集成到项目中

• 安装依赖：

npm i commitizen cz-customizable -D

• 配置 .cz-config.js：

module.exports = {
  allowBreakingChanges: ["feat", "fix"],
  allowCustomScopes: true,
  scopes: [],
    types: [
      {
        name: "功能：新增功能，迭代项目需求 (feat)",
        value: "feat"
      },
      {
        name: "修复：修复缺陷，修复上一版本存在问题 (fix)",
        value: "fix"
      },
      {
        name: "文档：更新文档，仅改动文档不改动代码 (docs)",
        value: "docs"
      },
      {
        name: "样式：变动格式，不影响代码逻辑 (style)",
        value: "style"
      },
      {
        name: "重构：重构代码，非新增功能也非修改缺陷 (refactor)",
        value: "refactor"
      },
      {
        name: "性能：优化性能，提高代码执行性能 (perf)",
        value: "perf"
      },
      {
        name: "测试：新增测试，追加测试用例验证代码 (test)",
        value: "test"
      },
      {
        name: "构建：更新构建，改动构建工具或外部依赖 (build)",
        value: "build"
      },
      {
        name: "脚本：更新脚本，改动CI或执行脚本配置 (ci)",
        value: "ci"
      },
      {
        name: "事务：变动事务，改动其他不影响代码的事务 (chore)",
        value: "chore"
      },
      {
        name: "回滚：回滚版本，撤销某次代码提交 (revert)",
        value: "revert"
      },
      {
        name: "合并：合并分支，合并分支代码到其他分支 (merge)",
        value: "merge"
      },
      {
        name: "同步：同步分支，同步分支代码到其他分支 (sync)",
        value: "sync"
      },
      {
        name: "改进：改进功能，升级当前功能模块 (impr)",
        value: "impr"
      }
  ]
}

• 修改 package.json 文件

{
  "scripts": {
    "commit": "git-cz"
  },
  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  }
}

直接运行 npm run commit 即可选择对应提交内容

4. commitlint 和 husky 的介绍和使用

尽管我们设置了提交规范，但是并不能阻止团队成员直接通过 git commit 去提交不符合规范的内容。为了避免这种情况，我们需要引入 commitlint 和 husky 来规范化提交。

• commitlint

commitlint 是一个用于校验提交信息的工具，它能够根据预定义的规则对提交信息进行校验，确保提交信息的格式正确。

• husky

husky 能够在提交前、推送前等阶段执行自定义脚本，帮助我们实现提交信息的自动校验。

结合 husky 和 commitlint，可以在提交时自动触发提交信息的校验。步骤如下：

• 安装依赖：

npm install @commitlint/config-conventional @commitlint/cli husky -D

• 配置 commitlint.config.js：

module.exports = { extends: ["@commitlint/config-conventional"] }

• 配置 husky：

执行 npx husky install 命令，完成 husky 的初始化。

npx husky install

此时项目根目录会生成 .husky 目录，目录内容如下

接着修改 .husky/_/commit.msg 文件，内容如下：

#!/usr/bin/env sh

. "${0%/*}/husky.sh"

npx --no -- commitlint -e $HUSKY_GIT_PARAMS

通过以上步骤，你可以规范化提交信息并自定义提交格式，同时通过 commitlint 和 husky 实现提交信息的自动校验。，若提交信息不规范则不允许提交。

提交正确的格式则能正常提交。

5. 总结

规范化的提交信息能够帮助团队更好地管理代码变更历史，提高协作效率。通过使用 Angular 提交规范、commitizen、commitlint 和 husky，我们能够轻松地规范化提交信息，并确保提交信息的格式正确。在实际的项目开发中，建议团队成员养成良好的提交信息习惯，以便更好地追溯和管理代码变更。

参考资料

• docs.google.com/document/d/... 【Angular 提交规范】