目前基本使用三款js代碼質量檢查工具： jslint, jshint, eslint。許多IDE里面也有對應的檢查插件，在每次ctrl + s 保存文件的時候，檢查當前文件是否符合規范，保證代碼質量。
許多團隊都會指定一套代碼規范code review,更加嚴格的檢查每次代碼修改。 也可以在git commit之前，檢查代碼，保證所有提交到版本庫中的代碼都是符合規范的，
在看vue源碼時，不免修改代碼，就會觸發里面配置好的鈎子函數。於是，仔細研究了一下vue配置方法，可以發現配置非常簡單。
git 鈎子文檔上介紹非常詳細，git init后，在.git/hooks文件中，有一些.simple結尾的鈎子示例腳本，如果想啟用對應的鈎子函數，只需手動刪除后綴。所以，列出兩種配置方法：
1. 手動修改鈎子文件
按照文檔上，配置鈎子腳本，修改hooks中文件名對應的鈎子文件，啟用鈎子。使用shell腳本檢查，可以參考vue1.x 里面如何使用
``` !/usr/bin/env bash # get files to be linted
FILES=$(git diff --cached --name-only | grep -E '^src|^test/unit/specs|^test/e2e')
# lint them if any
if [[ $FILES ]]; then
./node_modules/.bin/eslint $FILES
fi
<p>文件名是<code>pre-commit</code>,在commit 之前啟用的鈎子函數， 利用 <code>git diff</code>查看當前有哪些文件修改過，只對指定文件夾中修改的文件使用eslint進行代碼檢查，漸進式對整個項目實現代碼規范。</p>
<p>腳本寫好后，不用每次都手動復制到<code>.git/hooks</code>目錄下，只需對當前文件創建軟連接，到指定目錄，<a href="https://github.com/vuejs/vue/blob/v1.0.26/package.json#L29" rel="nofollow noreferrer">在package.json中配置腳本命令</a>，</p>
```"scripts": {
"install-hook": "ln -s ../../build/git-hooks/pre-commit .git/hooks/pre-commit",
}
在項目初始化后， 執行npm run install-hook,很方便地配置好了pre-commit 鈎子
2. 利用yorkie or husky + lint-staged 構建鈎子
在 vue最新的版本中，已經使用尤大改寫的youkie， youkie實際是fork husky,然后做了一些定制化的改動， 使得鈎子能從package.json的 "gitHooks"屬性中讀取，
```{ "gitHooks": { "pre-commit": "foo" } } ```使用方法跟husky 類似，可以查看husky 文檔，介紹非常詳細。
npm install husky --save-dev
# or npm install yorkie --save-dev
安裝完成后，可以發現已經改寫了hooks 目錄中的文件，只需在package.json 中配置對應鈎子要執行的腳本。
husky 配置：
// package.json
{
"husky": {
"hooks": {
"pre-commit": "npm test",
"pre-push": "npm test",
"...": "..."
}
}
}
回頭看看，vue中如何配置
// package.json
"gitHooks": {
"pre-commit": "lint-staged",
"commit-msg": "node scripts/verify-commit-msg.js"
}
"lint-staged": {
"*.js": [
"eslint --fix",
"git add"
]
}
前面提到，利用git diff,只lint當前改動的文件，lint-staged就非常准確的解決了這一問題，從這個包名，就可以看出，Run linters on git staged files，只針對改動的文件進行處理。
結合husky一起使用，安裝依賴：
修改package.json 文件
{
+ "husky": {
+ "hooks": {
+ "pre-commit": "lint-staged"
+ }
+ },
+ "lint-staged": {
+ "*.js": ["eslint --fix", "git add"]
+ }
}
使用了eslint,需要配置.eslintrc, lint-staged還有一個好處，可以在lint后，更加靈活，執行其他腳本，嘗試進行修改錯誤，比如 eslint --fix 檢查后並修復錯誤。
上面列出的vue 文件使用了類似的配置，另外增加了 commit-msg 鈎子，對提交說明進行檢查，在 scripts/verify-commit-msg.js文件中可以找到檢查腳本，
const chalk = require('chalk')
const msgPath = process.env.GIT_PARAMS
const msg = require('fs').readFileSync(msgPath, 'utf-8').trim()
const commitRE = /^(revert: )?(feat|fix|polish|docs|style|refactor|perf|test|workflow|ci|chore|types|build)(\(.+\))?: .{1,50}/
if (!commitRE.test(msg)) {
console.log()
console.error(
` ${chalk.bgRed.white(' ERROR ')} ${chalk.red(`invalid commit message format.`)}\n\n` +
chalk.red(` Proper commit message format is required for automated changelog generation. Examples:\n\n`) +
` ${chalk.green(`feat(compiler): add 'comments' option`)}\n` +
` ${chalk.green(`fix(v-model): handle events on blur (close #28)`)}\n\n` +
chalk.red(` See .github/COMMIT_CONVENTION.md for more details.\n`) +
chalk.red(` You can also use ${chalk.cyan(`npm run commit`)} to interactively generate a commit message.\n`)
)
process.exit(1)
}
利用process.env.GIT_PARAMS 找到目錄，讀取msg 說明，進行檢查。
使用 husky 要注意，對應屬性名已經改為HUSKY_GIT_PARAMS , 而不是原始的 GIT_PARAMS 環境變量。