【推荐】git commit 规范和如何在 commit 里使用 emoji

ゝ一世哀愁。 2022-09-10 14:10 199阅读 0赞

## 前言 ##

今天给大家带来的是关于 git commit 那些事儿，希望大家喜欢。

对于规范 git commit message 我是分成了两种类型去看待。

*  对于通用库、开源项目这类多人维护，而且极大可能别人会来看这份代码的，一定要规范，特别是对于开源项目，往往会要列 Change Log，规范好 commit 节省自己整理 log 的时间，也方便了用户。
 *  对于业务代码，特别是那种一个人维护的，其实不搞问题也不大，因为极小可能会有人来看你的 commit message。但是我依然还是建议规范一下，不然一旦后面想去看就会花费很多的力气，毕竟规范一下也不麻烦。

通过本篇文章你将了解到三部分内容：

1.  了解 git commit 规范
2.  学到用工具 Commitizen 来规范 commit
3.  学到如何在 commit message 里加上好看的 emoji

## 规范 ##

现在主流的 commit message 规范就是 Angular 团队所用的准则\[1\]，继而衍生了 Conventional Commits specification\[2\]. 很多工具也是基于此规范。

每次提交，Commit message 都包括三个部分：header，body 和 footer，其中 header 有一个特殊的格式，包括了 type、scope、subject。

其中 header 是必选的，但是 header 里的 scope 是可选的，另外提交的 message 长度不要超过 100 个字符，太长了不易阅读。

对于我个人来说，我觉得只要把 header 部分规范其实基本能满足绝大部分需要了，强制去规范 body 和 footer 对于团队的同学来说简直是折磨，所以我这里仅介绍 header 的几部分

### type ###

type 指明 git commit 的类别，应该使用以下类型

*  『feat』: 新增功能
 *  『fix』: 修复 bug
 *  『docs』: 仅仅修改了文档，比如 README, CHANGELOG 等等
 *  『test』: 增加/修改测试用例，包括单元测试、集成测试等
 *  『style』: 修改了空行、缩进格式、引用包排序等等（不改变代码逻辑）
 *  『perf』: 优化相关内容，比如提升性能、体验、算法等
 *  『refactor』: 代码重构，「没有新功能或者 bug 修复」
 *  『chore』: 改变构建流程、或者增加依赖库、工具等
 *  『revert』: 回滚到上一个版本
 *  『merge』: 代码合并

> “
> 
> 这里面有些 angular 团队没有，自己可以自行增减
> 
> ”

### scope（可选） ###

scope 用于说明 commit 影响的范围，根据不同项目有不同层次描述。若没有特殊规定，也可以描述影响的哪些功能等。

### subject ###

subject 是 commit 目的的简短描述，不超过 50/80 个字符，一般 git 提交的时候会有颜色提示。

*  若英文用不惯，那么推荐使用中文
 *  若是开源代码，一律推荐统一英文，英文不行可以翻译软件用起来
 *  若是开源代码，可以再附加对应的 issue 地址
 *  结尾不加标点符号

## 工具：Commitizen ##

Commitizen 是一个撰写合格 Commit message 的工具,（详细说明见 github 地址\[3\]），用于代替 git commit 指令，而 cz-conventional-changelog 适配器提供 conventional-changelog 标准（约定式提交标准）。基于不同需求，也可以使用不同适配器。

1. 全局安装 commitizen cz-conventional-changelog

npm install -g commitizen cz-conventional-changelog

2. git cz 取代 git commit

安装完毕后，可直接使用 git cz 来取代 git commit。

![1979ca4f11ed6d437331b8c77a401999.png][]

可以看到当你 cz 之后，下面有很多的 type 让你选择，这就省掉了每次你去想应该用哪种 type，非常方便。

> “
> 
> 全局模式下，需要 `~/.czrc` 配置文件, 为 commitizen 指定 Adapter, 如果你不需要生成 Change Log 可以不用去处理。
> 
> ”

只要用了 Commitizen ，就很方便的就规范的大家的 message 。

## 在 commit message 里用 emoji ##

在 git commit 上使用 emoji 提供了一种简单的方法，仅通过查看所使用的表情符号来确定提交的目的或意图, 提交记录非常好理解，阅读体验非常棒。

![65d7fe6461d97a352983a3317cae384b.png][]

### 使用方法 ###

git commit 时直接在注释中写入表情符号的代码部分即可完成表情 emoji 的提交。

举个栗子：

$ git commit -m ':tada: init commit'
    $ git commit -m 'added image to repo :art:'

