如何让你的commit message 优雅易读

软件开发的小伙伴们，对git 是很是熟不过，天天应该都会提交代码到本身的 Repository或者公司私有的 gitlub ，固然也有些小伙伴会使用svn或者其它的提交工具,该文章分享一下如何使用git commit优雅的提交，可以让团队的小伙伴更可以 git review，我会按照如下的目录继续分享配置。

• 平时提交代码的commit message
• 使用 commitizen 插件提交后的commit message
• 使用 commitizen + cz-customizable 插件后的提交 commit message
• 使用gitmoji-cli 插件后的提交 commit messag
• 如何配置commitizen
• 如何配置commitizen + cz-customizable
• 如何配置itmoji-cli

你们先别着急安装这些插件，要把文章看完看看那个适合本身，从中选择一个适合本身的或者团队的，会在文章的后面添加安装的使用的例子😃

一、 git提交代码的commit message

git commit应该是咱们大多数提交时使用的提交命令，通常在命令行的操做以下

git add -A
git commit -m'提交说明'
git push 
复制代码

那么咱们在远程git repository会看到是这样的的提交信息看上去还能够。通常般可是没有什么亮点和逼格，只能知道这些是平常提交的记录

2 使用 commitizen 的 commit message (提交命令能够先省略，直接看repository git commit效果图)

git add -A
git  cz
-cli@4.0.3, cz-conventional-changelog@3.0.1
? Select the type of change that you're committing: fix:A bug fix ? What is the scope of this change (e.g. component or file name): (press enter to skip) root/app.tsx root/app.less root/index.tsx ? Write a short, imperative tense description of the change (max 52 chars): (10) 这里是简短更改的说明 ? Provide a longer description of the change: (press enter to skip) 这里是详细更改的说明 ? Are there any breaking changes? Yes ? Describe the breaking changes: 说明更改缘由 ? Does this change affect any open issues? Yes ? Add issue references (e.g. "fix #123", "re #123".): "fix #123 https://github.com/zhangfaliang/react-hooks/commits/master" [master 6c90b87] fix(root/app.tsx root/app.less root/index.tsx): 这里是简短更改的说明 1 file changed, 1 insertion(+), 1 deletion(-) git push 复制代码

来看看此次的提交，在git上面的显示 看上去是否是比上次的提交要炫酷一些 ，能够直接看到改变的 文件 以及详细的说明 ，还有issue的链接

3 commitizen + cz-customizable 插件后的提交 commit message

这个是在commitizen上的基础上添加一个能够插拔的插件，实现自定的commit模板 (提交命令先省略，先看下面repository git commit图)

git add -A
git cz
cz-cli@4.0.3, cz-customizable@6.2.0
Line 1 will be cropped at 100 characters. All other lines will be wrapped after 100 characters.
? 选择一种你的提交类型: 💪  WIP:      Work in progress
? Denote the SCOPE of this change（表示此更改的范围）: root/app.tsx root/app.less root/index.tsx
? 短说明:
 这里是简短的说明
? 长说明，使用"|"换行(可选)：
 这里是详细更改的说明
###--------------------------------------------------------###
WIP(root/app.tsx root/app.less root/index.tsx): 这里是简短的说明

这里是详细更改的说明
###--------------------------------------------------------###
? 肯定提交说明? Yes
[master 86be287] WIP(root/app.tsx root/app.less root/index.tsx): 这里是简短的说明
 1 file changed, 1 deletion(-)
复制代码

看图，其实和上个版本的提交相似，只是实现了自定义或者是说适合本身的提交模板

咱们先不看第一步、四步，我们看一下2、三步他们的模板都是相似的

type
type用于说明 commit 的提交性质。常常使用的

• feat 新增一个功能
• fix 修复一个Bug docs 文档变动
• style 代码格式（不影响功能，例如空格、分号等格式修正）
• refactor 代码重构
• perf 改善性能
• test 测试
• build 变动项目构建或外部依赖（例如scopes: webpack、gulp、npm等）
• ci 更改持续集成软件的配置文件和package中的scripts命令，例如scopes: Travis, Circle等
• chore 变动构建流程或辅助工具 revert 代码回退

