第21期 | AI编程工具全景图——Cursor vs Copilot vs Claude Code，你该用哪个

🎯 今天你将学会

• 了解当前主流 AI 编程工具的定位和差异
• 理解 AI 编程工具的工作原理（上下文窗口是关键）
• 知道三大工具各自的最强使用场景
• 建立一套自己的 AI 工具选型框架
• 用实测数据帮你做决策

---

📖 核心知识

1. AI 编程工具的本质：一个超大上下文的代码补全

在了解哪个工具好之前，先要理解它们共同的工作原理：

本质上，所有 AI 编程工具都在做同一件事：

你的问题 + 代码上下文 → 发给大语言模型 → 返回代码建议

关键差异在于"上下文"的处理方式：

工具	上下文来源	上下文大小	更新频率
GitHub Copilot	当前文件 + 相邻文件	~8K tokens	实时
Cursor	整个代码库（可索引）	200K+ tokens	实时
Claude Code	整个代码库 + 自主执行	200K tokens	按需

上下文越大，AI 对你项目的理解越全面，生成的代码质量越高。这就是为什么 Cursor 和 Claude Code 比 Copilot 在复杂任务上表现更好。

---

2. GitHub Copilot：最普及的入门级工具

定位： 代码补全 + 简单问答，像一个很快的智能输入法。

核心能力：

• Tab 补全：你开始输入，它预测你想写什么
• 根据注释生成代码
• Ctrl+I 快速修改选中代码
• Copilot Chat：在编辑器侧栏问问题

最适合场景：

✅ 写样板代码（测试用例、类型定义、CRUD）
✅ 快速实现已知逻辑（你知道怎么写，只是懒得打字）
✅ 注释驱动开发（写好注释，让 AI 实现）
✅ 学习新 API（"帮我写一个用 IntersectionObserver 的例子"）

局限：

❌ 跨文件的复杂重构
❌ 理解项目整体架构
❌ 自主完成多步骤任务

定价： 个人版约 $10/月，学生免费。

---

3. Cursor：当前最受开发者欢迎的 AI 编辑器

定位： 基于 VS Code 的 AI 原生编辑器，把 AI 深度融入开发流程。

核心能力：

① Composer（多文件编辑）：
这是 Cursor 最强的功能。你描述一个需求，Cursor 可以同时修改多个文件，还会告诉你每个文件改了什么。

例子：
你说："添加用户认证功能，需要登录/注册接口，JWT 令牌，并更新相关路由"

Cursor 做的：
- 创建 authController.ts
- 修改 routes/index.ts（添加路由）
- 修改 middleware/auth.ts（添加 JWT 验证）
- 更新 types/user.ts（添加 UserPayload 类型）

② .cursorrules 文件（项目级规则）：
在项目根目录放一个 .cursorrules 文件，告诉 AI 你项目的规范，它会一直遵守。

# .cursorrules 示例
你是一个 React + TypeScript 前端专家。

技术栈：
- React 18 + TypeScript 5
- 状态管理：Zustand
- 样式：CSS Modules（不用 Tailwind）
- 路由：React Router v6
- 测试：Vitest + React Testing Library

代码规范：
- 所有组件用函数组件
- Props 用 interface 定义（不用 type）
- 不使用 any 类型
- 每个组件都要有对应的 .test.tsx 文件
- 提交信息格式：feat/fix/refactor: 描述

当我说"创建组件 XXX"时，同时创建：
- components/XXX/XXX.tsx
- components/XXX/XXX.module.css
- components/XXX/index.ts

③ @Codebase 引用：
在对话中用 @文件名 或 @Codebase 引用具体代码，让 AI 有更精准的上下文。

④ 代码库索引：
Cursor 会扫描并索引整个项目，回答"这个函数在哪里定义的？"、“哪里用到了这个接口？”

定价： 免费版每月 50 次 premium 对话；Pro 版 $20/月无限制。

---

4. Claude Code：最强的自主编程 Agent

定位： 终端里的 AI 编程代理，能自主完成复杂的多步骤任务。

核心能力：

Claude Code 不只是建议代码，它可以主动执行操作：

• 读写文件
• 运行命令（npm install、git commit）
• 浏览器搜索
• 自主规划和执行多步骤任务

# 安装
npm install -g @anthropic-ai/claude-code

# 在项目目录启动
claude

# 示例对话
> 帮我把所有 class 组件重构成函数组件，
  并给每个重构的组件加上对应的测试文件

Claude Code 会：
1. 扫描所有 .tsx 文件找 class 组件
2. 逐个重构（你可以选择自动 or 每步确认）
3. 为每个文件创建 .test.tsx
4. 运行 npm test 验证
5. 给你汇报完成情况

最适合场景：

✅ 大规模重构（几十个文件的迁移）
✅ 新项目搭建（从 0 到跑起来）
✅ 调试复杂 Bug（自主读错误、找原因、改代码、测试）
✅ 实现完整功能（从需求到可运行代码）

局限：

❌ 不适合需要你精细控制每行代码的场景
❌ 大量文件操作时成本较高
❌ 需要良好的任务描述能力

定价： Claude Pro $20/月，或按 API 用量（Claude 3.5 Sonnet 约 $3/1M tokens）。

---

5. 实测对比：同一个任务，三个工具

