Vibe Coding —— AI 辅助编程实战指南-三亩地-编程学习日记

1. 什么是 Vibe Coding

Vibe Coding（氛围编程）是一种以 AI 辅助为核心的新型编程方式。开发者不再逐行手写所有代码，而是通过自然语言描述需求、意图和约束，让 AI 生成、修改、重构和解释代码，开发者则专注于方向把控、架构决策和结果验证。

这种模式的核心在于「人机协作」：AI 负责繁琐的样板代码、重复逻辑和语法细节，人类负责定义问题、审查结果和保证质量。它并不是取代程序员，而是把程序员从「打字员」变成「架构师」和「审查者」。

Vibe Coding 的本质：用自然语言驱动代码生成，用工程素养保证代码质量。

2. 环境准备与工具链

开始 Vibe Coding 之前，需要准备一套完整的工具链。下面以目前主流的组合为例进行说明。

2.1 必备工具

AI 编程助手：如 Claude Code、GitHub Copilot、Cursor 等，负责代码生成与理解。
版本控制：Git，用于记录每一次 AI 修改，方便回滚。
本地运行环境：Node.js、Python 或 Java 等，取决于项目技术栈。
测试框架：Jest、pytest 或 JUnit，用于验证 AI 生成代码的正确性。

2.2 环境验证

在开始实战前，先确认环境可用。以 Node.js 环境为例：

node -v npm -v git --version

确认输出正常后，初始化项目：

mkdir vibe-coding-demo cd vibe-coding-demo npm init -y git init

3. 第一个实战：用自然语言生成工具函数

我们从最简单的场景开始：用自然语言描述需求，让 AI 生成一个工具函数。

3.1 需求描述

向 AI 助手输入以下提示词：

请用 JavaScript 写一个函数，输入一个字符串数组，返回去重后的数组，保持原有顺序。要求使用 ES6 语法，并附带 JSDoc 注释。

3.2 AI 生成的代码

AI 可能会生成如下代码：

/** * 数组去重，保持原有顺序 * @param {string[]} arr 输入数组 * @returns {string[]} 去重后的数组 */ function uniqueArray(arr) { return [...new Set(arr)]; } module.exports = { uniqueArray };

3.3 人工审查要点

AI 生成的代码不能直接信任，需要重点检查以下几点：

正确性：是否满足需求描述中的所有约束。
边界情况：空数组、重复元素、非字符串元素如何处理。
性能：是否有明显的性能瓶颈。
风格一致性：是否符合项目的代码规范。

针对上面的代码，`Set` 去重的时间复杂度是 O(n)，性能良好，且保持了原有顺序，满足需求。

4. 实战进阶：AI 辅助实现业务模块

接下来我们做一个更完整的实战：实现一个简单的待办事项管理模块，包含增删改查功能。

4.1 需求描述

向 AI 输入以下提示词：

请用 JavaScript 实现一个 TodoList 类，包含以下方法：addTodo(title) 添加待办、removeTodo(id) 删除待办、toggleTodo(id) 切换完成状态、getTodos() 获取所有待办。每个待办包含 id、title、completed 三个字段，id 使用自增数字。

4.2 AI 生成的代码

class TodoList { constructor() { this.todos = []; this.nextId = 1; } addTodo(title) { const todo = { id: this.nextId++, title, completed: false }; this.todos.push(todo); return todo; } removeTodo(id) { this.todos = this.todos.filter(todo => todo.id !== id); } toggleTodo(id) { const todo = this.todos.find(todo => todo.id === id); if (todo) { todo.completed = !todo.completed; } return todo; } getTodos() { return this.todos; } } module.exports = { TodoList };

4.3 编写测试验证

AI 生成代码后，我们可以让 AI 继续生成测试用例，验证代码的正确性：

请为上面的 TodoList 类编写 Jest 测试用例，覆盖添加、删除、切换状态和获取列表四个方法。

const { TodoList } = require('./todoList'); describe('TodoList', () => { test('addTodo 添加待办', () => { const list = new TodoList(); const todo = list.addTodo('学习 Vibe Coding'); expect(todo.title).toBe('学习 Vibe Coding'); expect(todo.completed).toBe(false); expect(list.getTodos()).toHaveLength(1); }); test('removeTodo 删除待办', () => { const list = new TodoList(); list.addTodo('任务一'); list.addTodo('任务二'); list.removeTodo(1); expect(list.getTodos()).toHaveLength(1); expect(list.getTodos()[0].title).toBe('任务二'); }); test('toggleTodo 切换完成状态', () => { const list = new TodoList(); list.addTodo('任务一'); list.toggleTodo(1); expect(list.getTodos()[0].completed).toBe(true); }); test('getTodos 获取所有待办', () => { const list = new TodoList(); list.addTodo('任务一'); list.addTodo('任务二'); expect(list.getTodos()).toHaveLength(2); }); });

运行测试：

npx jest

如果测试全部通过，说明 AI 生成的代码基本可靠；如果有失败用例，可以把失败信息反馈给 AI，让它自行修复。

