摘要：目前基本使用三款代碼質(zhì)量檢查工具。使用腳本檢查，可以參考里面如何使用文件名是在之前啟用的鉤子函數(shù)，利用查看當(dāng)前有哪些文件修改過，只對(duì)指定文件夾中修改的文件使用進(jìn)行代碼檢查，漸進(jìn)式對(duì)整個(gè)項(xiàng)目實(shí)現(xiàn)代碼規(guī)范。

目前基本使用三款js代碼質(zhì)量檢查工具： jslint, jshint, eslint。許多IDE里面也有對(duì)應(yīng)的檢查插件，在每次ctrl + s 保存文件的時(shí)候，檢查當(dāng)前文件是否符合規(guī)范，保證代碼質(zhì)量。
許多團(tuán)隊(duì)都會(huì)指定一套代碼規(guī)范code review,更加嚴(yán)格的檢查每次代碼修改。 也可以在git commit之前，檢查代碼，保證所有提交到版本庫(kù)中的代碼都是符合規(guī)范的，

在看vue源碼時(shí)，不免修改代碼，就會(huì)觸發(fā)里面配置好的鉤子函數(shù)。于是，仔細(xì)研究了一下vue配置方法，可以發(fā)現(xiàn)配置非常簡(jiǎn)單。

git 鉤子文檔上介紹非常詳細(xì)，git init后，在.git/hooks文件中，有一些.simple結(jié)尾的鉤子示例腳本，如果想啟用對(duì)應(yīng)的鉤子函數(shù)，只需手動(dòng)刪除后綴。所以，列出兩種配置方法：

按照文檔上，配置鉤子腳本，修改hooks中文件名對(duì)應(yīng)的鉤子文件，啟用鉤子。使用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 之前啟用的鉤子函數(shù)， 利用 git diff查看當(dāng)前有哪些文件修改過，只對(duì)指定文件夾中修改的文件使用eslint進(jìn)行代碼檢查，漸進(jìn)式對(duì)整個(gè)項(xiàng)目實(shí)現(xiàn)代碼規(guī)范。

腳本寫好后，不用每次都手動(dòng)復(fù)制到.git/hooks目錄下，只需對(duì)當(dāng)前文件創(chuàng)建軟連接，到指定目錄，在package.json中配置腳本命令，

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

在項(xiàng)目初始化后， 執(zhí)行npm run install-hook,很方便地配置好了pre-commit 鉤子

在 vue最新的版本中，已經(jīng)使用尤大改寫的youkie， youkie實(shí)際是fork husky,然后做了一些定制化的改動(dòng)， 使得鉤子能從package.json的 "gitHooks"屬性中讀取，

{
  "gitHooks": {
    "pre-commit": "foo"
  }
}

使用方法跟husky 類似，可以查看husky 文檔，介紹非常詳細(xì)。

 npm install husky --save-dev
 # or npm install yorkie --save-dev

安裝完成后，可以發(fā)現(xiàn)已經(jīng)改寫了hooks 目錄中的文件，只需在package.json 中配置對(duì)應(yīng)鉤子要執(zhí)行的腳本。
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當(dāng)前改動(dòng)的文件，lint-staged就非常準(zhǔn)確的解決了這一問題，從這個(gè)包名，就可以看出，Run linters on git staged files，只針對(duì)改動(dòng)的文件進(jìn)行處理。
結(jié)合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還有一個(gè)好處，可以在lint后，更加靈活，執(zhí)行其他腳本，嘗試進(jìn)行修改錯(cuò)誤，比如 eslint --fix 檢查后并修復(fù)錯(cuò)誤。

上面列出的vue 文件使用了類似的配置，另外增加了 commit-msg 鉤子，對(duì)提交說明進(jìn)行檢查，在 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.`)}

` +
    chalk.red(`  Proper commit message format is required for automated changelog generation. Examples:

`) +
    `    ${chalk.green(`feat(compiler): add "comments" option`)}
` +
    `    ${chalk.green(`fix(v-model): handle events on blur (close #28)`)}

` +
    chalk.red(`  See .github/COMMIT_CONVENTION.md for more details.
`) +
    chalk.red(`  You can also use ${chalk.cyan(`npm run commit`)} to interactively generate a commit message.
`)
  )
  process.exit(1)
}

利用process.env.GIT_PARAMS 找到目錄，讀取msg 說明，進(jìn)行檢查。

使用 husky 要注意，對(duì)應(yīng)屬性名已經(jīng)改為HUSKY_GIT_PARAMS , 而不是原始的 GIT_PARAMS 環(huán)境變量。