紧接上文说到vite+vue3代码风格及格式化操作,前文主要针对本地化配置格式化。为了更加规范仓库代码,本文引入介绍commitlint等工具,在代码commit的时候再次校验为代码规范再上一层保障。
安装commitlint及commitlint配置包
npm install @commitlint/cli @commitlint/config-conventional -D
添加@commitlint/config-conventional包的目的是使用基础配置,另外也可根据实际需要添加配置文件。例如:commitlint.config.js、.commitlintrc.js、.commitlintrc、.commitlintrc.json、.commitlintrc.yml或package.json中的commit配置
安装husky
#使用下述命令会在根目录下自动生成.husky文件夹,并创建一个pre-commit钩子实例
npx husky-init && npm install # npm
npx husky-init && yarn # Yarn 1
yarn dlx husky-init --yarn2 && yarn # Yarn 2+
pnpm dlx husky-init && pnpm install # pnpm
还可以使用如下方式安装husky:
npm install husky --save-dev #安装依赖
npx --no-install husky install #创建.husky目录(使用--no-install的目的是让npx强制使用node_modules目录下的husky依赖包)
npm pkg set scripts.prepare="husky install" #在package.json中添加初始化命令(此步骤可以省略,但是如果是多人开发会很有必要,初始化仓库可以执行该命令)
npx --no-instal husky add .husky/pre-commit "npm run lint" #快速创建pre-commit钩子
添加commit-msg hook(该hook会在commitlint未通过时提示相关信息)
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'
如何判断上述步骤是否成功可以使用简单的test命令测试
npx commitlint --from HEAD~1 --to HEAD --verbose
执行commit之后如果出现类似的信息即可认为配置成功
git commit -m "foo: this will fail"
husky > commit-msg (node v10.1.0)
No staged files match any of provided globs.
⧗ input: foo: this will fail
✖ type must be one of [build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test] [type-enum]
✖ found 1 problems, 0 warnings
ⓘ Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint
husky > commit-msg hook failed (add --no-verify to bypass)
添加commitizen
commitizen工具可以通过交互式撰写符合Commit Message规范的Commit Message
npm install commitizen -D
#or
yarn add commitizen -D
执行如下命令生成符合Angular的Commit message格式提交规范(使用其他规范可以跳过此步骤)
npx --no-install commitizen init cz-conventional-changelog --save-dev --save-exact
!!!若使用上述命令,需要在package.json中配置一下commitizen适配器
{
...
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
...
}
另外在package.json中的scripts中添加commit脚本替代git commit
...
"scripts": {
"cz": "git add . && git-cz",
"prepare": "husky install"
}
...
执行完上述操作就可以使用脚本提交代码
配置commitlint
在根目录下新建文件.commitlintrc.js:
// 具体配置可参考https://commitlint.js.org/#/reference-rules自行配置不做详细说明
module.exports = {
ignores: [(commit) => commit.includes('init')],
extends: ['@commitlint/config-conventional'],
rules: {
'header-max-length': [2, 'always', 72],
'scope-case': [2, 'always', 'lowerCase'],
'subject-empty': [2, 'never'],
'subject-case': [2, 'always', ['lower-case', 'sentence-case', 'start-case', 'pascal-case', 'upper-case']],
'subject-full-stop': [2, 'never', '.'],
'type-empty': [2, 'never'],
'type-case': [2, 'always', 'lowerCase'],
'type-enum': [2, 'always', ['feat', 'fix', 'docs', 'style', 'perf', 'chore', 'build']]
]
}
}
commitizen输出汉化
安装commitlint-config-cz插件配置commit message
npm install commitlint-config-cz -D #cz配置插件
#or
yarn add commitlint-config-cz -D #cz配置插件
#and
npm install cz-customizable -D #cz适配器插件
#or
yarn add cz-customizable -D #cz适配器插件
在项目根目录下新建.cz-config.js文件
// 配置文件可参考https://github.com/leoforfree/cz-customizable/blob/HEAD/cz-config-EXAMPLE.js自行配置不做详细说明
module.exports = {
types: [
{ value: ':sparkles: feat', name: '✨ feat: 一项新功能' },
{ value: ':bug: fix', name: '🐛 fix: 修复一个Bug' },
{ value: ':memo: docs', name: '📝 docs: 文档变更' },
{ value: ':lipstick: style', name: '💄 style: 代码风格,格式修复' },
{ value: ':zap: perf', name: '⚡️ perf: 代码优化,改善性能' },
{ value: ':rocket: chore', name: '🚀 chore: 变更构建流程或辅助工具' },
{ value: ':package: build', name: '📦️ build: 变更项目构建或外部依赖' }
],
messages: {
type: '请选择提交类型(必填):',
subject: '请简要描述提交(必填):',
confirmCommit: '确定提交此说明吗?'
},
skipQuestions: ['scope', 'body', 'breaking', 'footer']
}
创建完.cz-config.js
- 返回package.json修改commitizen适配器选项
...
"config": {
"commitizen": {
"path": "node_modules/cz-customizable"
}
},
...
- 若之前使用Angular的Commit message格式提交规范,需修改.commitlintrc.js文件,节约空间可以卸载掉@commitlint/config-conventional插件(用不上了)
module.exports = {
...
extends: [],
...
}
集成 gitmoji
npm install commitlint-config-gitmoji -D
#or
yarn add commitlint-config-gitmoji -D
修改.commitlintrc.js
module.exports = {
...
extends: ['gitmoji'],
...
}
使用gitmoji的时候可能会遇到如下问题:
- 报错找不到gitmojis.json 两种解决方案:
在node_modules/commitlint-plugin-gitmoji/lib下添加gitmojis.json
在根目录下添加gitmojis.json并修改.cz-config.jsprocess.env.GITMOJI_PATH = '.gitmoji.json' modules.exports={ ... }
- 偶遇校验不通过需要严格按照上述事例配置.commitlintrc.js(列出来的rule勿改)
安装lint-stage
文件过滤器,每次只校验commit的文件
npm install lint-staged -D
#or
yarn add lint-stage -D
修改.husky/pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged
修改package.json
// 具体使用可参考lint-stage介绍:https://github.com/okonet/lint-staged#readme
...
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"eslint --fix", //eslint校验
"prettier --write" //prettier格式化
],
"*.vue": [
"eslint --fix",
"prettier --write"
]
}
...
有关eslint及prettier的问题可以参见上篇文章。vite+vue3代码风格校验及格式化
以上就是本文全部内容,由于项目成本关系没有引入其他工具,像文件校验,commit-log自动添加,stylelint等,有兴趣的朋友可以自行尝试。