Cursor 编辑器深度玩法：AI 原生 IDE 的正确打开方式

为什么 Cursor 值得一试

Cursor 不是"VS Code + AI 插件"的简单组合，而是从底层重新设计的 AI 原生编辑器。它的核心优势在于：

1. 深度集成：AI 能理解整个项目上下文
2. 多文件编辑：一次对话修改多个文件
3. 代码库索引：快速检索和理解大型代码库
4. 自定义规则：项目级 AI 行为配置

本文覆盖内容

• 核心交互方式与快捷键
• Composer 多文件编辑技巧
• 代码库索引与检索
• 自定义规则配置
• 高级工作流实践

核心快捷键

内联编辑 (Cmd + K)

这是最常用的功能。选中代码，按 Cmd + K，输入指令：

快速重构

// 选中这个函数，按 Cmd + K
function getUserInfo(id) {
  return fetch('/api/user/' + id)
    .then(res => res.json())
    .then(data => data)
}

// 输入: 改成 async/await，添加错误处理和 TypeScript 类型

AI 会直接在原位置生成：

async function getUserInfo(id: string): Promise<UserInfo> {
  try {
    const response = await fetch(`/api/user/${id}`)
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }
    return await response.json()
  } catch (error) {
    console.error('获取用户信息失败:', error)
    throw error
  }
}

内联编辑指令模板

侧边栏对话 (Cmd + L)

按 Cmd + L 打开侧边栏，可以进行更复杂的对话交互。

@ 符号引用

Cursor 支持多种引用方式：

@file src/components/UserCard.vue
解释这个组件的 props 设计

@folder src/api
总结这个目录下的 API 接口

@codebase
项目中哪里处理了用户认证？

@doc https://vuejs.org/guide/...
根据这个文档，修改我的代码

对话上下文管理

当对话变长时，可以：

1. 新建对话：Cmd + Shift + N
2. 引用历史：选中之前的回答，按 Cmd + Shift + L
3. 保存对话：收藏有价值的对话记录

Composer 多文件编辑 (Cmd + I)

这是 Cursor 的杀手级功能。一次对话，同时修改多个文件。

实战案例：添加新功能

假设要添加"用户收藏"功能：

打开 Composer (Cmd + I)

提示词:
我需要添加用户收藏功能：
1. 创建 types/favorite.ts 定义类型
2. 创建 api/favorite.ts 封装接口
3. 创建 stores/favorite.ts Pinia 状态
4. 创建 composables/useFavorite.ts 复用逻辑
5. 在 UserCard.vue 组件中添加收藏按钮

技术栈：Vue 3 + TypeScript + Pinia
API 规范：RESTful，基础路径 /api/v1

Composer 会：

• 自动创建所有文件
• 生成符合项目风格的代码
• 处理好文件间的导入关系

Composer 最佳实践

1. 明确文件列表：告诉 AI 需要创建/修改哪些文件
2. 说明技术栈：避免 AI 猜测你的技术选型
3. 提供示例：可以 @file 引用现有文件作为参考
4. 分步确认：复杂任务可以分阶段执行

代码库索引

Cursor 会自动索引整个项目，让 AI 理解全局上下文。

索引配置

在设置中可以配置：

{
  "indexing": {
    "include": ["src/**/*", "types/**/*"],
    "exclude": ["node_modules", "dist", "*.test.ts"]
  }
}

全局搜索问答

@codebase 项目中所有使用了 useRequest 的地方

@codebase 登录流程是怎么实现的？从前端到后端

@codebase 有哪些组件使用了 ElMessage？

代码关系分析

@codebase UserCard 组件被哪些页面引用了？

@codebase stores/user.ts 的状态在哪些地方被修改？

自定义规则 (.cursorrules)

在项目根目录创建 .cursorrules 文件，定义 AI 行为规范：

# 项目规范

## 技术栈
- Vue 3.4+ with Composition API
- TypeScript 5.x strict mode
- Pinia for state management
- Element Plus UI components
- Tailwind CSS for styling

## 代码规范

### 组件结构
使用 <script setup> 语法，按以下顺序组织代码：
1. imports
2. props/emits 定义
3. 响应式状态 (ref/reactive)
4. 计算属性 (computed)
5. 生命周期 (onMounted 等)
6. 方法定义
7. expose

### 命名规范
- 组件文件: PascalCase.vue
- composables: useCamelCase.ts
- 常量: UPPER_SNAKE_CASE
- 类型: PascalCase (interface 优先于 type)

### API 调用
- 使用 @/api 目录下的封装函数
- 使用 useRequest composable 处理加载状态
- 错误统一由 interceptor 处理

### 禁止事项
- 不使用 any 类型
- 不使用 var 声明变量
- 不在组件中直接调用 axios
- 不硬编码颜色值（使用 Tailwind）

## 响应风格
- 使用中文注释
- 代码简洁，避免过度抽象
- 优先使用组合式函数复用逻辑

有了这个配置，AI 生成的代码会自动遵循项目规范。

高级技巧

1. 代码审查助手

选中 PR 的变更代码：

审查这段代码：
1. 是否有潜在的性能问题？
2. 类型定义是否完整？
3. 错误处理是否充分？
4. 是否符合项目规范？

2. 调试辅助

遇到 bug 时：

@file src/views/Order.vue
这个组件在点击提交订单后没有跳转，
控制台没有报错，网络请求也成功了。
帮我分析可能的原因。

3. 重构大文件

@file src/components/LegacyTable.vue
这个组件有 800 行，太臃肿了。
请帮我拆分成：
1. 一个主组件处理布局
2. 独立的 composable 处理数据逻辑
3. 独立的工具函数
保持功能不变。

4. 生成测试用例

@file src/utils/validate.ts
为这个文件的所有函数生成 Vitest 测试用例，
覆盖正常情况和边界情况。

5. 文档同步

@file src/components/DataTable.vue
根据这个组件的 props 和 events，
更新对应的 README 文档。

与 VS Code 的对比

我的建议：

• 新项目、需要大量生成代码 → Cursor
• 成熟项目、精细调整 → VS Code + Copilot
• 两者可以同时安装，按需切换

使用成本

Cursor 提供免费额度：

• 免费版：每月 200 次快速请求
• Pro 版：$20/月，无限快速请求
• 企业版：按需定价

省钱技巧

1. 简单补全用免费的 Tab 功能
2. 复杂问题再用 Cmd + K / Cmd + L
3. 利用 .cursorrules 减少重复说明
4. 批量操作用 Composer 一次完成

常见问题

Q: Cursor 会上传我的代码吗？

A: 默认会。但可以在设置中开启 Privacy Mode，仅本地索引。

Q: 支持哪些模型？

A: 支持 GPT-4、Claude 3、GPT-4o 等，可在设置中切换。

Q: 能用自己的 API Key 吗？

A: 可以。设置中填入 OpenAI 或 Anthropic 的 API Key。

总结

Cursor 代表了 AI 编辑器的发展方向：从辅助工具变成协作伙伴。

核心使用心法：

1. 小修改用 Cmd + K：快速内联编辑
2. 问问题用 Cmd + L：对话式交互
3. 大改动用 Cmd + I：Composer 多文件编辑
4. 定规则用 .cursorrules：让 AI 懂你的项目

最后，工具再好也只是工具。理解 AI 的能力边界，该手动的时候还是要手动。

相关文章推荐：

• GitHub Copilot 高效使用技巧
• 代码生成提示词最佳实践