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

前言

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

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

git-cm 简介

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

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

看下运行结果:

commit信息校验:

询问式选择输入:

提交成功:

安装

sh 复制代码
npm i -g git-cm

命令行

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

支持以下命令行:

sh 复制代码
# 默认进行询问式选择提交
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:'

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

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

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

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

git-cm -am

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

推荐的 commit 信息格式

json 复制代码
<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;
默认配置文件预览

json 复制代码
{
  "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 的并集:

js 复制代码
  const config = { ...defaultConfig, ...localConfig }

总结

git-cm npm 地址

git-cm repo 地址

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

相关推荐
xw59 分钟前
npm几个实用命令
前端·npm
!win !14 分钟前
npm几个实用命令
前端·npm
代码狂想家18 分钟前
使用openEuler从零构建用户管理系统Web应用平台
前端
dorisrv2 小时前
优雅的React表单状态管理
前端
蓝瑟2 小时前
告别重复造轮子!业务组件多场景复用实战指南
前端·javascript·设计模式
dorisrv2 小时前
高性能的懒加载与无限滚动实现
前端
韭菜炒大葱2 小时前
别等了!用 Vue 3 让 AI 边想边说,字字蹦到你脸上
前端·vue.js·aigc
db_cy_20623 小时前
Git对服务器配置文件进行版本控制
运维·服务器·git
StarkCoder3 小时前
求求你,别在 Swift 协程开头写 guard let self = self 了!
前端
清妍_3 小时前
一文详解 Taro / 小程序 IntersectionObserver 参数
前端