vite+vue3+ts配置Husky

### 1. 配置 Husky 的背景 Husky 是一种用于 Git Hooks 的工具，它可以帮助开发者在执行某些 Git 命令之前运行脚本。通过 Husky，可以在提交代码前自动触发 ESLint 或 Prettier 等工具来校验代码质量[^1]。 --- ### 2. 安装依赖 为了实现基于 Vite、Vue3 和 TypeScript 的项目中的 Husky 配置，首先需要安装必要的依赖包： #### 安装 Husky ```bash npm install husky --save-dev ``` #### 初始化 Husky 初始化 Husky 并启用 Git Hooks 功能： ```bash npx husky-init && npm install ``` 这一步会在 `.husky` 文件夹下创建默认的 `pre-commit` Hook 脚本文件，并将其添加到项目的根目录中[^3]。 #### 可选：安装 Lint-Staged 如果希望仅针对即将被提交的文件运行校验，则可以安装 `lint-staged` 工具： ```bash npm install lint-staged --save-dev ``` --- ### 3. 配置 Husky Hooks 编辑 `.husky/pre-commit` 文件以指定钩子的行为。例如，在提交前运行 ESLint 校验命令： ```bash #!/bin/sh . "$(dirname "$0")/_/husky.sh" # 运行 eslint 对暂存区文件进行校验 npx lint-staged ``` 上述脚本将在每次执行 `git commit` 命令时调用 `lint-staged` 来处理暂存区域内的文件。 --- ### 4. 配置 Lint-Staged 在 `package.json` 中新增或修改 `lint-staged` 配置项，以便定义具体的校验逻辑。以下是常见的配置示例： ```json { "lint-staged": { "*.{ts,tsx,vue}": [ "eslint --fix", "prettier --write" ], "*.css": ["stylelint --fix"], "*.{png,jpg,gif,svg}": ["imagemin"] } } ``` 此配置表示对于扩展名为 `.ts`, `.tsx`, `.vue` 的文件将依次运行 ESLint 自动修复和 Prettier 格式化；而对于 CSS 文件则应用 Stylelint。 --- ### 5. 添加 Commit Message 规范支持 (可选) 可以通过集成 **CommitLint** 和 **CZ CLI** 实现更严格的提交消息管理。 #### 安装 CommitLint ```bash npm install @commitlint/{cli,config-conventional} --save-dev ``` #### 创建 CommitLint 配置文件 新建 `.commitlintrc.js` 文件并写入如下内容： ```javascript module.exports = { extends: ['@commitlint/config-conventional'] }; ``` #### 安装 CZ CLI ```bash npm install cz-customizable --save-dev ``` 更新 `package.json` 的 scripts 字段，增加交互式提交功能： ```json "scripts": { "prepare-commit-msg": "exec < /dev/tty && node_modules/.bin/cz --hook || true" }, "config": { "commitizen": { "path": "./node_modules/cz-customizable" } } ``` 最后设置 `husky` 使用该脚本来拦截标准输入框模式下的提交操作： ```bash npx husky add .husky/commit-msg 'npx --no-install commitlint --edit $1' ``` --- ### 总结 完成以上步骤后，您的 Vite + Vue3 + TypeScript 项目即可具备强大的代码质量和版本控制能力。每一次提交都会经过严格检验，从而减少潜在错误的发生概率[^4]。 ---