> “
> 
> 如果你用 Commitizen，可能不太好把 emoji 放在最前面，因为咱们操作的空间，就在 git cz 后第三次交互提示，也就是在输入 header 的 subject 的时候填入，如果是这样，可以选择把表情放到最后。
> 
> ”

效果展示：![502e123953f8e3db342654f1586be3ad.png][]

如果你们团队是一个喜欢用 emoji 的团队，其实可以不用遵循上面的一节的规范，因为 emoji 已经可以表达出 header 的 type 的作用了，直接在 emoji 后面加描述即可。

### emoji 表情库 ###

<table> 
 <thead> 
  <tr> 
   <th>emoji</th> 
   <th>emoji 代码</th> 
   <th>commit 说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:tada: (庆祝)</td> 
   <td><code>:tada:</code></td> 
   <td>初次提交</td> 
  </tr> 
  <tr> 
   <td>:new: (全新)</td> 
   <td><code>:new:</code></td> 
   <td>引入新功能</td> 
  </tr> 
  <tr> 
   <td>:bookmark: (书签)</td> 
   <td><code>:bookmark:</code></td> 
   <td>发行/版本标签</td> 
  </tr> 
  <tr> 
   <td>:bug: (bug)</td> 
   <td><code>:bug:</code></td> 
   <td>修复 bug</td> 
  </tr> 
  <tr> 
   <td>:ambulance: (急救车)</td> 
   <td><code>:ambulance:</code></td> 
   <td>重要补丁</td> 
  </tr> 
  <tr> 
   <td>:globe_with_meridians: (地球)</td> 
   <td><code>:globe_with_meridians:</code></td> 
   <td>国际化与本地化</td> 
  </tr> 
  <tr> 
   <td>:lipstick: (口红)</td> 
   <td><code>:lipstick:</code></td> 
   <td>更新 UI 和样式文件</td> 
  </tr> 
  <tr> 
   <td>:clapper: (场记板)</td> 
   <td><code>:clapper:</code></td> 
   <td>更新演示/示例</td> 
  </tr> 
  <tr> 
   <td>:rotating_light: (警车灯)</td> 
   <td><code>:rotating_light:</code></td> 
   <td>移除 linter 警告</td> 
  </tr> 
  <tr> 
   <td>:wrench: (扳手)</td> 
   <td><code>:wrench:</code></td> 
   <td>修改配置文件</td> 
  </tr> 
  <tr> 
   <td>:heavy_plus_sign: (加号)</td> 
   <td><code>:heavy_plus_sign:</code></td> 
   <td>增加一个依赖</td> 
  </tr> 
  <tr> 
   <td>:heavy_minus_sign: (减号)</td> 
   <td><code>:heavy_minus_sign:</code></td> 
   <td>减少一个依赖</td> 
  </tr> 
  <tr> 
   <td>:arrow_up: (上升箭头)</td> 
   <td><code>:arrow_up:</code></td> 
   <td>升级依赖</td> 
  </tr> 
  <tr> 
   <td>:arrow_down: (下降箭头)</td> 
   <td><code>:arrow_down:</code></td> 
   <td>降级依赖</td> 
  </tr> 
  <tr> 
   <td>:zap: (闪电)<br>:racehorse: (赛马)</td> 
   <td><code>:zap:</code><br><code>:racehorse:</code></td> 
   <td>提升性能</td> 
  </tr> 
  <tr> 
   <td>:chart_with_upwards_trend: (上升趋势图)</td> 
   <td><code>:chart_with_upwards_trend:</code></td> 
   <td>添加分析或跟踪代码</td> 
  </tr> 
  <tr> 
   <td>:rocket: (火箭)</td> 
   <td><code>:rocket:</code></td> 
   <td>部署功能</td> 
  </tr> 
  <tr> 
   <td>:white_check_mark: (白色复选框)</td> 
   <td><code>:white_check_mark:</code></td> 
   <td>增加测试</td> 
  </tr> 
  <tr> 
   <td>:memo: (备忘录)<br>:book: (书)</td> 
   <td><code>:memo:</code><br><code>:book:</code></td> 
   <td>撰写文档</td> 
  </tr> 
  <tr> 
   <td>:hammer: (锤子)</td> 
   <td><code>:hammer:</code></td> 
   <td>重大重构</td> 
  </tr> 
  <tr> 
   <td>:art: (调色板)</td> 
   <td><code>:art:</code></td> 
   <td>改进代码结构/代码格式</td> 
  </tr> 
  <tr> 
   <td>:fire: (火焰)</td> 
   <td><code>:fire:</code></td> 
   <td>移除代码或文件</td> 
  </tr> 
  <tr> 
   <td>:pencil2: (铅笔)</td> 
   <td><code>:pencil2:</code></td> 
   <td>修复 typo</td> 
  </tr> 
  <tr> 
   <td>:construction: (施工)</td> 
   <td><code>:construction:</code></td> 
   <td>工作进行中</td> 
  </tr> 
  <tr> 
   <td>:wastebasket: (垃圾桶)</td> 
   <td><code>:wastebasket:</code></td> 
   <td>废弃或删除</td> 
  </tr> 
  <tr> 
   <td>:wheelchair: (轮椅)</td> 
   <td><code>:wheelchair:</code></td> 
   <td>可访问性</td> 
  </tr> 
  <tr> 
   <td>:construction_worker: (工人)</td> 
   <td><code>:construction_worker:</code></td> 
   <td>添加 CI 构建系统</td> 
  </tr> 
  <tr> 
   <td>:green_heart: (绿心)</td> 
   <td><code>:green_heart:</code></td> 
   <td>修复 CI 构建问题</td> 
  </tr> 
  <tr> 
   <td>:lock: (锁)</td> 
   <td><code>:lock:</code></td> 
   <td>修复安全问题</td> 
  </tr> 
  <tr> 
   <td>:whale: (鲸鱼)</td> 
   <td><code>:whale:</code></td> 
   <td>Docker 相关工作</td> 
  </tr> 
  <tr> 
   <td>:apple: (苹果)</td> 
   <td><code>:apple:</code></td> 
   <td>修复 macOS 下的问题</td> 
  </tr> 
  <tr> 
   <td>:penguin: (企鹅)</td> 
   <td><code>:penguin:</code></td> 
   <td>修复 Linux 下的问题</td> 
  </tr> 
  <tr> 
   <td>:checkered_flag: (旗帜)</td> 
   <td><code>:checkered_flag:</code></td> 
   <td>修复 Windows 下的问题</td> 
  </tr> 
  <tr> 
   <td>:twisted_rightwards_arrows: (交叉箭头)</td> 
   <td><code>:twisted_rightwards_arrows:</code></td> 
   <td>分支合并</td> 
  </tr> 
 </tbody> 
