前言

看到同事这样提交 commit 信息，高血压有没有犯？反正我是两眼一黑，差点晕过去了！！！

想着利用工具去规范提交，尝试用了一些工具，确实也能达到想要的效果。刚好最近看了些搭建脚手架的文章，于是抱着学习练手的态度，写一个 git commit 信息规范脚手架 吧。今天发布了，来介绍一下吧。

本项目是个初尝试项目，个人基础的使用没问题，如果是团队内使用还是建议使用 commitlint 等成熟的工具。

如果想借助现有工具规范 git commit 信息，可以查阅这篇文章【Vue3 前端项目工程化】集成相关生态工具链及其改造】。

如果想入门学习如何搭建脚手架，可以查阅这篇文章超详细的前端脚手架入门篇。

希望对你有帮助。

git-cm 简介

git-cm 是一款轻量级、0配置，也可支持定制化的 git commit message 命令行工具。特点如下：

可视化：学习成本低，友好的界面提示；
零配置：安装即可使用；
校验格式：允许手动输入提交消息，验证符合 AngularJS提交规范，给出提示；
询问式交互：允许通过询问式交互自定义提交信息；
定制化：支持本地配置文件，自定义提交规则；
支持i18n：支持配置中文/英文，默认英文；

看下运行结果：

commit信息校验： 截屏2023-09-07 19.57.16.png

询问式选择输入：

截屏2023-09-07 20.02.20.png

提交成功： 截屏2023-09-07 19.59.58.png

安装

npm i -g git-cm

命令行

提交时只需使用 git-cm 或 cm 去代替 git commit 即可。

支持以下命令行：


# 默认进行询问式选择提交
git-cm

# 发起询问式交互前，先将工作区变动提交至暂存区，即 提交之前先 git add .
git-cm -a

# 手动输入 messgae，进行校验是否符合 AngularJS commit规范
git-cm -m 'type(scope): subject'

# 跟 `-m` 一样，但 `-am` 是提交前，先将工作区变动提交至暂存区，即 提交之前先 git add .
git-cm -am 'type(scope): subject'

当使用 git-cm 时，在没有携带 commit 消息的情况下，系统会发起询问式选择，让用户自主选择提交的 <type> (scope)<subject>, 选择的内容配置按照默认的配置引导，如果当前项目根目录下有配置 gitcommitrc.json，则按照配置的规则来引导。
当使用 git-cm -m 'type(scope): subject' 时，在携带 commit 消息的情况下，系统将去验证这条 commit 信息是否符合 AngularJS提交规范，如果不符合，则给出对应提示，如果符合，则继续提交。

使用体验

git-cm -am 'doc:'

截屏2023-09-07 21.31.51.png

校验 type、scope、subject 的格式；
格式不对的部分会红色标出来，此例子中，<type> 和 <subject> 都不合格；
并给出正确格式的信息范本；
同时给出各部分的格式要求；

配置本地文件，修改语言为 'zh-CN'

git-cm -am 'fe: add home module'

截屏2023-09-07 21.46.35.png

此例子中，type 不在定义规则列表里，所以报错了

git-cm -am

截屏2023-09-07 21.54.24.png

更多的使用体验，可以下载试试吧，欢迎提宝贵意见！

推荐的 commit 信息格式

<type>(<scope>): <short subject>
  │       │             │
  │       │             └─⫸ Subject in present tense. Not capitalized. No period at the end.
  │       │
  │       └─⫸ Commit Scope: Optional, can be anything specifying the scope of the commit change.
  |                          In App Development, scope can be a page, a module or a component.
  │
  └─⫸ Commit Type: feat|fix|docs|style|refactor|test|chore|perf|ci|build|chore

<type>: 提交的类型

feat：产品新功能：通常是能够让用户觉察到的变化，小到文案或样式修改；
fix：修复 bug；
docs: 更新文档或注释;
style: 代码格式调整，对逻辑无影响：比如按照 eslint 或团队风格修改代码格式。注意不是 UI 变更;
refactor: 重构：不影响现有功能或添加功能。比如文件、变量重命名，代码抽象为函数，消除魔法数字等;
test: 单测相关变更;
perf: 性能提升变更;
ci: 持续集成相关变更;
build: 代码构建相关变更：比如修复部署时的构建问题、构建脚本 webpack 或 gulp 相关变更;
chore: 杂项：其他无法归类的变更，比如代码合并;

(scope): 影响的范围

变更范围（细粒度要合适，并在一个项目中保持一致）：比如页面名、模块名、或组件名。

<subject>: 简短描述

此次变更的简短描述，如果是英语则首字母不能大写，句尾不加句号.

<type> 和 <subject> 字段是强制性必填的，scope 是选填的。

❌ Bad

update README to add how to install

✅ Good:

docs: update README to add how to install

✅ Good （with scope）:

docs(README): update README to add how to install

零配置

安装之后，就可以使用，所以配置文件不是必须的！如果有定制的需求，也可以支持在项目根目录下添加 gitcommitrc.json 文件，去重写/覆盖默认配置。

默认配置参数如下：

types: {Array}, 可支持的类型选择；

messages: {Object}, type/scope/subject/body/footer 提示占位符；

maxLen: {number}, commit 信息的最大字数长度限制，默认 100；

minLen: {number}, commit 信息的最小字数长度限制，默认 0；

subjectLimit: {number}, subject 简短描述最大字数限制，默认 50；

skipQuestions: {Array}, 询问交互中允许跳过的步骤，默认 ["body", "footer"]；

scopeRequired: {boolean}, scope 变更范围的填写，是否必填，默认 false;

lang: 询问交互中提示的语言，支持 en-US、zh-CN, 默认 en-US；

默认配置文件预览

{
  "types": [
    {
      "value": "feat",
      "name": "A new feature "
    },
    {
      "value": "fix",
      "name": "A bug fix "
    },
    {
      "value": "docs",
      "name": "Documentation only changes "
    },
    {
      "value": "style",
      "name": "Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) "
    },
    {
      "value": "refactor",
      "name": "A code change that neither fixes a bug nor adds a feature "
    },
    {
      "value": "perf",
      "name": "A code change that improves performance"
    },
    {
      "value": "test",
      "name": "Adding missing tests or correcting existing tests"
    },
    {
      "value": "ci",
      "name": "Changes to your CI configuration files and scripts"
    },
    {
      "value": "build",
      "name": "Changes that affect the build system or external dependencies"
    },
    {
      "value": "chore",
      "name": "Changes to the build process or auxiliary tools and libraries such as documentation generation."
    }
  ],
  "messages": {
    "type": "(type) Select the type of change that you're committing: (Use arrow keys)",
    "scope": "(scope) Write a brief description of the scope of impact:",
    "subject": "(subject) Write a short, imperative tense description of the change:",
    "body": "(body) Provide a longer description of change, Wrap with :\n",
    "footer": "(footer) List any breaking changes:"
  },
  "maxLen": 100,
  "minLen": 0,
  "subjectLimit": 50,
  "skipQuestions": ["body", "footer"],
  "scopeRequired": false,
  "lang": "en-US"
}

定制化 gitcommitrc.json

在项目根目录下，添加 gitcommitrc.json 文件，去重写/覆盖默认配置。具体格式可参考上面的默认配置。

最后项目配置将取默认配置文件和本地配置文件 gitcommitrc.json 的并集：

  const config = { ...defaultConfig, ...localConfig }

总结

git-cm npm 地址

git-cm repo 地址

前端的轮子滚滚向前：团队协作少不了的 git commit 工具

前言

git-cm 简介

安装

命令行

使用体验

推荐的 commit 信息格式

零配置

定制化 gitcommitrc.json

总结