任务： 为一个 React 项目实现"无限滚动"功能

Copilot 的表现：

• 优点：在我开始写 useIntersectionObserver 时，直接补全了整个 Hook 实现
• 缺点：不知道我项目里已经有相似的 useFetch，生成了重复代码
• 用时：5分钟（还需要自己整合）

Cursor 的表现：

• 优点：读取了我的 useFetch.ts，生成的代码直接复用了它；自动更新了 types/ 里的接口
• 缺点：需要我在 Composer 里描述清楚需求
• 用时：3分钟（Composer 一次搞定3个文件）

Claude Code 的表现：

• 优点：自主分析了整个项目结构，实现 + 测试 + 类型全套，还运行了测试验证
• 缺点：用了最多的 token，成本最高
• 用时：7分钟（包括自动跑测试的时间）

我的结论：

• 日常开发：Cursor（性价比最高，融入工作流最深）
• 快速补全：Copilot（轻量，不干扰思维流）
• 大型任务/重构：Claude Code（自主完成，省心）

---

6. 选型框架：根据场景选工具

你的任务是...

单个函数/组件的实现
  → GitHub Copilot（Tab 补全，不需要切换工作流）

跨3个以内文件的功能实现
  → Cursor Composer（多文件协调，保持项目一致性）

需要了解整个项目才能完成的任务
  → Cursor（已索引代码库，@Codebase 引用）

涉及10个以上文件的重构/迁移
  → Claude Code（自主规划执行，你只需要审查结果）

调试一个复杂 Bug（需要多轮分析）
  → Claude Code 或 Cursor Chat（对话式调试）

学习一个新技术/框架
  → 任何工具都可以，Copilot 足够

---

7. AI 工具使用的底层原则

不管用哪个工具，这些原则都适用：

原则1：垃圾进，垃圾出（Context is King）

AI 生成代码的质量完全取决于你给的上下文。给得越清晰，结果越好。

❌ 差的 Prompt：帮我写一个登录功能
✅ 好的 Prompt：
   帮我写登录 API 调用（POST /api/auth/login），
   使用项目中已有的 axios 实例（@/lib/axios），
   返回类型参考 @/types/auth.ts 的 AuthResponse，
   错误处理用 toast 通知（@/components/Toast），
   登录成功后把 token 存到 Zustand 的 userStore

原则2：你是 CEO，AI 是实习生

AI 非常勤快，但判断力不稳定。你来做架构决策和代码审查，AI 来执行实现。

原则3：小步快跑，及时审查

不要让 AI 一次改几百行。让它分步骤来，每步你确认没问题再继续。

原则4：测试是你的护盾

用 AI 生成代码后，先跑测试。有了测试，你能快速验证 AI 写的对不对。

---

🤖 AI协作实战：实测三个工具写同一功能

任务： 实现一个 useClipboard 自定义 Hook：

• 复制文本到剪贴板
• 复制后显示"已复制"状态（2秒后重置）
• 处理浏览器不支持的情况

给三个工具相同的描述：

实现 React 自定义 Hook：useClipboard
- copyToClipboard(text: string): 复制到剪贴板，返回 Promise<void>
- isCopied: boolean，复制后 2 秒内为 true
- isSupported: boolean，当前浏览器是否支持 Clipboard API
使用 TypeScript

Copilot 的输出： 完整实现，约 20 行，但没有 TypeScript 类型，没有处理 setTimeout 的 cleanup。

Cursor 的输出： 有 TypeScript 类型，有 cleanup，还自动建议了怎么使用这个 Hook。

Claude Code 的输出： 完整实现 + 单元测试 + 使用示例组件。

三者的代码核心逻辑完全相同，差别只是完整性和周边代码。说明：

1. 对于小功能，工具差距不大
2. 差距主要体现在"周边完整性"（类型、测试、文档）和大型任务

---

💻 动手练习

简单： 安装一个 AI 编程工具（推荐先试 Cursor），完成官方入门教程，然后用它实现一个简单的 useDebounce Hook，对比手写效率。

中等： 在你的项目中创建一个 .cursorrules 文件（或等效的 AI 规则文件），包含以下内容并测试它是否被遵守：

• 你的技术栈信息
• 你的命名规范
• 当创建组件时同时创建什么文件

挑战： 用 Claude Code（或 Cursor Composer）完成一个"大"任务：

• 给你的 Mini Taskflow 项目添加任务到期提醒功能
• 包括：UI 展示（高亮逾期任务）+ 浏览器通知 + 对应测试
• 记录 AI 做了什么决策，哪些你需要纠正

---

📌 本期要点

1. AI 工具的核心差异是上下文窗口和自主能力，不是"哪个模型更聪明"
2. Cursor = 日常开发首选：代码库索引 + .cursorrules + Composer 三件套，效率最高
3. Claude Code = 大任务杀器：自主规划执行，适合重构、建项目、复杂 Bug
4. Copilot = 轻量入门：不想换编辑器的话，装个插件就能用
5. 工具再好，你的判断力是核心：AI 是超级实习生，架构决策和代码审查是你的责任

🔗 下期预告

第22期：Cursor 深度使用——.cursorrules 怎么写才有效？Composer 的进阶技巧？怎么让 AI 在你的项目里"如鱼得水"？下期手把手教你配置你的 Cursor 工作流。