记录:前端项目使用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
└── ...

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

相关推荐
林强1812 小时前
前端文件预览docx、pptx和xlsx
前端
像是套了虚弱散4 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan4 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇5 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15886 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追6 小时前
Vue组件化开发
前端·html
艾德金的溪7 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长7 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH7 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴7 小时前
Android Studio新手开发第二十六天
android·前端·android studio