记录:前端项目使用pnpm+husky(v9)+commitlint,提交代码格式化校验

安装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
└── ...

这样在使用第三方工具提交代码时,就会自动校验提交内容。

相关推荐
AI视觉网奇3 小时前
rknn yolo11 推理
前端·人工智能·python
gplitems1233 小时前
Gunslinger – Gun Store & Hunting WordPress Theme: A Responsible
开发语言·前端·javascript
wyzqhhhh5 小时前
less和sass
前端·less·sass
Nan_Shu_6147 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
excel8 小时前
Vue3 中的双向链表依赖管理详解与示例
前端
前端小白从0开始8 小时前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools
EveryPossible8 小时前
带有渐变光晕
前端·javascript·css
jojo是只猫9 小时前
Vue 3 开发的 HLS 视频流播放组件+异常处理
前端·javascript·vue.js
卓码软件测评9 小时前
第三方软件登记测试机构:【软件登记测试机构HTML5测试技术】
前端·功能测试·测试工具·html·测试用例·html5
CS Beginner9 小时前
【html】canvas实现一个时钟
前端·html