10.3 IDE 集成：GitHub Copilot / Cursor / Windsurf

内联补全 vs 对话式侧边栏

IDE 集成的 AI 工具主要有两种交互方式。

内联补全： 你在写代码，AI 预测你接下来要写什么并给出灰色建议。你按 Tab 接受，继续写。这是一种"不打断流"的交互——你不需要离开编辑器、不需要打字提问，AI 在你的编码过程中自然地参与。

内联补全最适合"你已经在写了"的场景。它不会帮你从零开始一个新功能，但能让你在已有代码中编写得更快——生成样板代码、补全函数实现、写出重复模式。

内联补全的使用场景包括：

• 写一个函数时：你写出函数签名，AI 自动补全函数体。如果你习惯先写注释描述函数行为，AI 补全的准确率会更高。
• 写重复模式时：你在写 CRUD 接口——增删改查的模式是固定的。写完第一个，AI 能预测后面几个的写法。
• 写测试时：你写了一个测试用例，AI 自动补全下一个测试用例的框架。
• 写样式时：你在写 CSS/ Tailwind 类名，AI 补全常见的样式组合。

内联补全的局限也很明显：它依赖"你已经开始写了"这个前提。如果你面对一个空白文件不知道从何开始，内联补全帮不了你。它更适合"加速"而不是"创造"。

对话式侧边栏： 你在编辑器中打开一个聊天面板，像和普通 AI 对话一样提问——"帮我生成一个登录组件" "这个函数是什么意思" "帮我重构这段代码"。AI 可以针对你当前打开的文件或选中的代码片段给出回答。

对话式侧边栏适合"你不知道怎么继续"或"你需要理解一段代码"的场景。它和内联补全互补，两者共同构成了 IDE 集成的完整体验。

对话式侧边栏的典型使用场景：

• 生成新代码："帮我生成一个用户列表组件，从 API 获取数据并展示在表格中。"——AI 生成完整代码，你手动复制或通过"应用"功能插入。
• 理解代码："这段代码的 async/await 是怎么工作的？这个 try-catch 块在哪里捕获异常？"——AI 逐行解释。
• 调试帮助："我把这个函数改了一下之后，它返回 undefined，为什么？"——AI 分析上下文，给出排查方向。
• 编辑建议："把这个函数的参数从 (id: string) 改成 (id: string, options?: QueryOptions)，并更新所有调用它的地方。"——AI 修改代码并列出修改的文件。

两种交互方式服务于不同的时刻。通常的使用节奏是：对话式侧边栏先开路——生成代码或理解复杂逻辑，然后内联补全接力——在你确认了方向后，加速你的编码过程。

三个主流工具各自的特点

虽然三个工具都属于 L2 层，但它们在设计哲学和功能侧重点上有明显的差异。

GitHub Copilot：最成熟的日常辅助。

Copilot 是 L2 领域用户量最大的工具，它的核心优势在于"稳"——内联补全的准确率高、响应快、对 IDE 的侵入感最低。它不是在"帮你想"，而是在"帮你写"。

Copilot 和其他两个工具的核心区别：Copilot 的设计哲学是"在你写代码时悄悄帮忙"，而 Cursor 和 Windsurf 更倾向于"和你一起写代码"。Copilot 不会主动重构你的代码结构、不会在侧边栏中给你长篇大论的分析——它的补全建议是克制的，聚焦在"下一行"或"下一段"。

Copilot 的 Chat 模式和最近推出的 Copilot Edits 功能（一次修改多个文件）正在扩展它的能力边界。但 Copilot 的核心体验仍然是"最好的内联补全工具"。

最适合的用户： 已经在 VS Code 或 JetBrains 中有稳定开发流程的开发者，希望 AI 减少编码中的重复劳动，但不希望 AI 改变自己的工作方式。

Cursor：最激进的 IDE 重构。

Cursor 基于 VS Code 的 fork，但它的 AI 集成深度远超普通插件。Cursor 不只把 AI 当作"补全器"，而是把 AI 当作了编辑器的"一等公民"。

Cursor 独有的几个功能：

• Apply 模式——对话中 AI 生成修改后，直接在编辑器中原位显示 diff，一键接受。不需要复制粘贴。
• Composer（多文件编辑）——你在一个面板中描述需求，AI 可以同时修改多个文件。这是 Cursor 在 L2 工具中独有的能力——其他 L2 工具通常一次只能处理当前文件。
• Agent 模式——AI 可以自主读取文件、搜索代码库、执行终端命令。这是 Cursor 从 L2 向 L1 延伸的探索——它让 IDE 插件具备了部分终端工具的能力。
• 项目级上下文——Cursor 可以索引整个项目，在对话中自动引用相关文件。你不需要手动告诉 AI "看这个文件"。

