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

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

相关推荐
你的人类朋友1 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手1 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿1 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉
前端小趴菜052 小时前
react状态管理库 - zustand
前端·react.js·前端框架
Jerry Lau2 小时前
go go go 出发咯 - go web开发入门系列(二) Gin 框架实战指南
前端·golang·gin
我命由我123453 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
0wioiw03 小时前
Flutter基础(前端教程③-跳转)
前端·flutter
落笔画忧愁e3 小时前
扣子Coze纯前端部署多Agents
前端
海天胜景3 小时前
vue3 当前页面方法暴露
前端·javascript·vue.js