</table>

### 如何在命令行中显示 emoji ###

默认情况下，在命令行中并不会显示出 emoji, 仅显示 emoji 代码。不过可以使用 emojify 使得在命令行也可显示 emoji, 它是一个 shell 脚本，安装与使用都很简单，在这里\[4\] 查看更详细的如何安装与使用。

#### 安装 emojify ####

$ sudo sh -c "curl https://raw.githubusercontent.com/mrowa44/emojify/master/emojify -o /usr/local/bin/emojify && chmod +x /usr/local/bin/emojify"

#### 使用 emojify ####

$ emojify "Hey, I just :raising_hand: you, and this is :scream: , but here's my :calling: , so :telephone_receiver: me, maybe?"

显示效果：![844f0dec33b81c226aad7cc5882ffd70.png][]

在使用 git bash 的时候，设置替换日志中的表情符号代码

$ git log --oneline --color | emojify | less -r

或者设置 git log 命令别名

$ alias gitlog='git log --oneline --color | emojify | less -r'
    
    $ gitlog

效果如下：![405acdb1f093064738accbf1b044e544.png][]

是不是很好玩，快去试试吧！

## 参考资料 ##

*  git-emoji-guide\[5\]
 *  git commit 时使用 Emoji ?\[6\]

### 参考资料 ###

\[1\]

Angular 团队所用的准则: *https://github.com/angular/angular.js/blob/master/DEVELOPERS.md\#-git-commit-guidelines*

\[2\]

Conventional Commits specification: *https://link.zhihu.com/?target=https%3A//conventionalcommits.org/*

\[3\]

见 github 地址: *https://github.com/commitizen/cz-cli*

\[4\]

这里: *https://github.com/mrowa44/emojify*

\[5\]

git-emoji-guide: *https://hooj0.github.io/git-emoji-guide/*

\[6\]

git commit 时使用 Emoji ?: *https://zhuanlan.zhihu.com/p/29764863*

[1979ca4f11ed6d437331b8c77a401999.png]: /images/20220829/9324abbdf86744249c8e5a099f535a57.png
[65d7fe6461d97a352983a3317cae384b.png]: /images/20220829/8fde82b93f484c4096d36691570fb6ed.png
[502e123953f8e3db342654f1586be3ad.png]: /images/20220829/e3f60e4600114c6aba5ab287417a48ad.png
[844f0dec33b81c226aad7cc5882ffd70.png]: /images/20220829/458661b52f57423d8b03a71e15a8d80c.png
[405acdb1f093064738accbf1b044e544.png]: /images/20220829/2d667778f123402a94ea3de62cb01e4f.png