1.说明
这一章要实现的东西很多,使用Git提交代码的时候,需要对暂存的代码进行如下操作:
- 进行
lint
操作。
- 对
commit
的消息进行格式化检查。
- 进行
prettier
操作。
本章我们需要安装的依赖有:husky
、lint-staged
、@commitlint/cli
、@commitlint/config-conventional
、pretty-quick
、is-ci
。
husky
:可以在Git的钩子函数中执行脚本。
lint-staged
:针对暂存文件进行lint操作。
@commitlint/cli
:对commit的消息进行格式检查。
@commitlint/config-conventional
:commit的消息检查格式传统配置,对应还有很多其他配置,比如angular的提交规范@commitlint/config-angular。
pretty-quick
:针对暂存文件进行prettier操作。
is-ci
:husky
好像不能在ci
环境下执行,这个依赖是用来判断是不是ci
环境的。我也不知道什么是ci
环境。
参考链接:
2.安装
yarn add husky lint-staged @commitlint/cli @commitlint/config-conventional pretty-quick is-ci --dev
3.配置commitlint
在根目录下创建commitlint.config.js
文件。
3.1.原代码
module.exports = {
ignores: [(commit) => commit.includes('init')],
extends: ['@commitlint/config-conventional'],
parserPreset: {
parserOpts: {
headerPattern: /^(\w*|[\u4e00-\u9fa5]*)(?:[\(\(](.*)[\)\)])?[\:\:] (.*)/,
headerCorrespondence: ['type', 'scope', 'subject'],
referenceActions: [
'close',
'closes',
'closed',
'fix',
'fixes',
'fixed',
'resolve',
'resolves',
'resolved',
],
issuePrefixes: ['#'],
noteKeywords: ['BREAKING CHANGE', '不兼容变更'],
fieldPattern: /^-(.*?)-$/,
revertPattern: /^Revert\s"([\s\S]*)"\s*This reverts commit (\w*)\./,
revertCorrespondence: ['header', 'hash'],
warn() {},
mergePattern: null,
mergeCorrespondence: null,
},
},
rules: {
'body-leading-blank': [2, 'always'],
'footer-leading-blank': [1, 'always'],
'header-max-length': [2, 'always', 108],
'subject-empty': [2, 'never'],
'type-empty': [2, 'never'],
'type-enum': [
2,
'always',
[
'feat',
'fix',
'perf',
'style',
'docs',
'test',
'refactor',
'build',
'ci',
'chore',
'revert',
'wip',
'workflow',
'types',
],
],
},
};
3.2.带注释的代码
module.exports = {
// ↓忽略包含init的提交消息
ignores: [(commit) => commit.includes('init')],
// ↓按照传统消息格式来验证
extends: ['@commitlint/config-conventional'],
// ↓这里是自定义解析器,看不太懂,直接搬代码吧
// ↓https://commitlint.js.org/#/reference-configuration?id=parser-presets
parserPreset: {
parserOpts: {
headerPattern: /^(\w*|[\u4e00-\u9fa5]*)(?:[\(\(](.*)[\)\)])?[\:\:] (.*)/,
headerCorrespondence: ['type', 'scope', 'subject'],
referenceActions: [
'close',
'closes',
'closed',
'fix',
'fixes',
'fixed',
'resolve',
'resolves',
'resolved',
],
issuePrefixes: ['#'],
noteKeywords: ['BREAKING CHANGE', '不兼容变更'],
fieldPattern: /^-(.*?)-$/,
revertPattern: /^Revert\s"([\s\S]*)"\s*This reverts commit (\w*)\./,
revertCorrespondence: ['header', 'hash'],
warn() {},
mergePattern: null,
mergeCorrespondence: null,
},
},
// ↓自定义提交消息规则
rules: {
// ↓body以空白行开头
'body-leading-blank': [2, 'always'],
// ↓footer以空白行开头
'footer-leading-blank': [1, 'always'],
// ↓header的最大长度
'header-max-length': [2, 'always', 108],
// ↓subject为空
'subject-empty': [2, 'never'],
// ↓type为空
'type-empty': [2, 'never'],
// ↓type的类型
'type-enum': [
2,
'always',
[
'feat',
'fix',
'perf',
'style',
'docs',
'test',
'refactor',
'build',
'ci',
'chore',
'revert',
'wip',
'workflow',
'types',
],
],
},
};
4.配置husky
4.1.启动Git钩子
npx husky install
这个时候就在根目录下创建了.husky
目录了。vben将里面的一个文件夹删除了,我不知道为什么。看不懂就先不动。
4.2.修复YarnOnWindowsBug
官方参考链接
在带有Git Bash(stdin is not a tty
)的Windows上使用Yarn时,Git挂钩可能会失败。如果您有Windows用户,则强烈建议添加以下解决方法。
- 创建
.husky/common.sh
:
command_exists () {
command -v "$1" >/dev/null 2>&1
}
# Workaround for Windows 10, Git Bash and Yarn
if command_exists winpty && test -t 1; then
exec < /dev/tty
fi
- 在使用Yarn运行命令的地方将其来源:
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
. "$(dirname "$0")/common.sh"
yarn ...
这里是yarn命令的地方要这样用,其他地方要不要无所谓。第二步可以先不管。
5.创建lint-staged的配置文件
在.husky
目录下创建lintstagedrc.js
文件。
lint-staged的npm首页上有说如何使用配置文件。
module.exports = {
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
'{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --write--parser json'],
'package.json': ['prettier --write'],
'*.vue': ['prettier --write', 'stylelint --fix'],
'*.{scss,less,styl,css,html}': ['stylelint --fix', 'prettier --write'],
'*.md': ['prettier --write'],
};
6.修改脚本
在第十七章中,我们有许多的脚本未定义。这里重新修改一下:
6.1.lint:lint-staged
代码:
"lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
目的:对Git暂存的文件进行lint检查。
6.2.lint:pretty
代码:
"lint:pretty": "pretty-quick --staged",
目的:对Git暂存文件进行pretty的操作。
6.3.install:husky
代码:
"install:husky": "is-ci || husky install",
目的:如果不是CI
服务器,就启动Git钩子。
我不确定是不是这样的,感觉怪怪的。
6.4.postinstall
代码:
"postinstall": "npm run install:husky"
目的:执行install:husky
命令。这个命令会自动启动Git钩子,参考文档。
7.给husky添加任务
# 启动husky
yarn install:husky
# 添加commit消息检查任务到`.husky/commit-msg`文件中
# 这里我一直执行不出来,是引号引其的问题,大家可以先创建空的然后把命令复制进去
# npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
npx husky add .husky/commit-msg
# 创建一个任务文件
npx husky add .husky/pre-commit
手动修改.husky/commit-msg
文件:
这里面的$1
一定要用双引号,不然后面执行会报错。
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install commitlint --edit "$1"
手动修改.husky/pre-commit
文件:
内容参考链接:
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
. "$(dirname "$0")/common.sh"
[ -n "$CI" ] && exit 0
# Check the file name
# ! ls-lint cannot be used normally in mac pro of M1 system.
npm run lint:ls-lint
# Format and submit code according to lintstagedrc.js configuration
npm run lint:lint-staged
npm run lint:pretty
8.测试
8.1.失败测试
最好先重启你的ide。
git add .
git commit -m "随便打一些消息"
> vben3@0.0.0 lint:ls-lint F:\CodeLearn\vben\vben3
> ls-lint
> vben3@0.0.0 lint:lint-staged F:\CodeLearn\vben\vben3
> lint-staged -c ./.husky/lintstagedrc.js
[STARTED] Preparing...
# 一系列检查...
[SUCCESS] Cleaning up...
> vben3@0.0.0 lint:pretty F:\CodeLearn\vben\vben3
> pretty-quick --staged
�🔍 Finding changed files since git revision 1346762.
�🎯 Found 2 changed files.
✅ Everything is awesome!
⧗ input: 随便打一些消息
✖ subject may not be empty [subject-empty]
✖ type may not be empty [type-empty]
✖ found 2 problems, 0 warnings
ⓘ Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint
husky - commit-msg hook exited with code 1 (error)
8.2.格式
出错了,我们规范的提交消息试试:
@commitlint/config-conventional的规范+我们自定义的规则。
type: some message
8.3.类型
类型英文 | 类型中文 |
build | 建立 |
chore | 杂事 |
ci | ci |
docs | 文档 |
feat | 壮举 |
fix | 修复 |
perf | 敷衍 |
refactor | 重构 |
revert | 恢复 |
style | 样式 |
test | 测试 |
8.4.成功测试
提交成功,当然你不用担心这样手敲太麻烦了,后面还有插件可以自动帮你敲这些格式。
git commit -m "feat: 我们成功的规范了Git提交!"
> vben3@0.0.0 lint:pretty F:\CodeLearn\vben\vben3
> pretty-quick --staged
�🔍 Finding changed files since git revision 1346762.
�🎯 Found 2 changed files.
✅ Everything is awesome!
[master 6c61fc5] feat: 我们成功的规范了Git提交!
7 files changed, 104 insertions(+), 4 deletions(-)
create mode 100644 .husky/.gitignore
create mode 100644 .husky/commit-msg
create mode 100644 .husky/common.sh
create mode 100644 .husky/lintstagedrc.js
create mode 100644 .husky/pre-commit
# 推送出去
git push -u origin master
上一章
第十八章-安装rimraf
下一章
第二十章-使用commitizen询问式commit消息