安装husky
shell
pnpm add -D husky
husky init(推荐)
shell
pnpm exec husky init
init
命令简化了项目中的 husky 设置。它会在 .husky/
中创建 pre-commit
脚本,并更新 package.json
中的 prepare
脚本。随后可根据你的工作流进行修改。
此时 package.json
的代码为
json
"scripts": {
"lint": "eslint --quiet --ext js,vue .",
"prepare": "husky"
},
运行初始化命令(创建 .husky/
文件夹)
shell
pnpm prepare
添加 pre-commit
钩子
初始化命令会创建 .husky
文件夹,并且创建一个 pre-commit
文件,文件内容为
js
pnpm lint
添加 commit-msg
钩子
手动创建一个 .husky
目录下的 commit-msg
文件,文件内容为
js
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
pnpm exec commitlint --edit "$1"
添加 commitlint 配置
安装 @commitlint/cli
@commitlint/config-conventional
shell
pnpm add -D @commitlint/cli @commitlint/config-conventional
创建 commitlint.config.js
文件:
js
module.exports = {
extends: ['@commitlint/config-conventional']
};
交互式提交(推荐)
如果你希望提交时有提示引导输入信息,配合 commitizen
更好用: 安装 commitizen
cz-conventional-changelog
shell
pnpm add -D commitizen cz-conventional-changelog
修改 package.json
:
json
"scripts": {
"lint": "eslint --quiet --ext js,vue .",
"prepare": "husky"
"commit": "cz",
},
"config": {
"commitizen": {
"path": "cz-conventional-changelog"
}
}
最终项目结构示意
lua
.
├── .husky/
│ ├── commit-msg
│ └── pre-commit
├── commitlint.config.cjs
├── package.json
└── ...
这样在使用第三方工具提交代码时,就会自动校验提交内容。