scope
scope说明commit影响的范围。根据实际业务划分，或者组件库开发划分，能够省略。

Body
commit的详细描述，说明代码提交的详细说明。

Footer
若是代码的提交是不兼容变动或关闭缺陷，则Footer必需，不然能够省略。

4 使用gitmoji-cli 插件后的提交 commit messag 这个很是给力，类型很是丰富，配置也很简单

(提交命令能够先省略，能够直接repository git commit图)

gitmoji -i
✔ Gitmoji commit hook created successfully
➜  my-app git:(master) git add -A
➜  my-app git:(master) ✗ git commit
? Choose a gitmoji: (Use arrow keys or type to search)
  🎨  - Improving structure / format of the code.
  ⚡️  - Improving performance.
  🔥  - Removing code or files.
  🐛  - Fixing a bug.
  🚑  - Critical hotfix.
  ✨  - Introducing new features.
  📝  - Writing docs.
 ✨  - Introducing new features.
  📝  - Writing docs.
  ✅  - Updating tests.
  🏁  - Fixing something on Windows.
  🚨  - Removing linter warnings.
  🚧  - Work in progress.
  ⬇️  - Downgrading dependencies.
  🤖  - Fixing something on Android.
  ⏪  - Reverting changes.
❯ 🍻  - Writing code drunkenly.
  🚸  - Improving user experience / usability.
? Choose a gitmoji: 🍻  - Writing code drunkenly.
? Enter the commit title [13/48]: 修改root下的App文件
? Enter the commit message: 去掉冗余代码
[master 235adf3] :beers: 修改root下的App文件
 1 file changed, 1 insertion(+), 1 deletion(-)
复制代码

哈哈咱么来了

（喝酒撸代码 😁 ）看Git repository的记录，是否是有逼格

哈哈 在commit前面多了一个的小图标是否是颇有意思。好了废话不说了，我们看看这些花里胡哨的commit 配置使用，看看那个适合本身，挑一个就好 😂。

如何配置commitizen

安装命令行工具 全局安装

npm install -g commitizen cz-conventional-changelog
复制代码

在您的主目录中建立一个.czrc文件，其路径指向首选的cz-conventional-changelog，全局安装的commitizen适配器

echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc

如今电脑上的任何git仓库，并使用git cz代替git commit，您会发现commitizen提示。

git add -A
git cz
复制代码

全局安装搞定 😃（我以前选择的全局安装）。我们接下啦看看项目中安装

局部项目中安装

npm install -D commitizen cz-conventional-changelog 
// package.json t添加
  "scripts": {    
        "commit": "git-cz" ,
        ....
  },  
  "config": {    
        "commitizen": {"path": "node_modules/cz-conventional-changelog",
        ....
        },
 
git add -A
yarn commit || npm run commit

复制代码

如何配置commitizen + cz-customizable

全局配置 commitizen +cz-customizabal

npm install -g commitizen cz-customizable

复制代码

在电脑的根目录建立.czrc 而后执行 echo '{ "path": "cz-customizable" }' > ~/.czrc

touch .czrc .cz-config.js 
echo '{ "path": "cz-customizable" }' > ~/.czrc
复制代码

在电脑根目录 .cz-config.js 里面能够自定如下内容.cz-config.js ,如今任何git仓库，并使用git cz代替git commit，您会发现commitizen提示。

看图配置完成，修该任意执行

git add -A
git  cz
复制代码

局部项目配置

npm i -g commitizen
npm i -D cz-customizable
复制代码

在项目的的package.json中配置

"scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "commit": "git-cz"  },
"config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  }
复制代码

同时在~/（电脑的根目录） 或项目目录下建立 .cz-config.js 文件输入的内容与全局.cz-config.js 的同样

git add -A
yarn commit || npm run commit
复制代码

看图

如何配置itmoji-cli

全局安装

npm i -g gitmoji-cli
复制代码

在本的项目目录下的

gitmoji -i
git add -A
git commit
复制代码

就会出现下图

如下是个人提交记录， 这是个人git提交repository

如下是详细的Git repository 信息,欢迎浏览讨论 以上代码都在（该repository上）

commitizen
cz-coustomizable
gitmoji