Cursor 使用指南

Cursor 是一款基于 VSCode 深度集成 AI 的代码编辑器，提供智能代码补全、AI 对话编程和项目级代码理解能力。

🌟 核心特性

• AI 代码补全 - 实时智能补全，支持多行预测
• 对话编程 - Cmd+K 快捷对话，直接编辑代码
• AI 聊天面板 - 侧边栏对话，支持 @mention
• Codebase 理解 - 理解整个项目代码库
• 多模型支持 - GPT-4、Claude、自定义模型

🚀 快速开始

1. 安装和打开项目

# 下载安装 Cursor
# 访问：https://cursor.sh

# 打开项目
File > Open Folder > 选择项目目录

2. 三种 AI 交互方式

方式一：AI 补全（Tab）

在编码时，AI 会自动提示补全：

// 输入注释，按 Tab 接受建议
// 创建一个验证邮箱的函数
function validateEmail(email) {  // AI 自动补全
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
}

方式二：快捷对话（Cmd+K / Ctrl+K）

选中代码，按 Cmd+K 进行快速编辑：

// 选中这段代码，按 Cmd+K 输入：
// "添加错误处理和类型检查"

function processData(data) {
  return data.map(item => item.value);
}

方式三：聊天面板（Cmd+L / Ctrl+L）

打开侧边栏聊天，使用 @ 引用：

你： @README.md 这个项目是做什么的？

你： @src/utils/ 重构这个目录下的所有工具函数，
添加 JSDoc 注释

💡 核心功能详解

创建文件

通过聊天创建：

你：在 @src/components/ 下创建一个 UserProfile.vue 组件

通过 Cmd+K 创建：

1. 打开新文件面板
2. 按 Cmd+K
3. 描述要创建的文件内容

编辑代码

选中编辑（推荐）：

1. 选中要修改的代码
2. 按 Cmd+K
3. 输入修改指令："改成 async/await"
4. 查看预览，接受或拒绝

聊天编辑：

你： @app.js:15-30 把这段代码改成 TypeScript

引用上下文

引用类型	快捷键/语法	说明
文件	@filename	引用特定文件
代码	@file:lines	引用代码片段
目录	@folder/	引用整个目录
代码库	@Codebase	引用整个项目
文档	@Docs	引用官方文档
网页	@Web	搜索网络信息

示例：

你： @Codebase 这个项目使用了哪些设计模式？

你： @Docs React Hooks 如何使用 useEffect？

你： @src/api/user.js 为这个文件编写单元测试

🎯 最佳实践

1. 利用上下文提示

开始编码前，用注释给 AI 提示：

# 创建一个用户认证类，支持 JWT 和 OAuth
class UserAuth:
    # AI 会根据注释自动补全

2. 使用 Cmd+K 快速迭代

// 初始代码
function getData() {
  fetch('/api/data').then(res => res.json());
}

// Cmd+K: "添加错误处理"
// Cmd+K: "改成 async/await"
// Cmd+K: "添加加载状态"

3. 分块处理大型重构

步骤 1: @models/ 先重构数据模型
步骤 2: @services/ 再更新服务层
步骤 3: @components/ 最后修改组件

4. 使用 Composer 模式

打开 Composer（多文件编辑模式）：

你：创建一个完整的登录功能，包括：
- @components/LoginForm.vue
- @api/auth.js  
- @store/auth.js

🔧 高级技巧

1. 自定义 AI 规则

在项目根目录创建 .cursorrules 文件：

# .cursorrules
- 使用 Vue 3 Composition API
- 使用 TypeScript 严格模式
- 遵循 Airbnb 代码规范
- 为所有函数添加 JSDoc 注释

2. 配置快捷键

Cursor Settings > Keybindings

推荐配置：
- Cmd+K: 快捷对话
- Cmd+L: 打开聊天
- Cmd+I: AI 补全建议
- Cmd+Shift+K: 拒绝建议

3. 多模型切换

在聊天面板右上角切换模型：

- GPT-4: 复杂逻辑、架构设计
- Claude Opus: 代码重构、文档编写
- Claude Sonnet: 日常编码（速度快）

4. 批量操作

你： @src/ 找出所有使用 var 的地方，
改成 const 或 let

📂 实际操作示例

示例 1: 创建 Vue 组件

你：创建一个 Vue 3 的用户列表组件，包含：
- 表格展示用户数据
- 搜索和筛选功能
- 分页
- 使用 Composition API
- 添加 TypeScript 类型

Cursor 会自动生成完整的组件代码。

示例 2: 重构函数

选中旧代码，按 Cmd+K：

// 旧代码（选中）
function calculate(a, b, op) {
  if (op === '+') return a + b;
  if (op === '-') return a - b;
  if (op === '*') return a * b;
  if (op === '/') return a / b;
}

// 输入：改成 switch 语句 + 添加错误处理

示例 3: 生成测试

你： @src/utils/validator.js 为这个文件生成 Jest 测试，
覆盖所有函数和边界情况

示例 4: 添加功能

你： @components/ProductList.vue 添加购物车功能：
1. 每个商品添加"加入购物车"按钮
2. 显示购物车总数
3. 使用 Pinia 状态管理

🆚 与其他工具对比

特性	Cursor	Antigravity	VSCode
代码补全	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
对话编程	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐
项目理解	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐
编辑器体验	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐
快捷操作	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
学习曲线	简单	简单	中等

💡 详细对比请查看：工具对比分析

❓ 常见问题

Q1: Cursor 是免费的吗？

A: 有免费版和付费版：

• Free: 有限次数的 AI 补全和对话
• Pro ($20/月): 无限次补全 + 更多对话次数
• Business: 团队使用，更高配额

Q2: 如何提高补全准确度？

A:

• 编写清晰的注释
• 保持代码风格一致
• 使用 .cursorrules 配置规则
• 给文件添加明确的类型定义

Q3: 可以使用自己的 API Key 吗？

A: 可以，在设置中配置：

Settings > Models > Use Custom API Key
- OpenAI API Key
- Anthropic API Key

Q4: 如何禁用自动补全？

A:

Settings > Features > Cursor Tab
- 关闭 "Enable Cursor Tab"

Q5: 支持哪些语言？

A: 支持所有主流编程语言，对以下语言优化最好：

• JavaScript/TypeScript
• Python
• Java
• C++/C#
• Go、Rust
• React、Vue、Svelte

💰 定价参考

版本	价格	特性
Free	$0	有限 AI 补全和对话
Pro	$20/月	无限补全 + 500 次对话/月
Business	联系销售	团队协作 + 更高配额

🔗 相关资源

• 返回 AI 编程助手首页
• Antigravity 使用指南
• VSCode AI 插件指南
• 工具对比分析

---

下一步：了解 VSCode 如何通过插件实现类似功能。