教程:Cursor使用教程,2小时玩转cursor,cursor无限续杯_哔哩哔哩_bilibili

一.安装与配置

Cursor下载 | 官方正式版 - 重塑代码逻辑的AI编译器

1.Cursor工具汉化配置步骤

  1. 打开扩展面板
    按下 Ctrl + Shift + X(Windows / Linux)或 Cmd + Shift + X(Mac),打开左侧的扩展商店。

  2. 搜索并安装中文语言包
    在搜索框中输入 Chinese 或 中文,找到下载量最高的 Chinese (Simplified) Language Pack for Visual Studio Code,点击“安装”。

  3. 打开语言配置命令
    按下 Ctrl + Shift + P(Windows / Linux)或 Cmd + Shift + P(Mac),输入 Configure Display Language 并回车。

  4. 选择中文并重启
    在语言列表中选择 中文(简体) 或 zh-cn,保存设置后重启 Cursor。重启后界面即变为中文(菜单、提示信息、设置等均汉化)。

2.从VS Code配置迁移

2.1 一键导入配置

此功能可将当前电脑中 VS Code 的默认位置配置文件一键迁移到 Cursor,包括:

  • 扩展(Extensions)

  • 主题(Themes)

  • 设置(Settings)

  • 键绑定(Keybindings) 等

VS Code 配置文件默认位置:

操作系统 路径
Windows %appdata%\code\user\(其中 settings.json 等文件)
macOS ~/Library/Application Support/Code/User/
Linux ~/.config/code/user/

⚠️ 注意:
并非所有 VS Code 扩展都与 Cursor 完全兼容。部分依赖 VS Code 特定 API 的插件可能导致:

  • 整个导入过程失败

  • 部分功能异常(如主题显示错误)


操作步骤

  1. 打开 Cursor 设置
    按 Cmd + Shift + J(Mac)或 Ctrl + Shift + J(Windows/Linux)

  2. 导航到 常规 → 帐户

  3. 在 “VS Code 导入” 区域,点击 “导入” 按钮即可

2.2 手动配置文件迁移

一、从 VS Code 导出配置文件

  1. 打开命令面板
    按 Cmd + Shift + P(Mac)或 Ctrl + Shift + P(Windows / Linux)

  2. 搜索并选择
    输入 Preferences: Open Profiles (UI) 并回车

  3. 选择要导出的配置文件
    在左侧边栏中找到你要导出的配置(例如 “Default”)

  4. 导出
    点击配置文件旁边的 ...(三个点菜单),选择 Export Profile

  5. 选择导出方式

    • 导出到 本地计算机(保存为 .code-profile 文件)

    • 导出到 GitHub Gist(需登录 GitHub 账户)


二、导入到 Cursor

  1. 打开命令面板
    按 Cmd + Shift + P(Mac)或 Ctrl + Shift + P(Windows / Linux)

  2. 搜索并选择
    输入 Preferences: Open Profiles (UI) 并回车

  3. 开始导入
    点击 “New Profile” 旁边的下拉箭头,选择 “Import Profile”

  4. 提供配置文件

    • 如果导出到 GitHub Gist:粘贴 Gist 的 URL

    • 如果导出到 本地文件:点击 “选择文件” 并上传之前保存的 .code-profile 文件

  5. 确认导入
    点击对话框底部的 Import 按钮

  6. 激活新配置
    导入成功后,在侧边栏选中新出现的配置文件,点击旁边的 ✓(勾号图标) 激活它

3.Java语言环境

接下来,我们在Cursor中进行 Java 开发配置,包括设置 JDK、安装必要的扩展、调试、运行 Java 应用程序以及集成 Maven等构建工具。

3.1 配置本地jdk和maven配置

自动读取情况

如果 Cursor 基于类似 VS Code 的机制运行(Cursor 与 VS Code 有诸多关联),在系统环境变量中正确配置了 `JAVA_HOME` 和 `MAVEN_HOME` ,且环境变量配置无误(变量值准确指向 JDK 和 Maven 的安装目录 ),部分情况下 Cursor 能自动识别并应用这些配置。比如,当你在 Cursor 中创建、运行或调试 Java 项目时,它可能会利用自动读取到的环境变量来找到对应的 JDK 和 Maven 位置,完成代码编译、项目构建等操作。

手动配置情况

若 Cursor 没有自动读取到 JDK 和 Maven 配置,就需要手动配置。可在 `settings.json` 文件中进行操作。按 `Ctrl + Shift + P` (Windows/Linux)或 `Cmd + Shift + P`(Mac)打开命令面板,输入 “Preferences: Open User Settings (JSON)” 并回车,打开 `settings.json` 文件 。然后添加或修改以下内容:

json
{
    "java.home": "你的 JDK 安装路径(对应 JAVA_HOME 变量值)",
    "java.configuration.maven.userSettings": "你的 Maven 配置文件 settings.xml 所在路径"
}

例如:

{

    "redhat.telemetry.enabled": true,

    "cmake.configureOnOpen": true,

    "java.jdt.ls.java.home": "D:/bc/Java/pz/jdk",

    "java.configuration.maven.userSettings": "D:/bc/Java/demo1/apache-maven-3.8.8/conf/settings.xml"

}

保存文件后,重启 Cursor 使配置生效。

3.2 Java环境扩展插件安装和使用

Java 开发环境必备插件(Extension Pack for Java)

即使已安装 JDK 和 Maven 并配置好环境变量,仍需在编辑器(如 Cursor / VS Code)中安装 Java 扩展插件,才能获得完整的开发体验。这些插件能将编辑器从普通文本编辑器转变为智能 IDE,提供:

  • 语法高亮

  • 智能代码补全

  • 错误提示

  • 调试支持

  • Maven / Gradle 项目管理

  • 测试运行等核心功能


