Vue 3 项目初始化怎么配置 Husky 钩子自动化脚本-Vue.js-PHP中文网

vue 3项目配置husky需三步：1. 初始化husky并运行prepare生成.husky目录；2. 结合lint-staged对暂存区文件执行eslint校验与prettier格式化；3. 可选添加commit-msg钩子，通过commitlint规范提交信息格式。

vue 3 项目初始化怎么配置 husky 钩子自动化脚本

Vue 3 项目初始化后配置 Husky 钩子，核心是让代码提交前自动执行 ESLint 校验、Prettier 格式化或 Commit Message 规范检查。关键不在于装多少包，而在于三步落地：初始化 Husky、绑定 pre-commit 钩子、配合 lint-staged 精准处理暂存区文件。

初始化 Husky 并启用 prepare 钩子

确保项目已初始化 Git（git init），再执行：

安装 Husky：npm install husky --save-dev（或 pnpm add husky -D）
在 package.json 的 scripts 中添加：
"prepare": "husky install"
运行 npm run prepare（或 pnpm run prepare）——这会生成 .husky/ 目录，并写入基础 shell 脚本

配置 pre-commit 自动校验与修复

只校验全部文件效率低，推荐用 lint-staged 配合 Husky，只处理 git add 过的文件：

安装依赖：npm install lint-staged --save-dev
在 package.json 中添加：
"lint-staged": { "src/**/*.{js,ts,vue}": ["eslint --fix", "prettier --write"] }
创建 pre-commit 钩子：
npx husky add .husky/pre-commit "npx lint-staged"

这样每次 git commit 前，只会对暂存区里的 Vue/JS/TS 文件跑 ESLint + Prettier，快且精准。

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

可选：强制规范 Commit Message

防止出现 git commit -m "fix" 这类模糊提交，加一个 commit-msg 钩子：

安装 commitlint 和约定插件：
npm install @commitlint/config-conventional @commitlint/cli --save-dev
新建 commitlint.config.js：
module.exports = { extends: ['@commitlint/config-conventional'] };
添加钩子：
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

之后提交时若不符合 feat: xxx、fix: xxx 等格式，会直接拒绝提交。

配置完记得测试：改一个文件 → git add . → git commit -m "test"，看是否触发校验。整个流程不依赖开发者自觉，而是由 Git 操作本身驱动。