AI 时代的缺陷管理
你会学到什么
前三节打通了项目初始化、版本控制、代码提交——代码管理流程完成。本节聚焦：怎么让代码质量自动化，少出 bug？
你将学到：缺陷管理的范式转变（从事后修bug到事前预防）、AI辅助调试四步法、用 ESLint + Prettier 守住代码规范、让 AI 自动写测试、配置 Git Hooks 自动把关。
缺陷管理的范式转变
传统：事后修 bug
写完代码 → 手动测 → 发现 bug → 加 console.log → 排查 → 修复 → 再测
text
每个环节都可能遗漏，而且每次都是在 bug 已经产生之后才发现。
AI时代：事前预防
写代码时 → ESLint/Prettier 自动规范
提交时 → Git Hooks 自动跑测试与格式校验
AI 全程辅助 → 写测试、查问题
text
事前预防一共有四件武器：约束 AI 输出（CLAUDE.md 规则）、ESLint + Prettier、Git Hooks、AI 写测试。前两件在过去配置起来非常麻烦，现在一句话就能配好——这正是 AI 时代质量管理最大的变化。
不是"出了bug怎么办"，而是"怎么让bug根本不出现"。 通过工具链和 AI 的配合，把问题拦截在产生之前。
结构化调试：AI辅助四步法
描述问题比分析问题更重要
# 差的描述
"按钮不工作"
# 好的描述
Button 组件在以下场景有问题：
- 现象：点击按钮后没有触发 @click 事件
- 复现步骤：设置 loading=true 后再设回 false，然后点击
- 期望：loading 结束后按钮恢复可点击
- 实际：按钮仍然表现为禁用状态
- 相关代码：src/components/Button.vue
text
关键要素：现象、复现步骤、期望 vs 实际、相关文件。不需要分析原因——那是 AI 的工作。
四步法
1. 描述问题 → AI 分析可能的原因（top 3）
2. 针对每个原因 → AI 给出排查步骤
3. 确定原因后 → AI 直接给出修复代码
4. 修复后 → AI 帮你写测试防止回归
text
实战示例：
> Button 组件 loading 从 true 变为 false 后，按钮点击不响应。
> 请分析原因（top 3），每个给出排查步骤。
AI 返回：
1. disabled 状态没有与 loading 同步更新（70%）
2. 事件监听器在 loading 状态下被移除但未恢复（20%）
3. CSS pointer-events 被永久设置为 none（10%）
> 原因1是对的，请修复并添加测试用例。
AI 直接修改代码并生成测试。从发现问题到修复完成，5分钟。
text
ESLint + Prettier：让 AI 帮你配置
先说历史：这套配置过去有多麻烦
几年前去配 ESLint + Prettier，大家的普遍做法是从 CRA（create-react-app）这类模板项目里抄配置文件，或者用社区大神 antfu 的 @antfu/eslint-config——因为它把 Vue、TypeScript、样式、格式化全部收进一行配置（flat config，自带格式化、无需 Prettier），是 Vue 生态事实上的省心方案。即便如此，配置漂移、规则冲突仍是高频坑。AI 时代这些全部变成一句话的事。
ESLint：代码逻辑规范
检查未使用的变量、类型错误、最佳实践违反，在编辑器中实时标红。配合 Vue 3 和 TypeScript 的规则集，能在写代码时就发现问题。
Prettier：代码格式统一
统一缩进（2空格/4空格）、引号（单引号/双引号）、行宽（80/120字符），保存时自动格式化。团队不再为代码风格争论。顺带说一句：AI 生成的代码本身比人工写的更"守格式"——大模型输出天然遵循标准代码风格，这是 AI 协作的隐性收益。
一句话让 AI 配好
请为我的项目配置 ESLint 与 Prettier，使用推荐配置并测试
text
实测演示：发出这句指令后，AI 自动生成配置（ESLint 9+ 时代是 eslint.config.js flat config，不再是 .eslintrc.cjs）、.prettierrc 与编辑器设置，并自己跑 lint 验证通过——整个配置到测试通过不到一分钟。配置完成后别忘了闭环：直接 /commit 提交，AI 自动生成一条 Conventional Commits 格式的提交（如 chore: 配置 ESLint 与 Prettier 推荐规则）。
2026 年的补充选项：Biome（Rust 编写，一个工具同时替代 ESLint + Prettier，格式化快一个数量级、零配置），新项目可以考虑；ESLint 胜在生态——类型感知规则和海量插件仍是它不可替代的部分。老项目继续 ESLint + Prettier，别为迁移而迁移。
AI 自动写测试
测试是预防 bug 最有效的手段，但手写测试耗时。让 AI 来写：
AI 写单元测试
正常情况：函数返回正确值。边界情况：空输入、超大值。错误情况：异常参数抛错。每个函数三个用例，AI 一分钟生成。
AI 写组件测试
渲染测试：组件正常渲染。交互测试：点击/输入触发事件。状态测试：Props 变化响应。Vue Test Utils + Vitest，AI 熟练掌握。
提示词模板
请为 src/components/Button.vue 写 Vitest 单元测试，覆盖 loading/disabled/click 三个场景
text
Git Hooks：提交时自动把关
代码质量不能靠自觉——提交时自动检查，不通过就不让提交。
pre-commit：自动格式化
提交前自动运行 Prettier，只格式化你改过的文件（lint-staged），格式不对自动修正后再提交。
pre-push：自动跑测试
push 前自动跑 Vitest，测试不通过阻止 push，防止把坏代码推到远程。
一句话让 AI 配好
请为当前项目配置 simple-git-hooks + lint-staged：
pre-commit 跑 eslint --fix 和 prettier，
pre-push 跑 vitest run
text
AI 生成 package.json 中的配置、安装依赖、一次搞定。
再进一步，把提交信息的格式校验也交给 hooks（呼应第3节的 Conventional Commits）：
请配置 Git Hooks：提交时对 commit message 进行 Conventional Commits 格式校验，同时对代码进行格式化
text
实测演示：AI 会自动安装 lint-staged、commitlint 及 conventional 预设（commitlint-config-conventional），写好 hooks 配置，全程不到两分钟（模型能力不同会更慢或更快）。配置生效后，任何不符合 <type>(<scope>): <subject> 格式的提交都会被直接拒绝——忘了写 type、随便编一句就提交的路从此堵死。
hooks 工具选型：husky 还是 simple-git-hooks
| 工具 | 特点 | 适合 |
|---|---|---|
| husky + lint-staged | 最主流组合，lint-staged 周下载量 4000万+（2026-11-07 核实），生态资料最多 | 团队项目、需要多种 hooks |
| simple-git-hooks + lint-staged | 极简轻量，配置就几行，Vite 官方项目在用 | 个人项目、小团队 |
| Lefthook | Go 编写，速度快，配置集中 | 追求性能的团队 |
三者与 lint-staged/commitlint 的搭配方式完全一致，选哪个都不影响上面的提示词——AI 会按你的指定生成对应配置。
完整的质量防线
编辑时：ESLint + Prettier 实时纠错和格式化
开发中：AI 帮你写测试，覆盖正常/边界/异常三种情况
提交时：pre-commit 自动格式化，pre-push 自动跑测试
调试时：描述问题 → AI 分析 → AI 修复 → AI 写回归测试
text
四层防线层层递进：编辑器实时检查是第一层，AI 写测试是第二层，Git Hooks 是第三层，AI 辅助调试是兜底的第四层。
本节要点
- 范式转变：从"事后修 bug"到"事前预防"，四件武器——CLAUDE.md 约束、ESLint+Prettier、Git Hooks、AI 写测试
- ESLint + Prettier：一句话让 AI 配好（含"并测试"），一分钟内配置并验证通过，配完
/commit闭环提交；新项目可考虑 Biome，老项目别为迁移而迁移 - AI 自动写测试：覆盖正常/边界/异常三种情况，让 AI 帮你写 Vitest 用例
- Git Hooks 自动化：pre-commit 跑格式化，pre-push 跑测试，commit-msg 用 commitlint 校验 Conventional Commits 格式——配置全程不到两分钟
- AI辅助调试：遇到 bug 描述问题 → AI 分析 top 3 → AI 修复 → AI 写回归测试
下一节是 CI/CD 自动化部署——代码提交后自动构建、测试、部署，让 AI 帮你配置和排查 CI/CD 流水线。
↑