安装方法(以 Cursor 为例)

  1. 打开扩展面板:
    Ctrl + Shift + X(Windows/Linux)或 Cmd + Shift + X(Mac)
    或点击左侧活动栏的 方块图标

  2. 搜索 Extension Pack for Java,选择由 Microsoft 发布的扩展包,点击安装。

Extension Pack for Java 是一个插件集合,而非单个插件。安装后即可获得完整的 Java 开发环境。


包含的主要插件及作用

插件名称 主要功能
Language Support for Java(TM) by Red Hat 语法高亮、智能代码补全、代码检查、代码格式化(Shift+Alt+F / Shift+Option+F)、代码导航、重构支持
Debugger for Java 设置断点、调试时查看变量值、对象属性、调用栈,追踪程序执行流程
Maven for Java 创建 Maven 项目、管理依赖、执行构建任务(clean、compile、package 等)
Test Runner for Java 支持 JUnit / TestNG,运行和调试测试用例,展示测试结果及日志
Project Manager for Java 管理多个 Java 项目、快速切换、导入本地项目、可视化项目结构
Gradle for Java 创建 Gradle 项目、运行 Gradle 任务、管理构建与测试流程、查看依赖关系

二.Cursor三大核心AI功能

1.Tab键:智能小助手

Cursor 的 Tab 键具有强大的代码自动补全功能,基于 AI 模型,能根据代码上下文自动预测并生成代码补全建议和代码修复重构,还可用于导航代码等!

Tab 键接受建议,也可以通过按 Esc 键拒绝建议。要逐字部分接受建议,请按 Ctrl/⌘ + →

1.1 单行/多行代码补全

已有代码片段:

//需求:写一个工具类计算数组平均值
public class ArrayUtils {
   // 按tab会完成补全
}

按tab键 → Cursor 自动生成代码:

//需求:写一个工具类计算数组平均值
public class ArrayUtils {
    public static void main(String[] args) {
        int[] nums = {1,2,3,4,5,6,7,8,9,10};
        System.out.println(average(nums));
    }
    public static double average(int[] nums) {
        int sum = 0;
        for (int num : nums) {
            sum += num;
        }
        return (double) sum / nums.length;
    }
}
1.2 智能代码重写

已有代码片段:

import java.util.List;
import java.util.Arrays;
import java.util.ArrayList;

public class ArrayUtils {
//在循环上方添加注释:// 使用 Stream 重构
//光标放在循环代码块的任意位置,按 Tab 键
    public void arrayFor() {    
        List<Integer> numbers = Arrays.asList(1, 2, 3, 4, 5);
        List<Integer> evenNumbers = new ArrayList<>();
        for (int num : numbers) {
            if (num % 2 == 0) {
                evenNumbers.add(num);
            }
        }
    }
}
按Tab键 → 自动补全:
public void arrayFor() {    
    List<Integer> numbers = Arrays.asList(1, 2, 3, 4, 5);
    List<Integer> evenNumbers = numbers.stream().filter(num -> num % 2 == 0).collect(Collectors.toList());
}
1.3 多行协同优化

Cursor 的 多行协同优化 核心能力:多行代码,一次性完成 语法升级、结构重组、安全修复

多行数据联想

int count; // 普通变量
String name; // 姓名
boolean isValid; // 是否有效
double price; // 价格
//tab 会继续联想变量类型

多行批量修改

public static int add(int a, int b) {
    //代码添加注释
    //
    System.out.println("第一次输出");
    //
    System.out.println("第二次输出");
    //
    System.out.println("第三次输出");
    //
    System.out.println("第四次输出");
    return 0;
}
1.4 光标位置预测

准备测试代码

public class ArrayUtils {
    //给下面方法添加注释
    /**
     *
     */
    public static int add(int a, int b) {
        return 0;
    }

    /**
     *
     */
    public static int subtract(int a, int b) {
        return 0;
    }

    /**
     *
     */
    public static int multiply(int a, int b) {
        return 0;
    }

    /**
     *
     */
    public static int divide(int a, int b) {
        return 0;
    }

}

1.5 接受,接受部分和拒绝

准备测试类

public class Student {
     
    private String name;
    private int  age;
    //tab 
    //tab 接收完整补全
    //ctrl + -> 部分和逐步接收补全 [需要开启部分补全配置]
    //esc 或者 继续输入 拒绝补全

}

1.6 Tab相关配置说明

配置位置:cursor settings > features > tab

Cursor Tab(总开关)
启用/禁用 Cursor Tab 功能。勾选后才能用 Tab 键触发 AI 代码建议(多行补全、智能续写);取消勾选则 Tab 仅作普通缩进。

Accept the next word of a suggestion via Ctrl+RightArrow
开启后可用 Ctrl+→(Windows/Linux)或 ⌘+→(Mac)逐个单词接受 AI 建议。当 AI 建议很长时,可拆分接受部分内容。例如 AI 建议 const fullName = firstName + " " + lastName;,只想用前半部分,可通过快捷键逐个单词确认。

Enable Cursor Tab suggestions in comments
让 AI 在注释中也提供 Tab 建议。写注释时可补全思路,比如输入 // 实现冒泡排序的步骤:,按 Tab 自动续写后续步骤。

Show whitespace only Cursor Tab suggestions
控制是否显示仅包含空白(空格、换行、缩进)的 AI 建议。勾选后,在缩进混乱的代码(如方法体内部没有正确缩进)按 Tab 会出现修正建议;不勾选则无建议。

