Vue 3 项目配置 Commitlint 的核心是通过 husky 的 commit-msg 钩子自动校验提交信息是否符合 Conventional Commits 标准（如 feat:、fix: 等），需安装 @commitlint/cli 和 @commitlint/config-conventional，创建 commitlint.config.mjs 并配置 type-enum 等规则，再用 npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"' 接入钩子，推荐搭配 cz-git + Commitizen 实现交互式提交。

Vue 3 项目初始化时配置 Commitlint 提交规范，核心是让每次 git commit 前自动校验提交信息是否符合 Conventional Commits 标准（如 feat:、fix: 等前缀），避免随意填写的 commit message 污染历史记录。

安装并初始化 Commitlint

使用 pnpm（推荐）执行：

• pnpm add @commitlint/cli @commitlint/config-conventional -D
• 在项目根目录新建 commitlint.config.mjs（注意是 .mjs，适配 Vue 3 默认的 ESM 环境）：

export default {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'chore', 'revert', 'build']
    ],
    'subject-empty': [2, 'never'],
    'header-max-length': [2, 'always', 72],
    'scope-case': [0],
    'subject-case': [0]
  }
};

接入 Husky 的 commit-msg 钩子

Commitlint 本身不自动运行，需通过 Husky 在提交时触发：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 确保已安装并初始化 Husky（如未配置，先运行 npx husky-init && pnpm install）
• 添加 commit-msg 钩子：npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
• 该命令会在 .husky/commit-msg 文件中写入校验逻辑，每次 git commit 都会读取并验证 $1（即 COMMIT_EDITMSG 文件路径）

搭配 Commitizen + cz-git 实现交互式提交（可选但推荐）

手动写规范格式易出错，建议同步配置交互式提交工具：

• 安装：pnpm add commitizen cz-git -D
• 在项目根目录创建 cz-config.mjs，定义类型、提示文案和跳过项（如跳过 body 和 footer）
• 在 package.json 中添加脚本："commit": "cz"
• 之后用 npm run commit 或 pnpm commit 替代 git commit -m，自动引导选择 type、scope、subject 等

验证是否生效

完成配置后测试：

• 执行 git add . 后运行 git commit -m "test: something" → 应被拒绝（因 test 不在 type 白名单中）
• 改用 git commit -m "feat: add login button" → 应成功提交
• 若使用 Commitizen，运行 pnpm commit 应出现菜单选择界面

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！