編碼規(guī)范，代碼提交規(guī)范全家桶之husky+lint-staged+commitlint
背書(shū)簡(jiǎn)介
新版husky的工作原理
husky install將git hooks的目錄指定為.husky/，然后使用husky add命令向.husky/中添加hook。通過(guò)這種方式我們就可以只添加我們需要的git hook，而且所有的腳本都保存在了一個(gè)地方（.husky/目錄下）因此也就不存在同步文件的問(wèn)題了。新版husky + lint-staged實(shí)踐
1.安裝husky
npm i husky --save-dev2. 在package.json 中添加 prepare 腳本
{
"scripts": {
"prepare": "husky install"
}
}3. 執(zhí)行prepare腳本
npm run prepare執(zhí)行
husky install命令，該命令會(huì)創(chuàng)建.husky/目錄并指定該目錄為git hooks所在的目錄。
4. 添加git hooks，運(yùn)行一下命令創(chuàng)建git hooks
npx husky add .husky/pre-commit "npm run lint"運(yùn)行完該命令后我們會(huì)看到.husky/目錄下新增了一個(gè)名為pre-commit的shell腳本。也就是說(shuō)在在執(zhí)行g(shù)it commit命令時(shí)會(huì)先執(zhí)行pre-commit這個(gè)腳本。pre-commit腳本內(nèi)容如下：
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npm run lint
該腳本的功能就是執(zhí)行npm run lint這個(gè)命令
5. 添加commit-msg腳本
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'commit-msg腳本內(nèi)容如下：
#!/bin/sh
"$(dirname "$0")/_/husky.sh"
npx --no-install commitlint --edit "$1"lint-stagednpm i lint-staged --save-dev7. 在 package.json 文件中配置 lint 的命令
{
"scripts": {
"lint": "lint-staged",
}
}8. 在 package.json 或者在根目錄中創(chuàng)建.lintstagedrc或者lint-staged.config.js或者 lint-staged.config.js文件中配置 lint 的命令
從 v3.1 開(kāi)始，您現(xiàn)在可以使用不同的方式進(jìn)行 lint-staged 配置：
lint-staged 在你的對(duì)象 package.json
.lintstagedrc JSON或YML格式的文件
lint-staged.config.js JS格式的文件
使用 --config 或 -c 標(biāo)志傳遞配置文件
1、例子：在package.json文件中配置
"lint-staged": {
"src/**/*.{js.vue}": ["prettier --write","esslint --cache --fix","git add"]
}
2、例子：在lint-staged.config.js文件中配置
"use strict";
module.exports = {
ignore: ["package-lock.json", "CHANGELOG.md"],
linters: {
"*.ts": ["prettier --write", "eslint --fix", "git add"],
"*.js": ["prettier --write", "eslint --cache --fix", "git add"],
"*.vue": ["prettier --write", "eslint --cache --fix", "git add"],
"*.{json,md,yml,css}": ["prettier --write", "git add"]
}9.定制提交規(guī)范
npm install --save-dev @commitlint/config-conventional @commitlint/cli
// 生成配置文件commitlint.config.js，當(dāng)然也可以是 .commitlintrc.js
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js
<type>: <subject>
upd：更新某功能（不是 feat, 不是 fix）
feat：新功能（feature）
fix：修補(bǔ)bug
docs：文檔（documentation）
style：格式（不影響代碼運(yùn)行的變動(dòng)）
refactor：重構(gòu)（即不是新增功能，也不是修改bug的代碼變動(dòng)）
test：增加測(cè)試
chore：構(gòu)建過(guò)程或輔助工具的變動(dòng)
git commit -m 'feat: 增加 xxx 功能'
git commit -m 'bug: 修復(fù) xxx 功能''name:[0, 'always', 72]'，數(shù)組中第一位為level，可選0,1,2，0為disable，1為warning，2為error，第二位為應(yīng)用與否，可選always|never，第三位該rule的值。具體配置例子如下：module.exports = {
extends: [
"@commitlint/config-conventional"
],
rules: {
'type-enum': [2, 'always', [
'upd', 'feat', 'fix', 'refactor', 'docs', 'chore', 'style', 'revert'
]],
'type-case': [0],
'type-empty': [0],
'scope-empty': [0],
'scope-case': [0],
'subject-full-stop': [0, 'never'],
'subject-case': [0, 'never'],
'header-max-length': [0, 'always', 72]
}
};10. 安裝eslint和prettier相關(guān)代碼格式化和校驗(yàn)插件，項(xiàng)目根目錄下面配置eslint和prettier規(guī)則，然后就可以在git提交代碼的時(shí)候進(jìn)行代碼校驗(yàn)了。
- 例子：正確的提交
- 例子 ：錯(cuò)誤的提交
評(píng)論
圖片
表情