likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 13

前言

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

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

开始想着利用工具去规范提交,尝试用了一些工具,感觉配置稍微有点复杂,就想着要不干脆自己写一个 git commit 信息规范脚手架 吧,也不难,于是就开始动手了,在今天,正式发布了🎉。

git-cm 简介

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

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

看下运行结果:

commit信息校验: 前端的轮子滚滚向前:团队协作少不了的 git commit 工具

询问式选择输入:

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

提交成功: 前端的轮子滚滚向前:团队协作少不了的 git commit 工具

安装

npm i -g git-cm

命令行

提交时只需使用 git-cmcm 去代替 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:'

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

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

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

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

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

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

git-cm -am

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

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

推荐的 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 地址

还有很大改善的空间,欢迎加入!

转载自:https://juejin.cn/post/7275973806668922934
评论
请登录