登录 订阅
软件

如何使用Cursor？

Sunfly

• 6 min read
如何使用Cursor？
Photo by Caspar Camille Rubin / Unsplash

好的，我们来详细讲解一下如何使用 Cursor 这个强大的AI代码编辑器。

可以把它理解为 “一个内置了超级AI助手的 VS Code”。它在 VS Code 的基础上深度集成了AI功能，让你的编码效率发生质的飞跃。

1. Cursor 是什么？

  • 一个代码编辑器: 它的界面、快捷键、扩展插件系统几乎和 VS Code 完全一样。如果你用过 VS Code，上手 Cursor 几乎没有成本。
  • AI 优先: 它的核心是AI。它不是简单地加一个聊天窗口，而是将AI能力融入到你编码的每一个环节：代码生成、修改、重构、调试、问答等。
  • 上下文感知: 这是它最强大的地方。它能理解你的整个项目代码库（Codebase），而不仅仅是你当前打开的文件。

2. 下载与安装

  1. 访问官网：https://cursor.sh/
  2. 下载对应你操作系统（Windows, macOS, Linux）的版本并安装。
  3. 首次启动: 它会提示你是否从现有的 VS Code 中导入设置和扩展插件。强烈建议选择是，这样你所有的主题、快捷键、插件都会无缝迁移过来，立刻就能获得熟悉的环境。

3. 核心功能与使用方法

Cursor 的AI功能主要通过两个快捷键触发，记住它们就掌握了80%的用法：

  • Ctrl + K：行内编辑/生成 (Inline Edit/Generate) - 这是最常用的功能。
  • Ctrl + L：AI 聊天 (Chat) - 用于更复杂的问答和跨文件操作。

A. 行内编辑/生成 (Ctrl + K)

这是 Cursor 的“魔法棒”。它允许你在不离开代码的情况下，让AI直接修改或生成代码。

如何使用:

  1. 生成新代码:
    • 将光标放在一个空行上。
    • 按 Ctrl + K，会出现一个输入框。
    • 在输入框里用自然语言描述你想要的代码，然后按回车。
    • 示例: 在一个JS文件中，按Ctrl+K，输入 创建一个名为 "fetchUserData" 的异步函数，它从 'https://api.example.com/users' 获取数据并返回json。AI会直接为你写好这个函数。
  2. 编辑/重构现有代码:
    • 选中你想要修改的一段代码。
    • 按 Ctrl + K。
    • 在输入框里描述你的修改要求。
    • 示例 1 (添加功能): 选中一个函数，按Ctrl+K，输入 给这个函数加上 try...catch 错误处理。
    • 示例 2 (重构): 选中一段重复的代码，按Ctrl+K，输入 把这段逻辑重构为一个可复用的函数。
    • 示例 3 (修复Bug): 选中一段有问题的代码，按Ctrl+K，输入 修复这里的逻辑错误。

AI修改后，会以差异对比（Diff）的方式显示给你，你可以选择 Accept (接受) 或 Reject (拒绝) 修改。

B. AI 聊天 (Ctrl + L)

这是一个位于编辑器右侧的聊天面板，功能类似于 ChatGPT，但它能理解你的代码库。

如何使用:

  1. 按 Ctrl + L 打开或聚焦到聊天面板。
  2. 直接提问。

强大之处在于使用 @ 符号来引用代码:

  • @file: [文件名]: 引用某个具体文件。
    • 示例: @file:src/components/Button.js 解释一下这个组件的作用和props。
  • @dir: [目录名]: 引用某个目录。
    • 示例: @dir:src/utils 总结一下这个目录下的所有工具函数的功能。
  • @Codebase: 引用整个项目。这是最强大的功能，可以进行全局分析。
    • 示例 1: (开启 "With Codebase" 开关) 我的项目中用户认证逻辑是在哪里实现的？
    • 示例 2: 帮我找到所有调用了 "localStorage" 的地方。
  • @Terminal: 引用终端的输出。
    • 示例: （终端里运行 npm run build 报错后）@Terminal 解释一下这个构建错误的原因。

C. 其他实用AI功能

  • AI 自动修复 (Auto-Fix): 当代码中有红色波浪线的错误时，将鼠标悬停在上面，旁边会出现一个小灯泡💡，点击它，选择 "Fix with Cursor"，AI会尝试自动修复。
  • 悬停文档 (Hover Docs): 将鼠标悬停在任何函数或变量上，它不仅会显示类型定义，还会用AI生成一段通俗易懂的功能解释。
  • 从头开始生成项目结构: 在聊天框（Ctrl+L）中，你可以要求AI帮你规划一个新项目的目录结构。例如：我需要一个React + TypeScript + Tailwind CSS 的项目结构，请帮我列出所有需要创建的目录和核心文件。

4. 一个实际的工作流示例

假设你要用 React 创建一个新的登录表单组件。

  1. 创建文件: 新建一个 LoginForm.jsx 文件。
  2. 生成骨架 (Ctrl+K): 在空文件中，按 Ctrl+K，输入: 创建一个React函数组件，包含用户名和密码输入框，以及一个登录按钮。使用useState来管理表单状态。 AI会立刻生成组件的基本代码。
  3. 添加样式 (Ctrl+K): 你觉得太丑了。选中整个 return 部分的 JSX 代码，按 Ctrl+K，输入: 使用CSS模块为这个表单添加一些现代化的样式，让输入框和按钮看起来更好看。 (假设你已经配置好了CSS Modules)。
  4. 添加逻辑 (Ctrl+K): 选中 handleSubmit 函数，按 Ctrl+K，输入: 实现表单提交逻辑：调用一个假的API '/api/login'，如果成功就 alert '登录成功'，如果失败就 alert 错误信息。
  5. 理解代码 (Ctrl+L): 你对某个API不熟。选中 useState，在聊天框中问: 在React中，useState是如何工作的？它和普通的变量有什么区别？
  6. 代码审查 (@Codebase): 完成组件后，在聊天框中开启 "With Codebase"，然后提问: 审查一下我刚写的 LoginForm.jsx 组件，有没有可以改进的地方，比如安全性或可访问性？

总结

  • 入门: 从下载安装并导入VS Code配置开始。
  • 核心: 牢记并熟练使用 Ctrl + K (行内操作) 和 Ctrl + L (聊天问答)。
  • 进阶: 学会使用 @ 符号 (@file, @Codebase) 让AI理解你的项目上下文。
  • 心态: 把AI当作一个全天候在线、不知疲倦、知识渊博的结对编程伙伴。多尝试用自然语言和它交流，你会发现它能帮你处理很多繁琐的工作，让你更专注于创造性的核心逻辑。

开始使用吧，它很可能会改变你的编程习惯！

Sign up for more like this.

输入您的邮箱
订阅