Tab to import necessary modules with Cursor Tab. Only supports TypeScript
在 TypeScript 中,写代码缺少模块时,按 Tab 自动帮你导入依赖。

Enable auto import for Python. This is a beta feature
(测试版)为 Python 开启类似功能,按 Tab 自动导入缺失模块。

2.Chat: 对话模式

Chat(以前称为“Composer”)是 Cursor 的 AI 助手,位于的侧边栏中,可让您通过自然语言与代码库进行交互。您可以提出问题、请求代码编辑、获取终端命令建议等 - 所有这些都无需切换上下文。

Cursor chat 主要功能点:

  • Chat 能够了解代码库并代表我们对其进行更改。这是实现新功能的强大方法,也是功能请求的完美工具。
  • Chat通过深入了解我们的代码库以及每个组件如何组合在一起,Chat 可以帮助您重构代码库。
  • Chat可以根据我们的需求,从零开始进行项目搭建,包括创建项目结构,安装依赖项,甚至编写初始代码,让我们尽快开始业务编码。
  • Chat也可以根据我项目的错误信息,进行错误定位和错误代码直接调整解决。

2.1快速开始

使用 ⌘+L (Mac) 或 Ctrl+L (Windows/Linux) 访问侧边栏中的聊天。用自然语言输入我们的请求,AI 将做出相应的响应。

注意: 与Chat 对话时,建议采用清晰、具体的语言格式,最好包含任务类型、上下文描述和具体要求。

以下是几个参考模板:

  • 代码生成类

    [任务类型]:请生成一个 {功能描述} 的 {编程语言/框架} 实现
    
    [具体要求]:
    1. 使用 {特定技术/库}
    2. 包含 {特定功能点}
    3. 符合 {编码规范/设计模式}
    

    示例:

    请生成一个学习计划页面的HTML+CSS+JavaScript实现
    
    [具体要求]:
    1. 使用Tailwind CSS v3和Font Awesome
    2. 包含任务添加、编辑、删除功能
    3. 包含日历视图展示学习计划
    4. 包含学习进度可视化图表
    5. 符合现代UI设计原则和响应式设计
    6. 具有平滑的动画和交互效果
    
  • 代码修改类

    [任务类型]:请帮我修改 {上下文:具体文件/代码片段},实现 {预期功能}
    
    [当前问题]:{现有的错误/不足描述}
    
    [具体要求]:
    1. 保持 {现有功能/结构} 不变
    2. 使用 {特定方法/技术} 改进
    3. 修复 {具体错误/警告}
    

    示例:

    请帮我修改当前的 React 组件,优化列表渲染性能。
    当前问题:滚动时列表卡顿,存在明显性能问题。
    要求:
    1. 保持现有 UI 不变
    2. 使用 React.memo 和虚拟列表技术优化
    3. 添加性能监控日志
    
  • 代码解释类

    [任务类型]:请解释 {代码片段/功能模块} 的 {具体方面}
    
    [上下文信息]:{相关业务背景/技术栈}
    
    [具体问题]:
    1. {不理解的语法/逻辑}
    2. {特定设计选择的原因}
    3. {潜在的问题/优化点}
    

    示例:

    请解释这段 TypeScript 代码的泛型约束和类型推导逻辑。
    上下文:这是一个用于数据验证的工具函数。
    具体问题:
    1. <T extends object> 这里为什么要加 extends object?
    2. 类型推导是如何工作的?
    3. 是否存在类型安全隐患?
    
  • 流程自动化类

    [任务类型]:请创建一个自动化流程,实现 {目标描述}
    
    [操作步骤]:
    1. 从 {数据源} 获取 {数据类型}
    2. 执行 {数据处理/转换操作}
    3. 将结果保存到 {目标位置}
    4. 触发 {后续操作/通知}
    
    [具体要求]:
    1. 使用 {特定工具/API}
    2. 添加 {错误处理/重试机制}
    3. 生成 {日志/报告}
    

    示例:

    请创建一个自动化流程,每天凌晨从 GitHub API 获取仓库星标数,保存到 Google Sheets 并生成趋势图。
    要求:
    1. 使用 GitHub REST API v3
    2. 添加异常处理和邮件通知
    3. 生成周/月增长趋势图表
    
  • 命令行辅助类

    [任务类型]:请提供 {操作场景} 的 {操作系统} 命令
    
    [具体需求]:
    1. {执行的具体操作}
    2. 包含 {特定参数/选项}
    3. 处理 {特殊情况/错误}
    

    示例:

    请提供在 macOS 上批量压缩图片的命令行方案。
    需求:
    1. 将当前目录下所有 PNG/JPG 图片压缩 50%
    2. 保留原始文件并添加 "-compressed" 后缀
    3. 显示每个文件的压缩前后大小对比
    

提示词技巧总结:

  1. 提供上下文:提及项目语言、框架、业务背景等信息
  2. 分点描述:将复杂需求拆解为具体步骤或要求
  3. 使用技术术语:准确的术语能帮助 AI 更精准理解需求
  4. 明确边界:说明必须保留的现有功能或禁止的实现方式
  5. 示例引导:附上期望输出示例或参考代码风格

2.2 Chat三种模式

Chat 提供针对特定任务优化的不同模式:

  1. Agent代理模式(默认): 允许Cursor学习和理解我们的项目代码,并且代表们可以直接进行项目代码更改![识别项目结构]
  2. Ask对话模式:获取项目代码相关的解释和答案,但是不会直接修改项目代码![识别项目结构]
  3. Manual手动模式:需要我们执行项目上下文(修改范围,后续会详细讲解)重点编辑![不识别项目结构]
