如何让 git commit 提交时更加规范？例如：vue、angular，如下图。规范化地提交记录，会让将来的回溯查找更容易，也让其他人阅读起来更加简便。

最近读到一篇不错的文章（你可能已经忽略的 git commit 规范），吸取下养分，顺便做个记录。文章介绍得很清楚，建议阅读原文，不做额外赘述，以下为集成到项目的快速指南。

使用到的工具 commitizen、husky、gitmoji-cli，cz-conventional-changelog 是 angular 的 commit message 格式。

所有包不推荐 global 安装，而仅项目本地安装，方便多人开发时，减少其他人的额外操作。

1. 安装工具

   1	yarn add commitizen cz-conventional-changelog -D

2. 在项目根目录的 package.json 中添加配置

   1 2 3 4 5 6 7 8 9 10

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

   官方推荐的是 global 安装 commitizen，然后执行 commitizen init cz-conventional-changelog --yarn --dev --exact 去自动添加 cz-conventional-changelog，自动在 package.json 中添加 config 配置，不太推荐这种方式。

3. 使用

   • git commit 仍然是普通的 git 提交模式
   • yarn commit 会执行交互式 commit 提交，在终端跟着提示一步步输入即可。

4. 限制每一次 git commit 都执行交互式提交

   如果想要更暴力一点，限制每一次 git commit 都自动执行规范化地提交，可以配置 git 提交的钩子，借助 husky 更方便一点（不用 husky 当然也可以）。

   安装 husky

   1	yarn add husky -D

   在 package.json 中增加配置

   限制了每一次 git commit 都触发，那么 scripts 中配置的 commit 命令就可以删除了。

   1 2 3 4 5 6 7

   {   "husky": {     "hooks": {       "prepare-commit-msg": "exec < /dev/tty && git cz --hook || true"     }   }, }

   有些时候可能不太需要所有的 commit 都执行规范化的提交流程，因此，推荐不要这么暴力限制，而是仅在关键性的提交步骤才执行。

5. 在提交中支持表情符号

   如果想要在提交中使用一些表情符号，如下图：

   

   可以借助 gitmoji-cli

   安装

   1	yarn add gitmoji-cli -D

   使用方法：在提交时按照约定格式输入表情字符即可（左右两边英文冒号夹着字符，例如bug ? :bug:），提交后会自动被显示。

   如果想要查看所有的表情符号及介绍，可以去官方文档查阅，也可以全局安装 npm i -g gitmoji-cli，执行 gitmoji -l 命令在终端查看。