Easy-Vibe入门篇阅读笔记（一）——学会AI编程工具

阅读原文：学会 AI 编程工具

一、本章核心学习目标

• 完成从网页端 AI 编程到本地 AI IDE 开发的环境迁移

• 理解 IDE 与 AI IDE 的本质差异，掌握本地开发的完整流程

• 实战：用 Trae 从零搭建贪吃蛇游戏，跑通「需求→生成→运行→调试→迭代」全链路

• 掌握与 AI 高效对话的编程技巧，降低小白开发门槛

二、核心思维转变：AI 时代的编程逻辑

在 AI IDE 的使用中，需要彻底打破传统编程的思维习惯：

• ❌ 传统模式：遇到问题先搜教程、手动查文档、死记命令

• ✅ AI 时代模式：任何操作先问 AI，让 AI 直接帮你做

  • 不知道怎么装环境？直接让 AI 帮你检查并自动安装

  • 依赖安装报错？把错误丢给 AI，让它帮你换镜像源解决

  • 记不住命令？直接用自然语言描述需求，AI 帮你执行

三、IDE 与 AI IDE：从工具箱到智能伙伴

3.1 为什么需要 IDE

记事本写代码的痛点：

• 无语法高亮，代码结构难分辨

• 无智能提示，全手动输入易出错

• 文件混乱，多文件项目难以管理

• 调试困难，出错只能逐行打印排查

IDE（集成开发环境）是一体化的开发工具，整合了代码编辑、运行、调试、项目管理能力，主流代表为VS Code，以「一切皆插件」为核心理念，支持多语言扩展，对新手最友好。

3.2 普通 IDE vs AI IDE

对比维度	普通 IDE	AI IDE
定位	被动工具箱	主动编程助手
开发模式	人主导，手动完成所有操作	自然语言指令，AI 自动执行任务
核心能力	语法高亮、基础补全、调试	代码生成、代码理解、重构优化、Agent 任务执行
学习门槛	需记忆命令、熟悉工具操作	会描述需求即可，AI 处理繁琐细节

3.3 AI IDE 的核心能力

1. 智能代码生成与补全：支持根据伪代码 / 需求生成完整代码块，远超传统变量 / 函数补全

2. 代码理解与问答：可针对单文件 / 整个项目的代码进行问答，解释实现逻辑

3. 代码重构与优化：自动优化代码结构、添加注释

4. 自动测试生成：为函数 / 模块自动生成测试代码

5. Agent 式任务执行：自动拆分工单、安装依赖、运行项目、处理报错，可替代初级工程师的重复工作

四、主流 AI IDE 一览

绝大多数 AI IDE 均基于开源的 VS Code 二次开发，学会 VS Code 基础操作即可快速迁移，各工具差异主要在价格、模型支持、Agent 能力上：

工具	开发方	核心特点	适用场景
Trae	字节跳动	中文友好，基础功能免费，支持 100 + 语言，新手首选	零基础入门、本地快速开发
Cursor	Anysphere	支持大模型，优化大规模代码仓库，专业版无请求限制	复杂企业级项目
Antigravity	Google	Agent-First 模式，AI 主动执行任务，支持多模型	自动化任务开发
Qoder	阿里巴巴	任务拆解、上下文增强，支持架构治理	中大型项目、遗留系统分析
CodeBuddy	腾讯云	中文指令优化，企业级合规，支持私有化部署	金融 / 医疗等对数据安全要求高的行业
VS Code + Cline	开源插件	灵活切换模型，支持多模态，操作需用户确认	快速验证想法、集成现有流程
Kiro	AWS	深度集成 AWS 云服务，支持云原生开发	云应用开发

五、Trae 本地实战：从零搭建贪吃蛇游戏

5.1 准备工作

1. 版本选择：零基础推荐Trae 中国版（trae.cn），基础功能免费，无需海外网络，国内模型体验已足够日常开发

2. 项目初始化：新建空文件夹，用 Trae 打开该文件夹，从空白状态开始开发

5.2 完整开发流程

1. 需求描述：在右侧 AI 聊天面板输入清晰的需求：

   请你用 React 架构实现贪吃蛇游戏，包含键盘控制、吃到食物变长加分、撞墙或撞到自己时显示 “游戏结束” 并支持重新开始。实现后帮我启动这个项目。如果遇到没安装的程序环境就自动安装没安装的环境。

2. 执行确认：AI 会自动初始化项目、生成代码、安装依赖，过程中遇到需要确认的操作：

   • 命令执行：点击Run或输入y确认

   • 服务启动：本地服务启动后点击Skip跳过等待