2.2.1 Agent模式体验

Agent 是 Cursor 中的默认且最自主的模式,旨在以最少的指导处理复杂的编码任务。它启用了所有[工具 ],可以自主探索您的代码库、阅读文档、浏览 Web、编辑文件和运行终端命令以高效完成任务。

Agent的能力总结:

  • 独立探索您的代码库,识别相关文件,并进行必要的更改
  • 使用所有可用工具搜索、编辑、创建文件和运行终端命令
  • 全面了解项目结构和依赖关系
  • 将复杂任务分解为可管理的步骤并按顺序执行

生成和修改示例:

  1. 新打开一个文件夹

  2. ctrl + L 进行对话模式(默认 agent)

  3. 用例对话

    使用html,css,javascript来实现一个贪吃蛇页面!
    要求:
      1. 要求有积分统计
      2. 页面要有多种背景可以切换
      3. 代码添加中文注释
      4. 不能使用var 只能使用let和const声明变量
    
  4. 生成代码

  5. 运行代码对话

    把index.html页面在浏览器打开
    
  6. 后续调整代码对话

    在页面中添加倒计时功能,每次60秒!

2.2.2 Ask模式体验

Ask 是 Chat 的 “只读” 模式,用于提出问题、探索和了解代码库。它是 Cursor 中的一种内置对话模式!

对比:Ask 是其他默认模式(Agent 和 Manual)所独有的,因为它默认不应用任何建议的更改 - 这使它成为一种 “只读” 模式,具有读取文件和其他上下文的完整能力,但不能自行进行任何更改。这对于了解我们可能不想更改的代码库或在实施之前使用 AI 规划解决方案非常有用!

2.2.3 Manual模式体验

与 Ask 模式不同,它不探索代码库或运行终端命令;它完全取决于您的具体说明和您提供的上下文(例如,通过 @文件名),AI 生成修改建议后,还要用户手动点击 “应用” 才会改动代码,且通常是单文件 / 局部代码调整

是的,你的观察很准确,新版 Cursor 的 Chat 模式确实调整了,以前的 Manual 模式被取消了,并新增了 Debug 模式。

这次的更新主要是为了把 AI 的能力按更清晰的层级进行划分,形成一套从低权限高权限的自动化工作流。

新版四大模式的核心区别如下:

模式 一句话概括 权限等级 核心行为
Ask 技术顾问,只回答问题 只读 纯问答,不修改任何代码,不执行命令。
Plan 架构师,设计蓝图 计划 生成详细的可执行计划供你审批,但本身不修改代码。
Debug 排障专家,专注找 Bug 诊断 主动分析报错和日志,提供修复建议。
Agent 自动驾驶的实习生 全权 可自主分析、修改代码、执行命令,实现端到端自动化。

💡 如果习惯了之前的 Manual 模式怎么办?

根据 Cursor 官方的说法,你可以用 自定义模式(Custom Modes) 来“复现”一个类似 Manual 行为的模式。这是一个很灵活的功能,让你可以自己定义 AI 的工作方式。具体方法如下:

  1. 打开 Cursor 设置:按下快捷键 Cmd/Ctrl + Shift + J

  2. 进入自定义模式设置:导航至 Features > Chat,并确保 Custom Modes 选项是开启状态。

  3. 创建新模式:在 Chat 面板的模式选择下拉菜单中,选择 “Add Custom Mode...”。

  4. 配置行为:在弹出的对话框中,你可以进行精细化配置。如果你想模拟 Manual 模式的精准编辑行为,建议按以下方式设置:

    • 禁用自动搜索:取消勾选 Automatic codebase search

    • 禁用自动读取文件:确保 AI 只读取你明确 @ 引用的文件。

    • 配置模型:选择一个你喜欢的 AI 模型。

你还可以通过 Settings → Features → Chat → Default chat mode 来设置默认模式。这样一来,你就可以根据自己的习惯,灵活打造最适合自己的工作流了。

2.3 Chat模式的其他细节

 2.3.1代码编辑选项
修改页面背景,可以添加多种颜色可以选!!

Review:在差异视图中查看建议的更改

Accept/Reject(接受/拒绝) :进行更改后,决定是保留还是放弃更改(agent模式下)

Apply: 在“ask / Manual ”模式下,使用“应用”按钮显式应用更改

2.3.2 Checkpoints 数据还原

Cursor 会在每次发出请求以及每次 AI 更改代码时自动创建代码库的检查点。要恢复到以前的状态,可以单击上一个请求输入框中显示的 Restore Checkpoint 按钮。

注意:恢复的是本次对话之前的状态,而不是本次对话产生的状态。

2.3.3 历史与新建会话

聊天历史记录已移至命令面板。可以通过 Chat 中的 “Show history” 按钮以及运行命令面板中的 “Show Chat History” 命令来访问。

开启新任务、避免对话混乱、保留特定记录或解决误操作时,需在 Cursor 的 Chat 中新建聊天框。

2.3.4 Chat 相关配置说明

Default new chat mode
设置新聊天的默认模式。选 “Agent” 则新聊天默认使用智能代理交互。

Chat text size
调整 AI 聊天消息的文字大小。“Default” 是默认尺寸,可按需修改显示效果。

Auto-refresh chats
勾选后,聊天面板闲置再打开时会自动新建聊天,保持交互新鲜度,避免旧聊天堆积干扰。

Auto-scroll to bottom
新消息生成时自动滚动到聊天面板底部,方便实时查看最新内容。

