AI 功能光谱和定位

1. VS Code + GitHub Copilot：反应式助手 (Reactive Assistant)
   • 定位：你驾驶时，坐在副驾的智能伙伴。它在你输入时提供建议，在你提问时回答，但方向盘始终在你手中。
2. Roo Code：灵活的反应式助手 (Flexible Reactive Assistant)
   • 定位：与 Copilot 类似，但副驾可以随时换人（切换底层模型），你可以选择让最擅长特定路线的专家（如Claude、GPT等）来指导你。
3. Cursor：主动式领航员 (Proactive Navigator)
   • 定位：AI 与你共同驾驶。它不仅能看到你眼前的路，还能理解整张地图（整个代码库），并能直接帮你打方向盘（原地修改代码）。
4. Claude Code：自主工程师 (Autonomous Engineer)
   • 定位：你设定目的地和大致路线，然后这位工程师自己开车去。它独立完成整个旅程（复杂任务），然后向你报告结果（代码变更 diff）。

实际开发案例对比

让我们通过三个常见但复杂度递增的开发任务，来看看这四款工具的具体表现。

案例一：小型任务 - “为一个按钮组件增加 loading 状态”

目标：在一个已有的 React 按钮组件上，添加一个 isLoading 属性。当 isLoading 为 true 时，按钮应被禁用并显示一个加载动画。

• VS Code + GitHub Copilot:

  1. 你打开 Button.js 文件。
  2. 在 props 定义处输入 isLoading，Copilot 会自动补全类型（如 isLoading: boolean）。
  3. 在 <button> 标签上，你开始输入 disabled={...}，Copilot 会立刻建议 disabled={isLoading}。
  4. 你可能会在按钮文本旁边写一个 {，Copilot 会建议 isLoading && <Spinner />}。
  5. 体验：流畅的“填空”和“建议”体验，你需要主动编写代码的框架，AI 帮你填充细节。

• Roo Code:

  1. 体验与 Copilot 类似，通过自动补全和建议来辅助。
  2. 区别点：如果你觉得默认模型的建议不够好，可以快速在 Roo Code 的设置中切换到 Claude 3.7 Sonnet 模型，然后让它重新生成建议。你认为哪个模型对 React 组件的理解更深刻，就用哪个。

• Cursor:

  1. 你高亮整个按钮组件的代码块。
  2. 按下 Cmd+K (Mac) 或 Ctrl+K (Win)，弹出一个内联输入框。
  3. 你输入指令：“add a loading state with a spinner when isLoading is true”（增加一个 isLoading 状态，为 true 时显示加载动画）。
  4. Cursor 会直接在你的编辑器里实时修改代码，并用类似 Git diff 的高亮显示出新增和改动的部分。你确认无误后，一键接受即可。
  5. 体验：指令驱动的“原地重构”，你不需要自己动手写，只需下达指令，AI 帮你完成并展示结果。

• Claude Code:

  • 几乎不会用它来做这个任务。这就像用牛刀杀鸡。它的设计初衷不是为了这种微小的、交互式的代码修改。

案例二：中型任务 - “创建一个新的用户个人资料页面”

目标：在现有的项目中，创建一个 UserProfile.js 页面，该页面需要从 API 获取用户数据并展示，同时还要在路由文件中注册这个新页面。

• VS Code + GitHub Copilot:

  1. 你手动创建 UserProfile.js 文件。
  2. 在文件顶部写注释 // React component to fetch and display user profile from /api/users/:id。Copilot 会根据注释生成一个包含 useEffect 获取数据和基本 JSX 渲染的组件框架。
  3. 你可能需要多次与侧边栏的 Copilot Chat 互动，比如“帮我用 antd 的 Card 组件美化一下这个页面”。
  4. 然后，你手动打开 App.js 或路由文件，Copilot Chat (@workspace 功能) 可以帮你找到文件并建议如何添加新路由 <Route path="/profile/:id" ... />。
  5. 体验：分步解决问题。AI 在每一步都提供了巨大帮助，但组织和串联这些步骤的人是你。

