Vue 3项目集成Git Hooks需用husky拦截提交，配合lint-staged校验暂存区代码、commitlint规范提交信息，并建议启用no-console/no-debugger等ESLint规则强化质量管控。

Vue 3 项目初始化时集成 Git Hooks，核心是用 husky 拦截提交动作，配合 lint-staged 和 commitlint 实现代码质量与提交信息双校验。不需要从零手写脚本，现代工具链已高度自动化。

1. 初始化 Git 仓库并安装 husky

确保项目已初始化为 Git 仓库（若未初始化，先运行 git init）。然后执行：

• pnpm dlx husky-init && pnpm install（推荐 pnpm；如用 npm 或 yarn，替换对应命令）
• 该命令会自动：创建 .husky/ 目录、在 package.json 中添加 "prepare": "husky install" 脚本、并执行安装
• 后续每次安装新依赖后，建议再运行一次 pnpm run prepare 确保 hooks 生效

2. 配置 pre-commit：只检查暂存区代码

避免全量 lint 耗时，应只对 git add 过的文件做校验：

Wealth Copilot Digital Employee

覆盖客户机会扫描、外呼触达、配置策略、投教问答、资产诊断、资产配置优化、工作复盘、投资陪伴全流程的理财顾问全能财富管理助手。

下载

• 安装：pnpm add lint-staged -D
• 在 package.json 中添加配置段：

"lint-staged": {
  "*.{js,ts,vue,jsx,tsx}": ["eslint --fix", "prettier --write"]
}

• 编辑 .husky/pre-commit，将默认内容替换为：npx lint-staged
• 这样每次 git commit 前，只会格式化并修复你本次暂存的文件

3. 校验提交信息格式（Conventional Commits）

统一提交前缀（如 feat:、fix:），便于生成 changelog 和语义化发版：

• 安装：pnpm add @commitlint/cli @commitlint/config-conventional -D
• 新建 commitlint.config.js，内容为：

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

• 在 .husky/commit-msg 中写入：npx --no-install commitlint --edit $1
• 可选：搭配 commitizen 提供交互式提交（npx cz），降低记忆成本

4. 补充建议：防止低级错误漏检

可在 ESLint 规则中主动禁用危险操作，再通过 husky 强制执行：

• 在 .eslintrc.js 的 rules 中加入：

"no-console": "error",
"no-debugger": "error"

• 这样 lint-staged 就会在提交前报错并阻止含 console.log 或 debugger 的代码入库
• 若需临时绕过，可用 // eslint-disable-next-line no-console 注释，但需明确理由

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