Auto-apply to files outside context in Manual mode
在 Manual 模式下,允许聊天对当前上下文外的文件自动应用更改,便于处理跨文件任务。

Include project structure(BETA)
勾选后,向模型提供简化的目录树,辅助理解代码库布局,让 AI 更贴合项目结构响应。处于测试阶段。

Full folder contents
启用后展示完整文件夹内容而非结构大纲,便于深度查看详细文件内容。

Enable auto-run mode
允许 Agent 不经确认自动运行工具(如执行命令、写文件)。效率高但有风险,需在信任场景使用。

Command allowlist
仅指定命令能自动执行,精准管控,在保障安全的同时保留特定自动操作。

Command denylist
列入的命令永不自动执行,用于规避危险命令,加固安全防线。

Delete file protection
启用后阻止 Agent 自动删除文件,防止误删关键文件,保护数据安全。

MCP tools protection
开启后 Agent 不能自动运行 MCP 工具,避免工具误操作影响系统。

Dot files protection
勾选后阻止 Agent 自动修改点文件(如 .gitignore),保护版本控制等配置文件。

Outside workspace protection
勾选后,Agent 无法自动创建/修改工作区外的文件,防止影响外部系统,保障工作区独立性。

Dialog ‘Don’t ask again’ preferences
管理曾选 “不再询问” 的对话框,方便回顾或重置交互确认逻辑。

Collapse input box pills in pane or editor
勾选后折叠聊天面板/编辑器输入框里的标识,节省空间,让界面更简洁。

Iterate on lints
启用后,Agent 模式聊天自动迭代修复代码检查(linter)错误,助力自动代码优化。

Hierarchical Cursor Ignore
启用后,.cursorignore 文件的规则作用于所有子目录。修改配置需重启 Cursor。

Auto-accept diffs
启用后,合成器里的差异(diffs)在不在工作树中时就会被自动接受,简化版本差异处理流程。

Custom modes(BETA)
允许创建自定义模式,可按需定制交互逻辑。处于测试阶段。

Play sound on finish(BETA)
聊天响应完成时播放声音提醒,不用一直盯着屏幕。测试功能。

Auto Group Changes(BETA)
自动分组聊天会话中与 LLM 交互产生的更改,方便集中 review。测试功能。

Web Search Tool(BETA)
已勾选时,允许 Agent/Ask 模式聊天联网搜索信息,补充知识,让回答更全面。测试功能。

3.Ctrl+K: 内联智能修改

3.1 触发修改提示框

在 Cursor 中,我们将按 Ctrl/Cmd K 时出现的栏称为“Prompt Bar”。它的工作原理类似于用于聊天的 AI 输入框,可以在其中正常键入,或使用 @引用其他上下文(后续讲解)。

Cmd K的模式说明:

  • 内联生成:如果在按 Ctrl/Cmd K 时未选择任何代码,Cursor 将根据您在提示栏中键入的提示生成新代码。
  • 内联编辑:对于就地编辑,只需选择要编辑的代码,然后在提示栏中键入即可。

3.2 Cmd + K 体验
  • 内联生成

打开 main.js,光标放文件末尾(无选中代码)

按 Cmd/Ctrl + K,输入提示:

生成一个带点击动画的按钮组件,用 JavaScript 实现,点击后控制台打印次数

实现效果

  • 内联编辑

继续打开刚刚main.js

选中init方法,按 Cmd/Ctrl + K,输入提示:

实现效果

3.3 Terminal Cmd + K 体验

在 Cursor 终端中使用 Cmd K 通过提示栏界面生成和运行命令, 在内置的 Cursor 终端中,您可以按 Ctrl/⌘ K 打开终端底部的提示栏。此提示栏允许您在终端中描述所需的作,终端 Cmd K 将生成一个命令。您可以通过按 esc 接受命令,也可以立即使用 Ctrl/⌘ + Enter 运行命令。

三.Cursor精准上下文指定

在 Cursor 工具里,“上下文(Context)” 可理解为 让 AI 准确理解需求、辅助编码的 “信息参考范围” ,是 AI 读懂代码、精准响应的关键!

1.Codebase Indexing 代码库索引

1.1忽略文件配置

