git hook (git鉤子||git 回調(diào))
使用 husky + commitlint 檢查提交描述是否符合規(guī)范要求
使用git hook去校驗(yàn)我們的提交信息诱渤，需要用到兩個(gè)工具
1抛丽、commitlint：用于檢查提交信息
2捅位、husky：是git hooks工具
注意：npm需要在7.x以上版本
commitlint
1拜轨、安裝依賴
npm install --save-dev @commitlint/config-conventional@12.1.4 @commitlint/cli@12.1.4
2印颤、創(chuàng)建commitlint.config.js文件事甜，也可以直接在終端輸入
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
3馒疹、打開(kāi)commitlint.config.js佳簸，增加配置項(xiàng)（）
module.exports = {
// 繼承的規(guī)則
extends: ['@commitlint/config-conventional'],
// 定義規(guī)則類型
rules: {
// type 類型定義，表示 git 提交的 type 必須在以下類型范圍內(nèi)
'type-enum': [
2,
'always',
[
'feat', // 新功能 feature
'fix', // 修復(fù) bug
'docs', // 文檔注釋
'style', // 代碼格式(不影響代碼運(yùn)行的變動(dòng))
'refactor', // 重構(gòu)(既不增加新功能颖变，也不是修復(fù)bug)
'perf', // 性能優(yōu)化
'test', // 增加測(cè)試
'chore', // 構(gòu)建過(guò)程或輔助工具的變動(dòng)
'revert', // 回退
'build' // 打包
]
],
// subject 大小寫(xiě)不做校驗(yàn)
'subject-case': [0]
}
}
注意：確保格式是utf-8,否則會(huì)報(bào)錯(cuò)
husky
1生均、安裝依賴
npm install husky@7.0.1 --save-dev
2、啟動(dòng)hooks腥刹，生成.husky文件夾
npx husky install
3马胧、在package.json中生成prepare指令（npm需要在7.x以上版本）
npm set-script prepare "husky install"
4、執(zhí)行prepare指令
npm run prepare
5衔峰、添加commitlint的hook到husky中佩脊，并指令在commit-msg的hooks下執(zhí)行npx --no-install commitlint --edit "$1"的指令
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
6、
至此垫卤，不符合規(guī)范的commit將不再可提交
通過(guò) pre-commit 檢測(cè)提交時(shí)代碼規(guī)范
我們期望通過(guò) husky 監(jiān)測(cè) pre-commit 鉤子威彰，在該鉤子下執(zhí)行 npx eslint --ext .js,.vue src 指令來(lái)去進(jìn)行相關(guān)檢測(cè)：
1、執(zhí)行 npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src" 添加 commit 時(shí)的 hook （npx eslint --ext .js,.vue src 會(huì)在執(zhí)行到該 hook 時(shí)運(yùn)行）（window用戶直接2）
2穴肘、手動(dòng)創(chuàng)建pre-commit文件歇盼，并填入以下內(nèi)容
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx eslint --ext .js,.vue src
3、關(guān)閉 VSCode 的自動(dòng)保存操作
4梢褐、修改一處代碼旺遮，使其不符合 ESLint 校驗(yàn)規(guī)則
5、執(zhí)行 提交操作 會(huì)發(fā)現(xiàn)盈咳，拋出一系列的錯(cuò)誤耿眉，代碼無(wú)法提交
如果拋出很多的 ESLint 錯(cuò)誤怎么辦，有沒(méi)有辦法可以 ”自動(dòng)“ 幫助他修復(fù)對(duì)應(yīng)的問(wèn)題鱼响，并且完成提交呢鸣剪？
lint-staged 自動(dòng)修復(fù)格式錯(cuò)誤
pre-commit 處理了 檢測(cè)代碼的提交規(guī)范問(wèn)題，當(dāng)我們進(jìn)行代碼提交時(shí)，會(huì)檢測(cè)所有的代碼格式規(guī)范 筐骇。
但是這樣會(huì)存在兩個(gè)問(wèn)題：
1债鸡、我們只修改了個(gè)別的文件，沒(méi)有必要檢測(cè)所有的文件代碼格式
2铛纬、它只能給我們提示出對(duì)應(yīng)的錯(cuò)誤厌均，我們還需要手動(dòng)的進(jìn)行代碼修改
需要使用另外一個(gè)插件 lint-staged ！
npm i lint-staged --legacy-peer-deps
lint-staged 可以讓你當(dāng)前的代碼檢查 只檢查本次修改更新的代碼告唆，并在出現(xiàn)錯(cuò)誤的時(shí)候棺弊，自動(dòng)修復(fù)并且推送
lint-staged 無(wú)需單獨(dú)安裝，我們生成項(xiàng)目時(shí)擒悬，vue-cli 已經(jīng)幫助我們安裝過(guò)了模她，所以我們直接使用就可以了
1、修改 package.json 配置
"lint-staged": {
"src/**/*.{js,vue}": [
"eslint --fix",
"git add"
]
}
2懂牧、修改 .husky/pre-commit 文件
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged