# 代码质量工具集成实施计划 > **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. **Goal:** 集成代码质量工具，建立自动化质量门禁，确保代码提交前自动检查 **Architecture:** 采用Husky管理Git hooks，lint-staged对暂存文件进行检查，commitlint规范提交信息，Jest生成覆盖率报告 **Tech Stack:** Husky 8+, lint-staged 15+, commitlint 19+, Jest 29+, @commitlint/config-conventional --- ## 前置条件 - Node.js 18+ 已安装 - Git 已配置 - 项目已克隆到本地 - package.json 已存在 ## Task 1: 安装依赖包 **Files:** - Modify: `package.json` **Step 1: 安装Husky、lint-staged和commitlint** ```bash npm install --save-dev husky lint-staged @commitlint/cli @commitlint/config-conventional ``` **Step 2: 验证安装** Run: `npm list husky lint-staged @commitlint/cli` Expected: 显示已安装的版本号 **Step 3: 提交安装** ```bash git add package.json package-lock.json git commit -m "chore: install husky, lint-staged and commitlint" ``` --- ## Task 2: 配置Husky **Files:** - Create: `.husky/pre-commit` - Create: `.husky/commit-msg` - Modify: `package.json` **Step 1: 初始化Husky** ```bash npx husky install ``` **Step 2: 创建pre-commit钩子** 创建文件 `.husky/pre-commit`: ```bash #!/usr/bin/env sh . "$(dirname -- "$0")/_/husky.sh" npx lint-staged ``` **Step 3: 创建commit-msg钩子** 创建文件 `.husky/commit-msg`: ```bash #!/usr/bin/env sh . "$(dirname -- "$0")/_/husky.sh" npx --no -- commitlint --edit $1 ``` **Step 4: 添加prepare脚本到package.json** 在package.json的scripts中添加： ```json "prepare": "husky install" ``` **Step 5: 运行prepare脚本** Run: `npm run prepare` Expected: 创建.husky目录并设置Git hooks **Step 6: 提交配置** ```bash git add .husky/ package.json git commit -m "chore: configure husky git hooks" ``` --- ## Task 3: 配置lint-staged **Files:** - Create: `.lintstagedrc.json` - Modify: `package.json` **Step 1: 创建lint-staged配置文件** 创建文件 `.lintstagedrc.json`: ```json { "*.{js,jsx,ts,tsx}": [ "eslint --fix", "prettier --write" ], "*.{json,md}": [ "prettier --write" ], "*.{css,scss}": [ "stylelint --fix", "prettier --write" ] } ``` **Step 2: 添加lint-staged脚本到package.json** 在package.json的scripts中添加： ```json "lint-staged": "lint-staged" ``` **Step 3: 测试lint-staged** Run: `npm run lint-staged` Expected: 对所有暂存文件运行lint和prettier **Step 4: 提交配置** ```bash git add .lintstagedrc.json package.json git commit -m "chore: configure lint-staged" ``` --- ## Task 4: 配置commitlint **Files:** - Create: `commitlint.config.js` - Create: `.commitlintrc.json` **Step 1: 创建commitlint配置文件** 创建文件 `commitlint.config.js`: ```javascript module.exports = { extends: ['@commitlint/config-conventional'], rules: { 'type-enum': [ 2, 'always', [ 'feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'chore', 'revert', 'build', 'ci' ] ], 'subject-case': [0] } }; ``` **Step 2: 创建备用配置文件** 创建文件 `.commitlintrc.json`: ```json { "extends": ["@commitlint/config-conventional"], "rules": { "type-enum": [ 2, "always", [ "feat", "fix", "docs", "style", "refactor", "perf", "test", "chore", "revert", "build", "ci" ] ], "subject-case": [0] } } ``` **Step 3: 测试commitlint** Run: `echo "feat: add new feature" | npx commitlint` Expected: 通过验证 Run: `echo "invalid commit message" | npx commitlint` Expected: 失败并显示错误信息 **Step 4: 提交配置** ```bash git add commitlint.config.js .commitlintrc.json git commit -m "chore: configure commitlint" ``` --- ## Task 5: 配置代码覆盖率检查 **Files:** - Modify: `jest.config.js` 或 `jest.config.ts` - Modify: `package.json` **Step 1: 检查现有Jest配置** Run: `cat jest.config.js` 或 `cat jest.config.ts` Expected: 查看现有配置 **Step 2: 更新Jest配置添加覆盖率** 如果使用jest.config.js: ```javascript module.exports = { // ... 现有配置 collectCoverage: true, collectCoverageFrom: [ 'src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts', '!src/**/*.stories.{js,jsx,ts,tsx}', '!src/**/__tests__/**', '!src/**/*.test.{js,jsx,ts,tsx}', '!src/**/*.spec.{js,jsx,ts,tsx}' ], coverageThreshold: { global: { branches: 70, functions: 70, lines: 70, statements: 70 } }, coverageReporters: ['json', 'lcov', 'text', 'html'] }; ``` 如果使用jest.config.ts: ```typescript import type { Config } from 'jest'; const config: Config = { // ... 现有配置 collectCoverage: true, collectCoverageFrom: [ 'src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts', '!src/**/*.stories.{js,jsx,ts,tsx}', '!src/**/__tests__/**', '!src/**/*.test.{js,jsx,ts,tsx}', '!src/**/*.spec.{js,jsx,ts,tsx}' ], coverageThreshold: { global: { branches: 70, functions: 70, lines: 70, statements: 70 } }, coverageReporters: ['json', 'lcov', 'text', 'html'] }; export default config; ``` **Step 3: 添加覆盖率脚本到package.json** 在package.json的scripts中添加： ```json "test:coverage": "jest --coverage", "test:coverage:watch": "jest --coverage --watch", "coverage:report": "open coverage/lcov-report/index.html" ``` **Step 4: 运行覆盖率测试** Run: `npm run test:coverage` Expected: 生成覆盖率报告 **Step 5: 提交配置** ```bash git add jest.config.js package.json git commit -m "chore: configure jest coverage" ``` --- ## Task 6: 集成覆盖率检查到pre-commit **Files:** - Modify: `.lintstagedrc.json` - Create: `scripts/check-coverage.sh` **Step 1: 创建覆盖率检查脚本** 创建文件 `scripts/check-coverage.sh`: ```bash #!/bin/bash # 运行测试并生成覆盖率 npm run test:coverage -- --passWithNoTests # 检查覆盖率是否达到阈值 if [ $? -ne 0 ]; then echo "❌ 测试失败，请修复测试后再提交" exit 1 fi echo "✅ 测试通过" ``` **Step 2: 添加执行权限** Run: `chmod +x scripts/check-coverage.sh` **Step 3: 更新lint-staged配置** 修改 `.lintstagedrc.json`: ```json { "*.{js,jsx,ts,tsx}": [ "eslint --fix", "prettier --write" ], "*.{json,md}": [ "prettier --write" ], "*.{css,scss}": [ "stylelint --fix", "prettier --write" ], "package.json": [ "bash scripts/check-coverage.sh" ] } ``` **Step 4: 测试覆盖率检查** Run: `bash scripts/check-coverage.sh` Expected: 运行测试并检查覆盖率 **Step 5: 提交配置** ```bash git add .lintstagedrc.json scripts/check-coverage.sh git commit -m "chore: integrate coverage check to pre-commit" ``` --- ## Task 7: 创建质量门禁文档 **Files:** - Create: `docs/development/quality-gates.md` **Step 1: 创建质量门禁文档** 创建文件 `docs/development/quality-gates.md`: ```markdown # 代码质量门禁 ## 概述 项目配置了自动化质量门禁，确保代码提交前通过所有质量检查。 ## 质量检查 ### 1. 代码风格检查 **工具**: ESLint + Prettier **检查时机**: pre-commit hook **检查内容**: - 代码语法错误 - 代码风格规范 - 代码格式化 **通过标准**: 无错误，无警告 ### 2. 提交信息规范 **工具**: commitlint **检查时机**: commit-msg hook **检查内容**: - 提交信息格式 - 提交类型合法性 **通过标准**: 符合Conventional Commits规范 **提交类型**: - `feat`: 新功能 - `fix`: 修复bug - `docs`: 文档更新 - `style`: 代码格式调整 - `refactor`: 重构 - `perf`: 性能优化 - `test`: 测试相关 - `chore`: 构建/工具相关 - `revert`: 回滚提交 - `build`: 构建相关 - `ci`: CI/CD相关 **提交信息格式**: ``` ():