1. 使用场景
多人协作开发一个项目的时候,代码风格和提交注释不统一规范的话会带来很多的麻烦,代码质量和风格(可以结合Prettier
,用法一样)约束使用eslint
,代码提交说明约束使用commitlint
相关依赖
2. eslint配置
npm i eslint -D
npx eslint --init
选择只检查错误并且提示就可以
是否使用typescript
运行环境可以按空格多选 结束之后会在根目录自动生成 .eslintrc.js 配置文件,如果需要一些额外的约束可以和团队成员一起制定
3. githooks
git的生命周期钩子,githooks就是在git执行commit、push、receive等操作时触发运行的脚本, githooks 默认保存在 .git/hooks 文件夹中
4. 新版本husky(7.0.1)新版本和旧版本配置天差地别
husky是一个操作githook的工具, Git 2.9
可以通过core.hooksPath
配置变量来更改脚本的目录, 新版本husky 以使用husky install
将git hooks
的目录指定为.husky/
npm install husky -D
npm set-script prepare "husky install" // npm 大于7 之后才有的命令,否则手动添加
这样就会在package.json
里面添加一条命令:
{
"scripts": {
"prepare": "husky install"
}
}
prepare
属于npm install
的生命周期,npm install
命令的生命周期会执行的脚本顺序:prepare > preinstall > install > postinstall
5. lint-staged
进行代码质量规范检查时,husky可以阻止不符合规范的commit,push等操作,git pre-commit钩子函数被调用时执行lint-staged,pre-commit 钩子在git commit 时就会触发。lint-staged对暂存区中有改动的文件根据ESLint 和 Prettier的规则进行检测,简单的格式错误会在提交检测时自动修复,代码低级bug错误会终止提交,提示报错位置。
执行npx husky add .husky/pre-commit "npx lint-staged"
会在.husky
下生成一个pre-commit
的shell
文件:
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged
package.json
文件添加配置
"lint-staged": {
// 需要约束的代码文件可以根据自己项目修改
"src/**/*.{ts,js,vue}": [
"eslint --cache --fix"
]
},
提交测试
6. commit-msg
执行npm i @commitlint/cli @commitlint/config-conventional -D
安装对git提交说明内容的校验 和校验的规范,不符合提交说明格式的禁止提交。在根目录创建.commitlintrc.js
配置文件
module.exports = {
extends: ["@commitlint/config-conventional"]
};
执行npx husky add .husky/commit-msg 'npx commitlint --edit "$1"'
会在.husky
下生成一个commit-msg
的shell
文件(创建失败的话可以自己手动新建这个文件,复制下面的内容):
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx commitlint --edit "$1"
提交测试
7. 安装提交说明辅助
npm i commitizen -D
// 如果使用了第8步骤的自定义提交说明可以忽略此步骤 安装并初始化cz-conventional-changelog
npx commitizen init cz-conventional-changelog --save-dev --save-exact //
package.json
文件会自动添加配置
{
"config": {
"commitizen": {
"path": "node_modules/cz-conventional-changelog"
}
}
}
提交测试
8. 自定义提交说明
使用自定义提交规范的话可以不用安装上面的@commitlint/config-conventional
和cz-conventional-changelog
依赖包
npm i commitlint-config-cz cz-customizable -D
npm set-script commit "git add -A && git-cz" // npm 大于7 之后才有的命令,否则手动添加
这样就会在package.json
里面添加一条命令:
{
"scripts": {
"commit": "git add -A && git-cz"
}
}
之后提交命令由git commit
更改为git-cz
,提交之前会自动执行 git add -A
,
- git add .:将文件的修改,文件的新建,添加到暂存区
- git add -u:将文件的修改、文件的删除,添加到暂存区
- git add -A:将文件的修改,文件的删除,文件的新建,添加到暂存区
- git add * :将当前目录下所有文件添加到暂存区,包括文件的修改,文件的新建。(此命令类似于 "git add .",区别在于上面几个命令都会根据.gitignore做过滤,但是git add * 会忽略.gitignore把任何文件都加入(不包含删除掉的文件))
更改package.json
下config
属性:
{
"config": {
"commitizen": {
"path": "node_modules/cz-customizable"
}
}
}
更改.commitlintrc.js
配置文件
module.exports = {
extends: ["cz"]
};
创建.cz-config.js
文件
'use strict'
module.exports = {
types: [
{
value: "💪 wip",
emoji: "💪",
name: '💪 WIP: 开发中'
},
{
value: "✨ feat",
emoji: "✨",
name: '✨ feat: 新功能'
},
{
value: "🐛 fix",
emoji: "🐛",
name: '🐞 fix: bug修复'
},
{
value: "🛠 refactor",
emoji: "🛠",
name: '🛠 refactor: 代码重构,优化'
},
{
value: "📚 docs",
emoji: "📚",
name: '📚 docs: 文档修改'
},
{
value: "🏁 test",
emoji: "🏁",
name: '🏁 test: 添加或修改测试'
},
{
value: "🗯 chore",
emoji: "🗯 ",
name: '🗯 chore: 不包含业务代码的更改,比如更新构建任务,包管理器'
},
{
value: "💅 style",
emoji: "💅",
name: '💅 style: 代码风格,空白、格式、缺少分号等'
},
{
value: "⏪ revert",
emoji: "⏪",
name: '⏪ revert: 恢复到提交'
}
],
scopes: [{ name: 'src/render/main' }, { name: '登录' },{ name: '通用功能' }],
messages: {
type: '选择一种你的提交类型(必填):',
scope: '选择一个适用范围(可选):',
// used if allowCustomScopes is true
customScope: '此次提交适用范围(可选):',
subject: '此次提交说明(必填):\n',
body: '对于此次提交详细说明,使用"|"换行(可选):\n',
breaking: '破坏性升级,如果发行大版本请添加说明,否则直接回车忽略 (可选):\n',
footer: '关联关闭的issue,例如:#31, #34 (可选):\n',
confirmCommit: '确定提交说明?'
},
allowCustomScopes: false,
allowBreakingChanges: ['feat', 'fix']
}
提交测试