记录：前端项目使用pnpm+husky（v9）+commitlint，提交代码格式化校验

安装husky

pnpm add -D husky

husky init（推荐）

pnpm exec husky init

init 命令简化了项目中的 husky 设置。它会在 .husky/ 中创建 pre-commit 脚本，并更新 package.json 中的 prepare 脚本。随后可根据你的工作流进行修改。

此时 package.json 的代码为

"scripts": {
  "lint": "eslint --quiet --ext js,vue .",
  "prepare": "husky"
},

运行初始化命令（创建 .husky/ 文件夹）

pnpm prepare

添加 pre-commit 钩子

初始化命令会创建 .husky 文件夹，并且创建一个 pre-commit 文件，文件内容为

pnpm lint

添加 commit-msg 钩子

手动创建一个 .husky 目录下的 commit-msg 文件，文件内容为

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

pnpm exec commitlint --edit "$1"

添加 commitlint 配置

安装 @commitlint/cli @commitlint/config-conventional

pnpm add -D @commitlint/cli @commitlint/config-conventional

创建 commitlint.config.js 文件：

module.exports = {
  extends: ['@commitlint/config-conventional']
};

交互式提交（推荐）

如果你希望提交时有提示引导输入信息，配合 commitizen 更好用： 安装 commitizen cz-conventional-changelog

pnpm add -D commitizen cz-conventional-changelog

修改 package.json：

"scripts": {
  "lint": "eslint --quiet --ext js,vue .",
  "prepare": "husky"
  "commit": "cz",
},
"config": {
  "commitizen": {
    "path": "cz-conventional-changelog"
  }
}

最终项目结构示意

.
├── .husky/
│   ├── commit-msg
│   └── pre-commit
├── commitlint.config.cjs
├── package.json
└── ...

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