3. 问题排查：如果功能不符预期 / 报错，直接把现象、代码、截图丢给 AI，让它修复，支持Revert回退到修改前的状态

4. 代码理解：项目跑通后，可让 AI 用通俗语言讲解代码逻辑，拆解核心数据结构、运行机制

5. 迭代美化：把模糊的「变好看」拆成具体需求，逐步优化：

   请帮我把游戏界面整体美化一下：游戏区域居中显示，换成浅背景，分数放大，以蓝色为主色调，游戏结束时中央显示提示和重启按钮。

5.3 进阶优化

可参考网页端 [z.ai](z.ai) 的项目 README，让 AI 对齐最佳架构，优化本地项目的代码结构。

六、IDE 界面核心区域（VS Code 系通用）

所有基于 VS Code 的 AI IDE 都沿用了经典布局，各区域功能如下：

区域	功能说明
标题栏（Title Bar）	显示文件名、窗口控制按钮
活动栏（Activity Bar）	左侧竖排图标，切换文件 / 搜索 / Git / 调试等功能视图
侧边栏（Side Bar）	展示对应功能的内容，如文件列表、搜索结果
编辑区（Editor）	编写代码的核心区域，支持多标签页
路径导航（Breadcrumbs）	显示文件路径，支持快速跳转
代码缩略图（Minimap）	快速预览代码，定位到指定位置
底部面板（Panel）	包含终端、输出、调试、问题列表
状态栏（Status Bar）	显示当前环境状态：语言、缩进、Git 状态、错误提示

七、高效与 AI 对话的技巧

同样的 AI，不同的提问方式结果天差地别，小白可遵循以下原则：

7.1 需求具象化：拒绝模糊指令

不要说「帮我做个网页」，要拆解成具体信息：

• 用途：这个东西是用来干嘛的

• 结构：需要哪些内容模块

• 限制：我的技术水平，希望用最简单的方式实现

• 输出：希望拿到什么样的结果

示例：

我完全不会写代码，想做一个单页个人简介网页，用来发给招聘的人看。页面要有三个部分：顶部是名字和自我介绍，中间是工作经历，底部是联系方式。请给我可以直接保存为 html 打开的完整代码。

7.2 分步推进：先跑通，再迭代

不要一上来就要做完整的大项目，按节奏逐步推进：

1. 第一步：先做最小 Demo，确认能正常运行

2. 第二步：逐步添加功能，每步都验证效果

3. 第三步：最后优化样式、美化界面

这样即使某一步出错，也能快速回退到上一个正常版本。

7.3 善用素材：不会描述就丢素材

遇到不会用术语描述的问题，直接把内容丢给 AI：

• 报错：复制完整错误信息，让 AI 翻译 + 修复

• 界面问题：如果用的是多模态模型，直接发截图；否则把代码 + 现象描述给 AI

• 参考样式：把想要模仿的页面截图 / 内容丢给 AI，让它搭类似的框架

注意：不是所有模型都支持图片输入，Kimi-K2.5、Doubao、Gemini、GPT 系列支持，GLM、DeepSeek 等纯文本模型不支持，使用前需确认。

7.4 报错处理：标准化排查流程

当代码不工作时，按这个流程和 AI 沟通：

1. 描述清楚：你做了什么，现在的现象是什么

2. 提供完整代码：避免复制不全导致的问题

3. 附上错误信息：复制报错文字或截图

4. 要求小白模式：让 AI 一步步告诉你怎么改，不要省略步骤

5. 确认预期：让 AI 先说明正常情况下应该看到什么效果

八、本章作业

完成一次完整的本地 AI IDE 开发流程：

1. 选择一个比贪吃蛇更复杂的小游戏：俄罗斯方块 / 打地鼠 / 扫雷 / 2048 / 飞机大战，或原创小游戏

2. 用本地 AI IDE 完成全流程：新建文件夹→打开 IDE→描述需求→生成项目→本地运行

3. 保证基础可玩性：包含开始 / 进行中 / 结束三种状态，明确的操作方式，清晰的得分反馈

4. 完成至少 2 轮迭代：先出可玩版本，再逐步优化样式、交互、难度

九、核心术语速记

术语	通俗解释
Agent	待命的 AI 小工程师，会拆任务、执行操作、处理报错
API Key	调用 AI 服务的密钥，相当于账号密码，不能公开泄露
localhost	本地服务，访问你自己电脑上运行的程序
状态（State）	程序当前的关键数据，状态变化会驱动界面更新
Coding Plan	云厂商的 AI 包月套餐，固定费用，不用担心 Token 计费超支
断点调试	让程序在指定行暂停，检查变量，逐行排查错误