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

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

相关推荐
ybr3 分钟前
基于react-router-dom, view transition 实现路由切换过渡动效
前端
饮茶三千4 分钟前
FreeMarker在保险电子保单/保函模板中的应用
前端·后端
前端的日常5 分钟前
提升开发效率,VSCode 中的两大神器
前端
掘金016 分钟前
vue父子组件处理异步操作
前端
前端拿破轮6 分钟前
腾讯面试官:手写一个节流防抖看看
前端·javascript·面试
月亮css7 分钟前
vue3页面缓存,使用keep-alive的include不生效
前端
七淮8 分钟前
css字体加载闪烁问题解决方案
前端
鑫鑫啊吖8 分钟前
前端图片压缩优化方案:基于 Canvas 的动态压缩策略
前端
yvvvy8 分钟前
《小白用 TypeScript 开项目》第二篇:项目中如何一步步用好 TypeScript
前端
九夜10 分钟前
nvm-教程及使用
前端