• Cursor:

  1. 你直接在聊天窗口输入：“@codebase Create a new user profile page. Fetch data from /api/users/:id and display the user's name and email. Add the new page to the main router.”（@代码库 创建一个新的用户资料页。从...获取数据并展示...。将新页面添加到主路由中）。
  2. 因为 Cursor 理解整个项目的结构（@codebase），它会同时创建 UserProfile.js 文件并自动找到并修改 App.js 或相关的路由文件，一次性完成任务。
  3. 体验：更接近“委派任务”。你描述了“做什么”，AI 不仅知道“怎么做”，还知道“在哪里做”。

• Roo Code:

  • 体验会介于 Copilot 和 Cursor 之间。它在 VS Code 内部，所以流程更像 Copilot。你可以让它生成 UserProfile.js 的完整代码，但它可能不会像 Cursor 那样主动去修改另一个路由文件。

• Claude Code:

  1. 这是它开始发光的领域。你在命令行终端里输入一个清晰的指令：

     claude-code "Create a new React component at 'src/pages/UserProfile.js'. It should fetch data from '/api/users/:id' and display the user's name, email, and avatar. Then, update the router in 'src/router.js' to add a route for '/profile/:id' that points to this new component."
     

  2. Claude Code 会开始分析你的项目，理解你的路由是如何设置的，然后生成一个包含“创建新文件”和“修改现有文件”的完整代码变更集（diff）。
  3. 你可以在终端里审查这个 diff，确认无误后，输入 yes 应用所有更改。
  4. 体验：完全的“任务委托”。你给出高层指令，AI 作为一名初级工程师去执行，然后你作为高级工程师来做 Code Review。

案例三：大型任务 - “将项目中的所有 API 请求从 Axios 迁移到 Fetch API”

目标：这是一个项目级的重构，涉及多个文件，需要将所有使用 axios.get/post 的地方替换为标准的 fetch 写法。

• VS Code + Copilot / Roo Code:

  • 几乎不可能一键完成。你需要使用全局搜索找到所有 axios 的实例，然后一个一个文件地去修改。在每个修改点，Copilot/Roo Code 可以帮你快速生成新的 fetch 代码，但这仍然是一个非常手动的过程。

• Cursor:

  1. 这是 Cursor 项目级上下文理解能力的绝佳展示。
  2. 你在聊天窗口输入：“@codebase Refactor all API calls in the project from Axios to the native Fetch API. Ensure that error handling and JSON parsing are preserved.”（@代码库 将项目中所有的 API 调用从 Axios 重构为原生的 Fetch API。确保错误处理和 JSON 解析逻辑被保留）。
  3. Cursor 会扫描整个代码库，定位所有 axios 的使用，并尝试进行替换。它会一次性列出所有它计划要修改的文件和具体的代码变更。
  4. 体验：强大的“全局重构”能力。虽然对于特别复杂的项目可能仍需人工微调，但它能完成 80% 以上的自动化工作，极大提升效率。

• Claude Code:

  1. 这正是它的“杀手级应用”。
  2. 你在命令行中给出详细的重构计划：

     claude-code "Perform a project-wide refactor to replace the 'axios' library with the standard 'fetch' API. For every 'axios.get(url)', replace it with 'fetch(url).then(res => res.json())'. For 'axios.post(url, data)', replace it with the equivalent fetch POST request with JSON body. Make sure to handle potential errors with try-catch blocks. Start with the files in 'src/services', then move to 'src/components'."
     

  3. Claude Code 会像一个真正的开发者一样，有条不紊地执行这个多步骤计划，生成一个覆盖全项目的巨大diff。它可以理解不同文件之间的依赖关系，并进行一致的修改。
  4. 体验：AI 工程师在执行一个复杂的工程任务。你从一个“编码者”变成了“架构师”或“技术经理”，专注于下达清晰的指令和审查最终产出。

总结