- 安装校验工具
image-20240625200200058.png
husky是一个用于设置git hooks的工具，执行自定义的脚本程序
@commitlint/cli是一个命令行工具，用于校验git提交信息是否符合规范
@commitlint/config-conventional是一个配置，用来配置提交规范，结合上一个工具一起使用
npm i husky @commitlint/cli @commitlint/config-conventional -D
- 配置
package.jsonscripts
"scripts": {
"prepare": "husky install"
},
- 生成
.husky文件夹，会生成以下文件
npm run prepare
- 在
.husky文件夹下新建commit-msg文件，不要带后缀名，否则规则会不生效
- 修改
commit-msg文件的内容，下面这些
# 告诉系统该脚本应该使用哪个解释器来执行
#!/bin/sh
# $0是当前脚本的路径
# dirname用于获取这个路径的目录部分
# 这里获取到的是.husky/commit-msg
# /husky.sh 环境脚本路径，相对于上一步得到的目录，husky使用这个脚本来设置一些环境变量和执行必须要的初始化操作
. "$(dirname "$0")/_/husky.sh"
# 执行commitlint检查
npx --no-install commitlint --edit "$1"
- 项目根目录下新建
commitlintrc.cjs，提交信息必须以下面type-enum中的一种开头提交
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [
2,
'always',
[
'feat', // 新功能（feature）
'fix', // 修补bug
'perf', //性能优化
'docs', // 文档（documentation）
'style', // 格式（不影响代码运行的变动）
'refactor', // 重构（即不是新增功能，也不是修改bug的代码变动）
'test', // 增加测试
'revert', // 回滚
'config', // 构建过程或辅助工具的变动
'chore', // 其他改动
'build', //构建配置修改
'ci', //CI配置修改
'Chores' //其他更新
]
],
'subject-full-stop': [0, 'never'],
'subject-case': [0, 'never']
}
}
以下是两次带feat提交和不带feat提交的两个场景的测试
image-20240625201501622.png
收藏下这篇文章关于代码格式校验和代码提交很全
不使用husky，使用lint-staged
lint-staged是一个在git暂存文件上运行的校验工具，只会对暂存区的文件（变更的文件）进行校验
package.json配置
配置项解释：当暂存区文件改变时，*.{js,ts,vue}匹配.js .ts .vue结尾的文件[ "eslint --fix", "git add" ]当这些文件有变更后，会依次执行eslint --fix git add的命令，这种配置的好处是它会自动校验并修复代码中的格式问题
"gitHooks": {
// 提交之前进行进行代码检查和修复
"pre-commit": "lint-staged",
// 针对提交信息的校验
"commit-msg": "commitlint --config .commitlintrc.js -e -V"
},
"lint-staged": {
"*.{js,ts,vue}": [
"eslint --fix",
"git add"
],
"src/**/*.{vue,css,sass,scss}": [
"stylelint --fix",
"git add"
]
}
