如何讓你的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