用Node構建工具來約束你的git操作，讓你生無可戀。
一、前言
今天看到小夥伴寫的《你可能會忽略的git提交規範》，不禁想起自己那些不忍直視的提交資訊，當然也不能怪自己，誰叫我能夠隨意的commit呢?上述文章中已經介紹了一些相關的工具以及規範，這裡我再補充一些操作，以下內容算是一個簡單的教程吧。
二、ESLint
既然要規範起來，當然要從最基本的JS程式碼規範開始，這裡我們選擇eslint作為程式碼規範檢測工具。
1、安裝ESLint
cnpm i -g eslint
複製程式碼2、設定配置檔案
在根目錄下建立.eslintrc.js檔案，裡面的配置比較的多，對於不同環境的配置也不太一樣，可以檢視官網文件，這裡我們就簡單配置一下普通JS檔案的檢測：
module.exports = {
extends: 'eslint:recommended',
env: {
browser: true,
node: true,
commonjs: true,
es6: true,
mocha: true
},
root: true,
rules: {
'no-console': 'off'
}
}
複製程式碼3、驗證程式碼質量與規範
我們可以建立一個app.js檔案，輸入一些內容，然後通過以下命令執行驗證：
eslint app.js
複製程式碼如果你的程式碼不符合要求，那麼控制檯並會提示你哪些地方存在問題。
其實對於eslint大家再熟悉不過了，各種專案的腳手架工具裡都通過webpack整合了它的功能，所以當你在執行npm run dev，如果程式碼不符合eslint的規範，你是不能夠完成dev構建的。
但是有時候吧，煩不了，直接git add儲存一下再說。現在我知道，這並不是一個好習慣，所以要改。
三、Husky和lint-staged
對的，你沒看錯，是Husky（哈士奇）。正如Husky官方文件中所說，
Git hooks made easy
對於這個hook這個詞類比一下Vue中的生命週期，你就知道咋回事了。所以接下來，我們只需要通過這個庫，就可以在git add 之前做一些不可描述的事了（所以你再仔細回味一下這個名字，是不是很皮）。
有了這個還不夠，我們還需要lint-staged，它的作用文件中描述的也很清楚:
Run linters on git staged files
1、安裝依賴
cnpm i -D husky@next lint-staged
複製程式碼2、配置package.json
"lint-staged": {
"*.js": [
"eslint"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
複製程式碼接下來，再也不能那麼隨意的執行git的add操作了。
四、validate-commit-msg
對於這個庫的使用，前面所說的文章中已經介紹的很詳細了，包括提供的一些Angular commit規範的參考文章。這裡我們同樣需要在husky中配置一下：
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "validate-commit-msg"
}
}
複製程式碼到這裡基本上一個小型的程式碼規範化提交工作流程完成了。
五、生成日誌
當然，你如果看過一些開源專案，在他們的專案中都有一個CHNAGELOG.md檔案，這個檔案主要是用來記錄專案更新迭代的資訊。這裡我們可以採用conventional-changelog來生成日誌檔案:
1、安裝依賴
cnpm i -D conventional-changelog
cnpm i -g conventional-changelog-cli
複製程式碼2、配置package.json
"scripts": {
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
"addChangelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
}
複製程式碼接下來你可以通過npm run changelog生成完整的日誌，前提是你的提交要符合Angular Commit標準。
六、寫在結尾
這裡只是簡單的介紹了兩種強制驗證的情況，實際上我們也可以在pre-commit中加入csslint，當然肯定還有更多的例子，歡迎小夥伴們分享自己的慘痛經歷。
喜歡本文的小夥伴們,歡迎關注我的訂閱號超愛敲程式碼,檢視更多內容.