5. AI 辅助调试与错误修复

Vibe Coding 的一大优势是调试效率极高。当代码出现 Bug 时，直接把报错信息粘贴给 AI，让它分析原因并给出修复方案。

5.1 实战场景

假设上面的 TodoList 在运行时出现如下报错：

TypeError: Cannot read properties of undefined (reading 'completed')

向 AI 输入：

我的 TodoList 代码运行时报错：TypeError: Cannot read properties of undefined (reading 'completed')。请分析可能的原因并给出修复方案。

5.2 AI 的分析与修复

AI 可能会指出：`toggleTodo` 方法中，当传入的 id 不存在时，`find` 返回 `undefined`，直接访问 `todo.completed` 会报错。修复方案如下：

toggleTodo(id) { const todo = this.todos.find(todo => todo.id === id); if (todo) { todo.completed = !todo.completed; return todo; } return null; }

这个修复增加了空值判断，避免了访问不存在的属性。通过这种方式，AI 能快速定位问题，大幅缩短调试时间。

6. 代码重构与优化

当项目代码逐渐增多，需要重构时，Vibe Coding 同样能发挥作用。你可以让 AI 分析现有代码，提出重构建议，并直接生成重构后的版本。

6.1 重构需求

请分析下面这段代码，指出存在的问题，并给出重构后的版本。要求提高可读性和可维护性。

function processData(data) { let result = []; for (let i = 0; i < data.length; i++) { if (data[i].type === 'A') { result.push({ name: data[i].name, value: data[i].value * 2 }); } else if (data[i].type === 'B') { result.push({ name: data[i].name, value: data[i].value * 3 }); } } return result; }

6.2 AI 的重构建议

AI 可能会给出如下重构方案：

const TYPE_MULTIPLIER = { A: 2, B: 3 }; function processData(data) { return data .filter(item => TYPE_MULTIPLIER[item.type] !== undefined) .map(item => ({ name: item.name, value: item.value * TYPE_MULTIPLIER[item.type] })); }

重构后的代码使用配置对象替代 if-else 分支，通过 `filter` 和 `map` 链式调用提高可读性，同时便于后续扩展新的类型。

7. Vibe Coding 的最佳实践

经过前面的实战，可以总结出 Vibe Coding 的核心实践原则。

7.1 需求描述要具体

AI 生成代码的质量，很大程度上取决于需求描述的清晰度。好的描述应该包含：

输入输出：明确函数的输入参数和返回值。
约束条件：如语言版本、代码风格、性能要求。
边界情况：空值、异常输入如何处理。
示例：给出输入输出的示例，帮助 AI 理解。

7.2 小步提交，频繁验证

每次让 AI 生成或修改代码后，都要立即运行测试验证。建议遵循以下流程：

让 AI 生成一个小功能模块。
运行测试验证正确性。
审查代码质量。
通过 Git 提交。
继续下一个功能。

7.3 保持人工审查

AI 生成的代码可能存在安全隐患、逻辑漏洞或性能问题。以下场景必须人工重点审查：

涉及敏感数据：密码、密钥、用户隐私的处理。
金融或医疗逻辑：错误代价高的业务逻辑。
并发与事务：多线程、数据库事务等复杂场景。
安全相关：SQL 注入、XSS 攻击等安全防护。

7.4 善用上下文

给 AI 提供足够的上下文，能显著提升生成质量。可以把相关文件内容、报错信息、测试结果一并提供给 AI，让它基于完整信息进行判断。

8. 常见陷阱与应对策略

Vibe Coding 虽然高效，但也存在一些常见陷阱，需要开发者保持警惕。

8.1 过度信任 AI

AI 生成的代码看起来合理，但可能存在隐藏的 Bug。应对策略是：始终编写测试，用测试结果说话，而不是凭感觉信任。

8.2 上下文丢失

在大型项目中，AI 可能无法记住所有上下文，导致生成的代码与现有代码风格不一致。应对策略是：把关键上下文显式写入提示词，或使用支持项目级上下文理解的工具。

8.3 代码膨胀

AI 有时会生成冗余代码，增加维护成本。应对策略是：定期重构，删除无用代码，保持代码简洁。

8.4 安全风险

AI 可能生成存在安全漏洞的代码，尤其是在处理用户输入时。应对策略是：对 AI 生成的代码进行安全审查，使用安全扫描工具辅助检测。

9. 总结

Vibe Coding 正在改变软件开发的协作方式。它让开发者从重复的编码劳动中解放出来，把更多精力投入到架构设计、需求分析和质量保障上。

通过本文的实战，你已经掌握了 Vibe Coding 的核心流程：用自然语言描述需求、让 AI 生成代码、编写测试验证、审查代码质量、迭代优化。这套流程可以应用到日常开发的各个环节，显著提升开发效率。

最后记住一个关键原则：AI 是强大的助手，但最终的责任人始终是你自己。保持批判性思维，坚持测试驱动，Vibe Coding 才能真正成为你的生产力利器。

日记详情

Vibe Coding —— AI 辅助编程实战指南