Cursor 读取项目的代码库并为其编制索引以支持其功能。可以通过将 .cursorignore 文件添加到根目录来控制 哪些文件被忽略和Cursor限制访问。

  • 提升索引速度:排除大型依赖、生成文件(如 node_modulesdist
  • 避免干扰:某些配置文件可能包含敏感信息或与当前任务无关

配置 .cursorignore忽略文件:

  • 自己创建 .cursorignore 文件添加到代码库目录的根目录下,并列出要忽略的目录和文件

  • 使用cursor配置快捷创建忽略文件 cursor setting > indexing > Configure ignored files

测试示例

假设我们创建一个简单的 .cursorignore 文件,内容如下:

# 忽略以下三个文件
index.html
style.css
main.js

现在,我们查看当前项目的目录结构(用文字图形表示):

my-project/
├── .cursorignore          # 已创建,忽略规则如上
├── index.html             # 将被忽略(不会加入索引)
├── style.css              # 将被忽略
├── main.js                # 将被忽略
├── src/
│   ├── app.js             # 正常索引
│   └── utils.js           # 正常索引
├── assets/
│   └── logo.png           # 正常索引
└── node_modules/          # 建议也加入忽略(本例未加,但通常需要)

2.Rules 规则

2.1 规则介绍

Rules是给Cursor AI功能(规则适用于 Chat和 Cmd K)生成结果添加规则和限制,让 AI 生成的代码贴合团队规范,减少人工二次修改成本,主要的作用如下:

  • 可约束代码风格(如强制用驼峰命名、要求函数必须写注释 )
  • 能限定技术选型(如禁止使用某老旧库、优先用项目指定工具类 )
  • 提前指定核心参数(如提前设置连接数据库的地址和账号密码等)

Rule主要的配置方案有两种:

维度 项目规则(Project Rules) 用户规则(User Rules)
作用范围 仅对当前项目生效,团队成员共享相同规则 对所有项目生效,个人专属配置
存储位置 项目根目录下的 .cursor/rules/随意.mdc 文件 用户配置目录(如 ~/.cursor/rules
同步方式 随项目代码提交到版本库(如 Git),团队共享 仅本地生效,不随项目同步
适用场景 统一团队编码规范(如函数注释格式、依赖版本) 个人习惯(如快捷键、AI 响应风格)

注意: 项目规则和用户规则同时存在并且规则冲突,项目规则优先级更高

2.2 项目规则配置

有两种方式可以创建规则文件:

  • 手动创建文件夹和文件:在项目根目录下创建文件夹 .cursor/rules/,然后在其中新建一个以 .mdc 为扩展名的文件(文件名可任意,例如 frontend-rules.mdc)。

  • 快捷命令创建:按下 Ctrl + Shift + P(Windows/Linux)或 Cmd + Shift + P(Mac)打开命令面板,输入 “New Cursor Rule” 并回车,Cursor 会自动在正确位置创建并打开一个 .mdc 文件。

编写项目规则文件

---
description: "团队前端项目规范"
priority: 1000
---

# 代码风格
1. 函数必须包含 JSDoc 注释
2. 禁止使用 `var`,统一用 `const`/`let`
3. 函数命名必须添加 zwf_前缀, 例如:zwf_login

# 依赖管理
- 优先使用项目内已有的工具函数(如 `utils/request`)
- 禁止引入低版本的 lodash(<4.0.0)

项目规则文件生效测试

  1. 准备一个main.js文件

  2. 进入ctrl + k

  3. 内联生成函数,查看是否规则生效

    生成两个方法一个登录一个注册!
    
  4. 项目规则生效效果展示

    /**
     * 用户登录
     * @param {string} username - 用户名
     * @param {string} password - 密码
     */
    const zwf_login = (username, password) => {
      // 登录逻辑
    };
    
    /**
     * 用户注册
     * @param {string} username - 用户名
     * @param {string} password - 密码
     * @param {string} email - 邮箱
     */
    const zwf_register = (username, password, email) => {
      // 注册逻辑
    };

2.3 用户规则配置

用户规则在cursor settings > rules中定义。

添加规则内容即可

所有回答都便用中文!
每行代码都需要添加中文的注释!
连接数掘库的信息:地址:localhost账号:root密码:root

用户规则不支持 MDC,它们只是纯文本。

2.4 mdc语法了解

Cursor 的 MDC(Markdown with Cursor)语法是专门为编写项目规则设计的轻量级格式,它结合了 Markdown 的可读性和元数据配置能力。接下来,我们来说明下mdc文件语法。

2.4.1 MDC 文件组成部分
  1. 前置元数据(Frontmatter)
    • 用 --- 包裹的 YAML 格式配置
    • 定义规则的基本属性(如作用范围、优先级)
  2. 规则内容(Markdown 正文)
    • 用 Markdown 语法写具体规则

2.4.2 前置元数据
---
# 官方约定字段(推荐用,AI 更易理解)
description: "前端项目规则"
globs: "src/**/*.tsx"
priority: 1000

# 自定义字段(自己或团队约定含义)
author: "技术团队"
review_date: "2025-06-04"
special_rule: "仅周一至周五生效"
---

常用元数据字段

字段 作用 示例
description 描述规则用途,指导 AI 如何应用规则 "前端组件编码规范"
globs 指定规则生效的文件范围(支持 glob 语法) "src/**/*.{js,ts,jsx}"
priority 规则优先级(数值越大越优先),解决规则冲突 1000
version 规则版本号(可选) "1.0.0"

2.4.3 规则内容(Markdown 正文)

用 Markdown 的标题、列表、代码块等语法写具体规则,常见结构:

代码风格规则(最常用)

# 一、代码风格
1. 函数必须包含 JSDoc 注释  
   - 至少包含 `@param` 和 `@return` 描述  
2. 变量命名必须使用驼峰命名法(camelCase)  
3. 每行代码长度不超过 120 个字符  

# 二、技术选型
- 禁止直接使用原生 fetch,必须通过项目封装的 request 工具  
- 优先使用 React Hooks 而非 Class 组件  

安全约束规则

# 安全规范 1. 禁止使用 eval() 函数 2. SQL 查询必须使用参数化查询,防止注入攻击 3. 敏感信息(如 API 密钥)必须从环境变量读取 

特殊语法:引用项目文件

用 @file 引用项目内的配置文件,让 AI 参考:

# 工具链配置 1. ESLint 规则必须符合 @file .eslintrc.js 2. 测试用例必须遵循 Jest 框架规范 

2.4.4 完整示例(TypeScript 项目规则)
---
description: "TypeScript 项目编码规范"
globs: "src/**/*.ts"
priority: 1000
---

# 一、基础规范
1. 所有文件必须使用 UTF-8 编码  
2. 统一使用 2 空格缩进  

# 二、类型约束
1. 禁止使用隐式 any 类型  
   - 示例:`const num: number = 123`(显式)  
   - 禁止:`const num = 123`(隐式)  
2. 接口命名必须以 `I` 开头(如 `interface IUser`)  

# 三、项目约束
- 所有 HTTP 请求必须通过 @file src/utils/request.ts 封装的工具  
- 状态管理必须使用 Redux Toolkit,禁止直接修改 state  

3.@ 符号

在 Cursor 中使用 @ 符号在聊天中引用代码、文件、文档和其他上下文的指南,直接更具体的指定上下文环境!

以下是所有可用 @ 符号的列表:

  • @Files- 引用项目中的特定文件
  • @Folders - 引用整个文件夹以获得更广泛的上下文
  • @Code - 引用代码库中的特定代码片段或符号
  • @Docs- 访问文档和指南
  • @Git- 访问 git 历史记录和更改
  • @Past Chats- 使用汇总的 Composer 会话
  • @Cursor Rules-使用光标规则
  • @Web- 参考外部 Web 资源和文档
  • @Lint Errors- 引用 lint 错误(仅限Chat)

4.3.1 @Files使用和测试

准备测试文件 main.js

/**
 * 用户登录方法
 * @param {Object} params - 登录参数
 * @param {string} params.username - 用户名
 * @param {string} params.password - 密码
 * @returns {Promise} 登录结果
 */
const zwf_login = async (params) => {
  try {
    const response = await request.post('/api/login', params);
    return response.data;
  } catch (error) {
    console.error('登录失败:', error);
    throw error;
  }
};

/**
 * 用户注册方法
 * @param {Object} params - 注册参数
 * @param {string} params.username - 用户名
 * @param {string} params.password - 密码
 * @param {string} params.email - 邮箱
 * @returns {Promise} 注册结果
 */
const zwf_register = async (params) => {
  try {
    const response = await request.post('/api/register', params);
    return response.data;
  } catch (error) {
    console.error('注册失败:', error);
    throw error;
  }
};

测试@File对话

帮我总结下 @main.js 中包含哪些方法?

4.3.2 @Code使用和测

测试@Code 对话

帮我逐行解释下 @zwf_register 代码的含义!并且最终在源文件中添加注释!

查看对话结果

4.3.3 @Docs使用和测试

@Docs作用说明

@Docs 将 Cursor 连接到来自常用工具和框架的官方文档。当需要以下内容的最新权威信息时,请使用它:

  • API 参考:函数签名、参数、返回类型
  • 入门指南 :设置、配置、基本用法
  • 最佳做法 :源中的推荐模式
  • 特定于框架的调试 :官方故障排除指南

@Docs对应文档配置

可以通过 cursor settings > features > Docs(cursor近期更新频繁,配置页面会有调整)来进行文档索引配置。粘贴所需文档的 URL 后,将显示以下模式:

地址: https://baomidou.com/introduce/ (mybatis-plus的官网测试)

  • name:一般用于标识文档的名称、简称或唯一识别名,方便在系统里区分不同文档配置。比如这里填MyBatis - plus,就是用框架名称作为文档标识,后续可通过这个name快速找到、关联对应的文档配置。

  • prefix:常指文档 URL 的前缀部分,可用于拼接完整文档路径,或作为统一的基础地址标识。像填的https://baomidou.com ,可能是该框架文档介绍板块的基础前缀,后续若要拼接具体文档子页面路径(如某个功能详细说明路径 ),可以基于这个prefix去扩展,让文档地址管理更规整 。

  • entrypoint:一般是文档的入口地址,即用户访问该文档时最先进入的页面。这里和prefix填了一样的地址,说明https://baomidou.com/introduce/ 就是MyBatis - plus文档的起始访问页面,用户通过这个entrypoint能直接进入到对应文档内容开始浏览 。

测试@Docs对话

基于 @MyBatis-plus 查询下乐观锁插件如何使用

4.3.4 @Web使用和测试

@Web作用说明

@Web 在实时 Internet 上搜索当前信息、博客文章和社区讨论。当您需要时使用它:

  • 最近的教程 :社区生成的内容和示例
  • 比较 :比较不同方法的文章
  • 最近更新 :Very Recent updates or announcement(最近的更新或公告)
  • 多种视角 :不同的问题处理方法

测试@Web对话

@Web React 19 的最新性能优化

查看对话结果

对比@Docs和MCP配置

4.3.5 @Linter Errors使用和测试

@Linter Errors作用和说明

@Linter Errors 符号会自动捕获并提供有关当前活动文件中的任何 linting 错误和警告的上下文。

准备错误代码(BubbleSort.java)

public class BubbleSort {
    /**
     * 冒泡排序方法
     * @param arr 待排序的数组
     */
    public static void bubbleSort(int[] arr) {
        int n = arr.length;
        // 外层循环控制排序轮数
        for (int i = 0; i < n - 1; i++) {
            // 内层循环进行相邻元素比较和交换
            for (int j = 0; j < n - 1 - i; j++) {
                // 如果当前元素大于下一个元素,则交换它们
                if (arr[j] > arr[j + 1]) {
                    int temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }
    }

    /**
     * 打印数组的辅助方法
     * @param arr 要打印的数组
     */
    public static void printArray(int[] arr) {
        for (int i = 0; i < arr.length; i++) {
            //此处故意出现错误,会出现数组越界
            System.out.print(arr[i+2] + " ");
        }
        System.out.println();
    }

    public static void main(String[] args) {
        // 测试数组
        int[] arr = {64, 34, 25, 12, 22, 11, 90};
        
        System.out.println("排序前的数组:");
        printArray(arr);
        
        // 执行冒泡排序
        bubbleSort(arr);
        
        System.out.println("排序后的数组:");
        printArray(arr);
    }
} 

测试@Lint Errors 对话

@Linter Errors 程序运行报错了,你基于报错信息分析下,并且直接解决下错误!

测试结果

四.Cursor智能插件开发实战

Cursor官网开发指导流程:

1.Cursor设计Chrome浏览器插件

需求设计

创建:01_chrome插件需求和要求说明

实现一款Chrome的插件,要包含下面三个功能:
   1. 解释选中的段落或者关键词
   2. 翻译选中的段落或者关键词(支持中文和英文翻译即可)
   3. 朗读选中的段落或者关键字(支持中文和英文朗读)
   4. 润色和替换选中的文本文案
细节要求:
   1. 当选中段落或者关键词时,出现插件,直接悬浮在选中关键词和段落上!(显示顺序:解释,翻译,朗读,润色)
   2. 解释,翻译,润色的结果直接在悬浮下方出现结果即可
   3. 翻译添加语言选择(翻译目标: 中文还是英文)
   4. 润色结果可以进行修改,同时提供一键替换功能,替换目标文案内容(可编辑情况下可以直接替换)!
   5. 翻译、解释、润色功能实用kimi的api实现即可,具体参考配置kimi api文档
   6. 朗读直接调用chrome浏览器内置插件即可(提供中文和英文朗读)
   7. 并且帮我们写好readme文档,写清在chrome部署插件的过程

https://platform.moonshot.cn/docs

设计和生成项目ui图文本

chat agent模式对话:

@01_chrome插件需求和要求说明 根据插件需求文档,帮我写一份项目的UI文本设计图,将设计图写到 
02_chrome插件UI设计图 文件中! 要求页面简洁,清晰!

生成 02_chrome插件UI设计图

# Chrome插件UI设计文档

## 1. 悬浮菜单设计

### 1.1 基础悬浮菜单
​```
+------------------------+
|     功能按钮组         |
+------------------------+
| [解释] [翻译] [朗读] [润色] |
+------------------------+
​```

### 1.2 功能展示区域
​```
+------------------------+
|     功能按钮组         |
+------------------------+
| [解释] [翻译] [朗读] [润色] |
+------------------------+
|     结果展示区域        |
|                        |
|                        |
+------------------------+
​```

## 2. 各功能界面设计

### 2.1 解释功能
​```
+------------------------+
|     功能按钮组         |
+------------------------+
| [解释] [翻译] [朗读] [润色] |
+------------------------+
|     解释结果           |
| 选中的文本解释内容...    |
+------------------------+
​```

### 2.2 翻译功能
​```
+------------------------+
|     功能按钮组         |
+------------------------+
| [解释] [翻译] [朗读] [润色] |
+------------------------+
| 目标语言: [中文 ▼]      |
+------------------------+
|     翻译结果           |
| 翻译后的文本内容...      |
+------------------------+
​```

### 2.3 朗读功能
​```
+------------------------+
|     功能按钮组         |
+------------------------+
| [解释] [翻译] [朗读] [润色] |
+------------------------+
| 朗读语言: [中文 ▼]      |
| [▶ 开始朗读] [■ 停止]   |
+------------------------+
​```

### 2.4 润色功能
​```
+------------------------+
|     功能按钮组         |
+------------------------+
| [解释] [翻译] [朗读] [润色] |
+------------------------+
|     润色结果           |
| 润色后的文本内容...      |
|                        |
+------------------------+
| [编辑] [替换原文]       |
+------------------------+
​```

## 3. 设计规范

### 3.1 颜色方案
- 主色调:#4A90E2(蓝色)
- 背景色:#FFFFFF(白色)
- 文字颜色:#333333(深灰)
- 边框颜色:#E5E5E5(浅灰)

### 3.2 字体规范
- 主字体:系统默认字体
- 标题:14px
- 正文:12px
- 按钮文字:12px

### 3.3 间距规范
- 内边距:8px
- 按钮间距:4px
- 功能区间距:12px

### 3.4 交互规范
1. 选中文本后,悬浮菜单自动显示在选中文本附近
2. 点击功能按钮后,结果区域自动展开
3. 鼠标移出悬浮菜单区域,菜单自动隐藏
4. 所有按钮hover效果:背景色变浅
5. 编辑区域支持直接修改,替换按钮一键替换原文

## 4. 响应式设计
- 悬浮菜单宽度:最小200px,最大400px
- 高度自适应内容
- 确保在各种屏幕分辨率下都能正常显示 

配置和导入kimi docs文档

配置位置: cursor settings > Features > Docs > add new doc

生成kimi api key

登录kimi api 用户中心: https://platform.moonshot.cn/console/api-keys

创建kimi api key (第一次赠送15元):

2.Chrome插件实现

准备一个参考界面(参考豆包)

实现插件功能

​​@01_chrome插件需求和要求说明 @02_chrome插件UI设计图 基于需求和UI设计图,以及参考 @doubaoui.png 图片风格,直接在当前chrome-plugin文件夹下实现插件功能,同时提取单独配置文件用于填写kimi api url和key的位置!代码添加中文注释,实现后再次自检查,确保插件正常运行和实现功能!

配置kimi api key

// API配置
const config = {
  // Kimi API配置
  kimi: {
    apiUrl: 'https://api.moonshot.cn/v1',
    apiKey: 'YOUR_KIMI_API_KEY'   // 问题点:硬编码占位符
  },
  // 默认设置
  defaults: {
    translationTarget: 'zh',
    speechLanguage: 'zh'
  }
};

export default config;

Logo

汇聚全球AI编程工具,助力开发者即刻编程。

更多推荐