目前基本使用三款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
檔名是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
,很方便地配置好了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一起使用,安裝依賴:
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.`)}
` +
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 說明,進行檢查。
使用 husky 要注意,對應屬性名已經改為HUSKY_GIT_PARAMS , 而不是原始的 GIT_PARAMS 環境變數。