最适合的用户： 希望在 IDE 中获得接近终端工具的控制力、同时保留编辑器体验的开发者。Cursor 是"IDE 中的最强 AI 集成"。

Windsurf：最自然的协作体验。

Windsurf（前身是 Codeium）的设计理念是"AI 应该像团队成员一样和你协作"。它的核心创新是"自动流模式"（Auto Flow Mode）——AI 不只是等待你提问，而是主动观察你的操作，在你可能需要帮助的时候自动给出建议。

Windsurf 和 Cursor 的区别在于：Cursor 是"你召唤 AI"，Windsurf 是"AI 主动参与"。当你在 Windsurf 中编辑代码时，AI 会观察你的编辑模式，在你做重复性修改时提示"我注意到你在批量修改这些文件，需要我帮你自动完成吗？"

这种"主动感知"的能力，让 Windsurf 在某些场景下的体验非常流畅——特别是在需要执行大量相似操作的重复性任务中。但它的"主动性"对新用户来说可能需要一些适应——有些用户会觉得 AI 的主动建议打断了他们的思路。

最适合的用户： 喜欢"结对编程"体验的开发者，希望在编码过程中获得持续的建议和反馈。

如何与 Claude Code 配合使用

很多高效的开发者会同时使用终端工具和 IDE 插件——它们不是替代关系，而是互补。

一个典型的协作流程：

• Claude Code（终端）：负责大型操作——创建新项目、重构模块、批量修改、运行测试。需要处理整个项目上下文的任务。
• Cursor/Copilot（IDE）：负责微操作——补全当前函数、修改选中代码、回答关于当前文件的问题。不需要离开编辑器的场景。

它们之间的关系有点像"将军"和"士兵"：Claude Code 做大方向的规划和执行，IDE 插件做日常的细节填充。两者配合，你会同时获得"全局视野"和"局部效率"。

具体的工作流示例：

场景：你正在开发一个电商项目的购物车功能。

1. 用 Claude Code 搭建骨架："在项目中创建购物车功能，包括 CartProvider 上下文、addToCart/removeFromCart/updateQuantity 方法、购物车数据的 localStorage 持久化。"
2. 用 Cursor/Copilot 填充细节：在 Claude Code 生成的 CartItem.tsx 文件中，用内联补全快速写 UI 交互逻辑。"点击数量加减按钮"的 handler——写出 handleIncrement 的函数签名，AI 自动补全实现。
3. 用 Claude Code 统一审核：功能完成后，让 Claude Code 扫描整个购物车模块——"检查购物车模块中所有的状态更新逻辑是否都使用了不可变更新模式"。
4. 用 Cursor/Copilot 微调：根据 Claude Code 的审查结果，在 IDE 中逐个修改问题。

这个流程中，两种工具各司其职：终端工具做"重活"（架构、重构、审查），IDE 工具做"轻活"（补全、微调、快速修改）。

L2 工具的通用技巧

不管你选择哪个 L2 工具，以下技巧都适用：

技巧一：写注释引导补全。

内联补全的准确率高度依赖于你写了多少"提示"。在写函数之前，先写一行注释描述函数的行为：

// 根据用户ID获取用户的完整信息，包括个人资料和最近订单
async function getUserProfile(userId: string) {

有注释引导的情况下，AI 补全的准确率远高于直接写函数签名。

技巧二：用选中的代码作为上下文。

在对话侧边栏中提问前，先选中相关的代码。IDE 工具会把选中的代码作为上下文发送给 AI，回答会更精准。

比如你想理解一个函数的工作原理：先选中这个函数的所有代码，然后在侧边栏中问"这个函数有什么潜在的性能问题？"——AI 的答案会基于你选中的代码，而不是凭空猜测。

技巧三：组合使用内联和对话。

不要把内联补全和对话侧边栏看作"二选一"。它们在一个工作流中接力：

1. 对话侧边栏生成代码框架："帮我生成一个带有搜索和筛选功能的用户列表页面。"
2. AI 生成代码，你 Apply 到文件中。
3. 内联补全接手：在生成的代码中继续完善细节，AI 自动补全每个函数的具体实现。