目前基本使用三款js程式碼質量檢查工具： jslint, jshint, eslint。許多IDE裡面也有對應的檢查外掛，在每次ctrl + s 儲存檔案的時候，檢查當前檔案是否符合規範，保證程式碼質量。
許多團隊都會指定一套程式碼規範code review,更加嚴格的檢查每次程式碼修改。 也可以在 git commit之前，檢查程式碼，保證所有提交到版本庫中的程式碼都是符合規範的，

在看vue原始碼時，不免修改程式碼，就會觸發裡面配置好的鉤子函式。於是，仔細研究了一下vue配置方法，可以發現配置非常簡單。

git 鉤子文件上介紹非常詳細，git init後，在.git/hooks

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
 

```

檔名是pre-commit,在commit 之前啟用的鉤子函式， 利用 git diff檢視當前有哪些檔案修改過，只對指定資料夾中修改的檔案使用eslint進行程式碼檢查，漸進式對整個專案實現程式碼規範。

指令碼寫好後，不用每次都手動複製到.git/hooks目錄下，只需對當前檔案建立軟連線，到指定目錄，在package.json中配置指令碼命令，

"scripts": { "install-hook": "ln -s ../../build/git-hooks/pre-commit .git/hooks/pre-commit", }

在專案初始化後， 執行npm run install-hook

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一起使用，安裝依賴：

npm install --save-dev lint-staged 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 環境變數。

原文地址：https://segmentfault.com/a/1190000016750078