前言
公司前端團隊百廢待興，很多流程都沒有完善起來株旷，這不最近就接到了一個小任務(wù)：規(guī)范化大家代碼提交的格式以及在提交前保證代碼的質(zhì)量再登。這里的質(zhì)量并沒有做到單元測試覆蓋率100%，集成測試全部通過灾常，而是簡單地通過語法檢查霎冯，單元測試的覆蓋問題在后續(xù)的項目完善中會加進來，所以今天只是講兩點：
- log提交格式規(guī)范化
- Eslint檢查100%通過
尋找解決方案
之前在上一家公司做過SVN的代碼提交規(guī)范化钞瀑，使用python在SVN服務(wù)器上做語法檢查沈撞，并且在客戶端提交log的時候可以自動化的填寫格式到log框里然后只需要按照給定的格式來寫就行了。
但是git的思想與SVN不一樣雕什，git的每次提交都是在本地完成的缠俺，只有最后的push才會和服務(wù)器交互显晶，所以不可能在服務(wù)器這邊寫腳本來檢查。
大家都知道git有hooks的概念壹士，在每個倉庫中都有.git/hooks/這個目錄磷雇，hooks可以在git中指定的一些重要節(jié)點上調(diào)用對應(yīng)的鉤子函數(shù)(文件)，一想到這個就覺得應(yīng)該可以使用這個躏救。
但是后來失望了唯笙，因為本地倉庫的hooks的代碼不能上傳到服務(wù)器上，大家都共享不了這些配置盒使，并且這些配置在git初始化的時候都是默認的崩掘，總不能每次下載代碼之后還需要手工去修改這些hooks文件吧。
所以直接使用這個本地的hooks貌似不可行少办，于是谷歌搜一搜苞慢，終于找到一個神器：ghooks。
ghooks簡單介紹
該軟件包是為nodejs打造的英妓，可以幫助我們實現(xiàn)本地的git hooks挽放，支持的git hooks的所有節(jié)點，關(guān)鍵它有很簡單的配置蔓纠。其配置在package.json文件中辑畦，所以npm有的命令都可以使用
如何規(guī)范化log的提交格式
有了ghooks這個神器，那么我們知道只需要在commit-msg的階段就可以檢查提交日志的格式贺纲，不符合格式即刻駁回航闺。那么有沒有插件可以幫助我們檢查代碼格式呢？
萬能的NPM圈中必然存在這么的猴誊，Angular代碼提交指定了一套嚴格的流程潦刃，從而衍生出了一些插件來幫助開發(fā)者log的規(guī)范化，所以這時隆重介紹validate-commit-msg懈叹，這款插件正是針對Angular代碼提交的規(guī)范做的一款檢查的插件乖杠。
于是我們有了這兩款神器，應(yīng)該可以滿足我們的要求了澄成。開始配置：
package.json的配置
我們給出的配置是：(給出的是需要配置的一些需要改的字段)
"scripts": {
"lint": "eslint ./ --cache --fix --ignore-pattern .gitignore",
"precommit-msg": "echo Pre-commit checking...please wait && exit 0"
},
"config": {
"validate-commit-msg": {
"types": [
"feat",
"fix",
"docs",
"style",
"refactor",
"perf",
"test",
"chore",
"revert"
],
"warnOnFail": false,
"maxSubjectLength": 100,
"subjectPattern": ".+",
"subjectPatternErrorMsg": "subject does not match subject pattern!",
"helpMessage": ""
},
"ghooks": {
"pre-commit": "npm run precommit-msg && npm run lint",
"commit-msg": "validate-commit-msg"
}
更加詳細的可以參考：demo-for-ghooks
哈哈胧洒，貌似大功告成了~~~~
進一步優(yōu)化
查看Angular給的代碼提交規(guī)范，可以發(fā)現(xiàn)貌似很長的一大段標(biāo)準(zhǔn)墨状，有的時候我們總是記不住格式以及那些字段的含義卫漫，那么怎么辦呢？
還好git hooks提供了一個重要的節(jié)點:prepare-commit-msg肾砂，這個節(jié)點可以提供給我們在打開git log編輯器之前生成一個默認的git log模板列赎。于是NPM中又有另外一個神器來生成這些信息：prepare-commit-msg-angular。
該神器可以生成一個很標(biāo)準(zhǔn)的log模板镐确，如下：
#???????????????????????????????????????????????????????????????????????????????????????????????????
# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
# On branch develop
# Your branch is up-to-date with 'origin/develop'.
#
# Changes to be committed:
# modified: package.json
#
# ------------------------ >8 ------------------------
# <type>(<scope>): <subject>
# <BLANK LINE>
# <body>
# <BLANK LINE>
# <footer>
#---
# TYPE must be one of the following:
# - feat: A new feature (will appear in CHANGELOG)
# - fix: A bug fix (will appear in CHANGELOG)
# - docs: Documentation only changes
# - style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
# - refactor: A code change that neither fixes a bug nor adds a feature
# - perf: A code change that improves performance (will appear in CHANGELOG)
# - test: Adding missing tests
# - chore: Changes to the build process or auxiliary tools and libraries such as documentation generation
#
# SCOPE could be anything specifying place of the commit change.
# For example $location, $browser, $compile, $rootScope, ngHref, ngClick, ngView, etc...
#
# SUBJECT contains succinct description of the change:
# - use the imperative, present tense: "change" not "changed" nor "changes"
# - do not capitalize first letter
# - no dot (.) at the end
#---
# https://github.com/ajoslin/conventional-changelog/blob/master/conventions/angular.md
于是你在寫日志的時候哪些字段忘記了可以參考下面的提示包吝，如果這個你覺得太麻煩饼煞，還有一款可交互的日志填寫神器：commitizen。
該神器可以交互地提示你填寫git log诗越，唯一一個我在應(yīng)用中覺得缺點的是：每次都是先書寫完git log信息后才執(zhí)行g(shù)hooks那些檢查砖瞧，此時如果我的Eslint或者單元測試失敗的話那么你剛才寫的檢查就全白寫了。嚷狞。块促。。
所以最后就沒有集成該插件進去床未。
完整的配置可以參考：https://github.com/linxiaowu66/demo-for-ghooks
其中prepare-commit-msg-angular和validate-commit-msg有一個地方不匹配褂乍，所以后來自己更新了一下源碼，參考：https://github.com/linxiaowu66/prepare-commit-msg-angular
缺點
該方案不支持使用Git UI工具即硼，只能使用命令行來提交代碼。所以想使用Git UI工具的請忽略~~~~
參考
- http://codeheaven.io/simple-git-hooks-with-ghooks/
- https://github.com/cmalard/prepare-commit-msg-angular
- https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks
最后
歡迎訪問我的個人博客主頁：豆米的博客
