Cursor的基础与使用

概述与安装

概述

Cursor 是一款功能强大的AI优先的代码编辑器,主要提供三个核心方向

  1. 深度集成AI模型:让AI充当编译器的核心交互。支持代码块对话、项目级对话、模型自由选择
  2. 强上下文理解能力:可以自动识别项目文件、代码块、错误信息等,提供更直观准确的AI修改能力
  3. 对话式开发体验,仅需自然语言沟通,Coursor会根据指令完成布置的任务,使用者可以轻松扮演产品经理,让Coursor理解命令并自行工作

对比其他编辑工具:

  1. 对比VSCode:基于VSCode打造的AI编程工具,界面和基础操作与VSCode一致,但Cursor提供了更智能的AI模型,更丰富的功能
  2. 对于jetBrains IDE:Cursor提供AI驱动的现代编码体验,

安装与无限续杯

安装:cursor.com

一、登录部分
操作流程:点击 “注册” 或 “登录” 后,可通过邮件、Google 或 GitHub 注册账户。首次使用 Cursor 会获得 14 天免费试用期,登录后即可返回 Cursor 开始编码。

二、“无限续杯” 部分
Cursor 新注册有 14 天免费期和 50 次免费高级提问额度,且通过邮箱账号和电脑机器码识别用户。为绕过限制,有以下方法:
邮箱方面:推荐使用 2925 无限邮注册账号,该平台可自行创建子邮箱(如在主邮箱基础上添加数字等),解决注册新邮箱的需求,注册地址为https://www.2925.com/。

机器码方面:因 Cursor 会校验本机机器码,即便换邮箱,机器码额度用完也无法免费使用。可借助开源项目【yeongpin/cursor-free-vip】,通过下载对应软件(地址:https://github.com/yeongpin/cursor-free-vip/releases),以管理员身份运行并重置机器 ID 来绕过限制。

Coursor 的配置以及汉化说明

在Cursor中,Cursor Settings和Editor Settings是两个不同的配置入口,分别用于管理AI功能和编辑器基础设置。

对比项Cursor SettingsEditor Settings
功能定位管理AI相关功能和Cursor特有设置调整编辑器基础行为和外观
继承性与VS Code差异较大(Cursor独有功能)大部分继承自VS Code(如主题设置)
影响范围影响AI代码生成、分析、对话的效果影响代码编辑体验(如排版、颜色)
典型配置示例调整AI模型参数、代码库索引路径修改字体、启用自动保存、更改主题

2.3.1 Cursor AI相关设置

通过齿轮图标、Cmd/Ctrl + Shift + , 开启“光标设置”,即可进行AI编程相关的定制配置:

以下是对Cursor Settings中各项配置的作用解释:

  • General(常规):包含账户相关设置,可进行登录、注册操作,实现配置在不同设备间的同步;能进行VS Code配置导入,快速迁移主题、快捷键等设置;还能进行隐私配置管理。
  • Features(功能):可开关AI代码补全、对话模式(Ask、Edit、Agent)等核心功能;还能对这些功能的相关参数进行微调,比如调整代码补全的触发灵敏度、对话模式的快捷操作设置等。
  • Models(模型):允许用户选择不同的AI模型(有多个可用选项);添加模型和配置模型访问API Key等。
  • Rules(规则):例如可以制定代码检查规则,像对代码格式、语法规范等进行约束;也能设置特定代码操作的规则,比如当进行代码重构、修改时遵循的逻辑和标准等。
  • MCP:配置多MCP操作的相关行为,比如选择代码时的联动规则、批量编辑代码的方式等,帮助开发者更高效地对多处代码进行统一操作。
  • Indexing(索引):定义需要被索引的代码库路径,让Cursor的AI能理解代码上下文;设置排除规则,排除不需要索引的文件或文件夹(如第三方库、缓存文件),提高索引效率和AI分析的准确性。
  • Beta(测试版):可启用或禁用测试功能,提供反馈等。用户能通过这里尝试Cursor的新功能,并帮助开发团队测试和改进这些尚未正式发布的特性。

2.432 Cursor编辑器设置

  • 访问方式:通过命令面板访问(Cmd/Ctrl + Shift + P)> “Preferences: Open Settings (UI)”
  • 功能:调整编辑器行为和外观,此处和VS Code一致。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

界面展示(Commonly Used 部分)
  • Files: Auto Save:控制带有未保存更改的编辑器的自动保存,选项为 afterDelay
  • Editor: Font Size:控制字体大小(以磅为单位),数值为 20
  • Editor: Font Family:控制字体系列,设置为 Consolas, 'Courier New', monospace
  • Editor: Tab Size (Modified elsewhere):制表符等于的空格数,数值为 4(当“Editor: Detect Indentation”开启时,该设置会根据文件内容被覆盖)。
  • Editor: Render Whitespace:控制编辑器应如何呈现空白字符,选项为 selection
  • Editor: Cursor Style:控制插入输入模式下的光标样式,选项为 line
在Cursor 编辑器设置中,“User”和“Workspace”差异
  • User(用户)
    • 作用范围:User 设置是全局性的,应用于当前登录用户在所有工作空间中的操作。无论打开哪个项目或工作空间,这些设置始终生效。
    • 数据存储:User 设置存储在用户的配置文件中,与特定项目无关。当在不同设备上登录同一账号时,User 设置会同步,保证一致的使用体验。

Workspace(工作空间)

  • 作用范围:Workspace 设置仅在特定的工作空间(一般对应一个项目文件夹)内有效。不同的工作空间可以有各自独立的设置,互不影响。
  • 数据存储:Workspace 设置存储在工作空间根目录下的 .vscode 文件夹(Cursor 基于 VS Code,沿用类似结构)中,仅在该工作空间打开时生效。

2.3.3 Cursor 汉化配置

Cursor工具汉化配置步骤:

  1. 打开扩展:启动 Cursor 后,按下 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.4 从VS Code配置迁移

2.4.1 一键导入配置

一键导入功能,导入的是当前电脑中默认位置存储的VS code的配置文件!这将转移VS code的:Extensions 扩展、Themes 主题、Settings 设置、Keybindings 键绑定等!

VS Code 的配置文件默认位置为:

  • window系统:导入的是 “%appdata%\code\user” 路径下的配置文件。该路径下的 “settings.json” 文件
  • macOS系统:导入的是 “~/.library/Application Support/Code/User/” 路径下的配置内容。
  • Linux系统:导入的是 “~/.config/code/user/” 路径下的配置文件,涵盖了个性化设置、快捷键设置等。

注意:并非所有 VS Code 扩展都与 Cursor 兼容,一些依赖 VS Code 特定 API 的插件,在导入时可能导致整个导入过程失败或部分功能(如主题显示)异常。

  1. 打开Cursor设置(⚙ / Ctrl+Shift+,)
  2. 导航到 常规 > 账户
  3. 在“VS Code Import(VS Code 导入)”下,单击“导入”按钮

三、Cursor三大核心AI功能

3.1 Tab键:智能小助手

Cursor 的 Tab 键具有强大的代码自动补全功能,基于 AI 模型,能根据代码上下文自动预测并生成代码补全建议和代码修复重构,还可用于导航代码等!
Tab 键接受建议,也可以通过按 Esc 键拒绝建议。要逐字部分接受建议,请按 ctrl/⌘ + ←。

3.1.1 单行/多行代码补全
  • 已有代码片段:
# 需求:写一个工具类计算数组平均值
class ArrayUtils:

  • 按tab键→Cursor自动生成代码:
# 需求:写一个工具类计算数组平均值
class ArrayUtils:
    def __init__(self, array):
        self.array = array

    def average(self):
        if not self.array:
            return 0
        return sum(self.array) / len(self.array)

3.1.2 智能代码重写
  • 已有代码片段:

  • 按tab键-》自动补全

3.1.3 多行协同优化

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

3.1.4 光标位置预测

准备测试代码

3.1.5 接受,部分接受和拒绝

3.1.5 接受,接受部分和拒绝

  • 准备测试类
class Student:
    def __init__(self, name, age):
        self.name = name
        self.age = age
        
    # //tab 接收完整补全
    # //ctrl + -> 部分和逐步接收补全 [需要开启部分补全配置]
    # //esc 或者 继续输入 拒绝补全
  • 测试和演示效果

3.1.6 Tab相关配置说明

  • 配置修改位置:cursor settings > features > tab
  • A powerful Copilot replacement that can suggest changes across multiple lines…
    • 作用:启用/禁用 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;,但你只想用 firstName + " " + lastName 部分,就可通过该快捷键拆分接受。
  • Enable Cursor Tab suggestions in comments
    • 作用:让 AI 在注释内容里也提供 Tab 建议。
    • 通俗理解:写注释时,AI 帮你补全思路!比如输入 // 实现冒泡排序的步骤:,按 Tab 自动续写步骤说明。
  • Show whitespace only Cursor Tab suggestions
    • 作用:控制是否显示仅包含空白(空格、换行)的 AI 建议。
    • 通俗理解:这个配置项决定了当按 Tab 时,是否让那些“只调整空格、换行、缩进(没有实际代码逻辑变化)”的建议显示出来。
    • 案例:

3.2 Chat: 对话模式

Chat(也被称为“Campfire”)是 Cursor 的 AI 助手,位于侧栏中,可以让你通过自然语言与代码和 AI 进行交互。你可以提出问题、请求代码解释、获取代码命令建议等,所有这些都无需离开上下文。

Cursor chat 主要功能点:

  • Chat 是你了解代码库并快速入门的最佳去处。这是探索新代码的强大方法,也是构建请求的完美工具。
  • Chat 让你深入了解代码库以及每个组件如何组合在一起。Chat 可以帮助你理清代码库。
  • Chat 可以按照你的需求,从零开始进行项目创建,包括创建项目结构、安装依赖,甚至编写初始代码,让你可以快速开始新项目。
  • Chat 可以接收你项目的错误信息,进行错误定位和错误代码快速调整解决。

3.2.1 快速开始

使用 ⌘+K(Mac)或 Ctrl+K(Windows/Linux) 打开侧边栏中的聊天,向 Chat 直接输入你的请求,AI 将输出相应的响应。
| 注意:与 Chat 对话时,建议采用明确、具体的对话格式,最好包含任务类型、上下文描述和具体要求。

以下是几个参考模板:

代码生成类

[任务类型]:请生成一个 {功能描述} 的 {编程语言/框架} 实现
[具体要求]:

1. 使用 {特定技术/库}
2. 包含 {特定功能点}
3. 符合 {编码规范/设计模式}

示例:

请生成一个学习计划页面的HTML+CSS+JavaScript(react)实现
[具体要求]:

1. 使用Tailwind CSS v3和Font Awesome
2. 包含任务添加、编辑、删除功能
3. 包含日历视图展示学习计划
4. 包含学习进度可视化图表
5. 符合现代UI设计原则和响应式设计
6. 具有平滑的动画和交互效果
```text
### 代码修改类
```text
[任务类型]:请帮我修改 {上下文:具体文件/代码片段},实现 {预期功能}
[当前问题]:{现有的错误/不足描述}
[具体要求]:

1. 保持 {现有功能/结构} 不变
2. 使用 {特定方法/技术} 改进
3. 修复 {具体错误/警告}
```text

**示例:**
```text
请帮我修改当前的 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. 处理 {特殊情况/错误}

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


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

### 3.2.2 Chat三种模式
Chat 提供针对特定任务优化的不同模式:
1. Agent代理模式(默认): 允许Cursor学习和理解我们的项目代码,并且代表们可以直接进行项目代码更改!
2. Ask对话模式: 获取项目代码相关的解释和答案,但是不会直接修改项目代码!
3. Manual手动模式: 需要我们执行项目上下文(修改范围,后续会详细讲解)重点编辑!

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

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

生成和修改示例:
1. 新打开一个文件夹
2. ctrl + L 进行对话模式(默认 agent)
3. 用例对话
```text
   使用html,css,javascript来实现一个贪吃蛇页面!
   要求:
   1. 要求有积分统计
   2. 页面要有多种背景可以切换
   3. 代码添加中文注释
   4. 不能使用var 只能使用let和const声明变量
   (右侧有“选择语言”按钮)
  1. 生成代码
  2. 运行代码对话
    把index.html页面在浏览器打开
  3. 后续调整代码对话
    在页面中添加倒计时功能,每次60秒!

Agent的配置选项:
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.2.2.2 Ask模式体验

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

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

示例用例

这个贪吃蛇页面如何添加多种模式!

Ask的配置选项

  • Model(模型):预先选择应作为 Ask(Ask)的默认模型
  • Keybinding:设置键绑定以切换到 Ask 模式
  • 搜索代码库:允许 Cursor 搜索它自己的上下文,而不是当你希望 AI 看到文件时,你必须手动将文件作为上下文

3.2.2.3 Manual模式体验

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

示例用例

在 @script.js @index.html 中,给所有代码添加注释和解释!

Manual的配置选项

3.2.3 Chat模式的其他细节

3.2.3.1 代码编辑选项

当Chat建议更改代码时:
修改页面背景,可以添加多种颜色可以选!!

  1. Review:在差异视图中查看建议的更改
    并有“Review Changes”按钮

  2. Apply:在Ask / Manual模式下,使用“应用”按钮显式应用更改
    (配有相关界面截图,标注“进行主动的修改和更新”,并有“Apply to workspace”按钮)

  3. Accept/Reject(接受/拒绝):进行更改后,决定是保留还是放弃更改(agent模式下)
    (配有相关界面截图,标注“同意直接修改”“拒绝修改内容”,展示了“Accept”等操作选项)

3.2.3.2 Checkpoints 数据还原

有时,可能希望恢复到代码库的先前状态。Cursor 通过在发出的每个请求以及每次 AI 更改的代码库时自动创建代码库的检查点(Checkpoints)来帮助您解决这个问题。
要恢复到以前的状态,您可以:单击上一个请求的输入框中显示的 Restore Checkpoint 按钮,如下所示

3.2.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:手动模式下,允许聊天对当前上下文外文件自动应用更改,拓展操作范围,处理跨文件任务更便捷。
  • 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.3 Ctrl+K: 内联智能修改

内联编辑(Cmd/Ctrl+K)直接在编辑器窗口中生成新代码或编辑现有代码。
适合已知并精准修改文件内容!

3.3.1 触发修改提示框

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

Cmd K的模式说明:

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

3.3.2 Cmd + K 体验

内联生成
  1. 打开 main.js,光标放文件末尾(无选中代码)
  2. 按 Cmd/Ctrl + K,输入提示:
    生成一个带点击动画的按钮组件,用 Javascript 实现,点击后控制台打印次数
  3. 实现效果
内联编辑
  1. 打开 main.js,
  2. 选中代码按 Cmd/Ctrl + K,输入提示

四、Cursor精准上下文指定

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

4.1 Codebase Indexing 代码库索引

4.1.1 概念和作用

打开项目时,每个 Cursor 实例都将初始化该工作区的索引。初始索引设置完成后,Cursor 将自动为添加到工作区的任何新文件编制索引,以使您的代码库上下文保持最新:

  • 快速“读懂”你的项目结构(哪些是工具文件、哪些是业务逻辑)
  • 定位相关代码(如搜索 getUser 时,知道优先查 userService.js
  • 理解代码关系(如 Order 类和 Product 类的关联)

Cursor 中的作用:AI 分析索引内容后,生成代码时会更贴合项目实际(如使用已有工具函数、遵循命名规范)。

4.1.2 代码库索引配置和示例

代码库索引的状态位于 cursor settings > indexing

测试示例:
查看当前项目结构,并使用文字图形形式罗列出来!

展示效果:

4.1.3 忽略文件配置

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

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

配置 .cursorignore 忽略文件:

  • 自己创建 .cursorignore 文件添加到代码库目录的根目录下,并列出要忽略的目录和文件
  • 使用 cursor 配置快捷创建忽略文件:cursor setting > indexing > Configure ignored files

(配有界面截图,展示“Codebase Indexing”相关配置,标注“快速生成或编辑配置文件”,指向“Configure ignored files”按钮)

忽略文件配置测试:

  1. 创建忽略文件
    (配有界面截图,展示项目文件结构,标注“.cursorignore”文件)
  2. 添加忽略配置
# Add directories or file patterns to ignore during indexing (e.g. foo/ or *.csv)
index.html
style.css
main.js

4.2 Rules 规则

4.2.1 规则介绍

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

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

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

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

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

4.2.2 项目规则配置

  1. 项目下创建规则文件
    • 创建文件夹自定义文件项目 .cursor/rules/随意命名.mdc
    • 快捷命令方式创建:Cmd + Shift + P > “New Cursor Rule”
      (配有界面截图,标注“生效场景”“固定规则存储位置”“编写具体规则!”)
  2. 编写项目规则文件
---
description: "团队前端项目规范"
priority: 1000
---
# 代码风格
1. 函数必须包含 JSDoc 注释
2. 禁止使用 'var',统一用 'const' / 'let'
3. 函数命名必须遵循 驼峰 规则

# 依赖管理
- 优先使用项目内已有的工具函数(如`utils/request`)
- 禁止引入低版本的lodash(<4.0.0)
  1. 项目规则文件生效测试

    1. 准备一个main.js
    2. 进入ctrl+k
    3. 内联生成函数,查看是否生效规则
  2. 项目规则生效效果

4.2.3 用户规则配置

  1. 用户规则在cursor settings > rules中定义。
  2. 添加规则内容即可
    (配有界面截图,展示“Cursor Settings”界面,包含“User Rules”“Project Rules”等板块,标注有“添加数据库连接配置 地址:localhost 账号:root 密码:root”等内容)
  3. 用户规则不支持 MDC,它们只是纯文本。

4.2.4 mdc语法了解

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

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

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

代码风格规则(最常用)

# 一、代码风格

1. 函数必须包含 JSDoc 注释
   - 至少包含 `@param` 和 `@return` 描述
2. 变量命名必须使用静态命名法(camelCase)
3. 每行代码长度不超过 120 个字符
# 二、技术选型
- 禁止直接使用原生 fetch,必须通过项目封装的 request 工具
- 优先使用 React Hooks 而非 Class 组件

安全约束规则

# 安全规范

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

(右侧有“mdc”标识)
```mdc
### 特殊语法:引用项目文件

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

```mdc
# 工具链配置

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

4.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

4.3 @符号

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

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

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

4.3.1 @Files使用和测试

  1. 准备测试文件 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;
  1. 测试@File对话
    帮我总结一下main.js中包含那些方法?

  2. 查看对话结果

4.3.2 @Code使用和测试

  1. 准备测试文件 main.js

  2. 测试@Code对话
    帮我逐行解释一下@zwf_login代码的含义!并且最终在源文件中添加注释

  3. 查看对话结果

4.3.3 @Docs使用和测试

1. @Docs作用说明

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

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

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

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

3. 测试@Docs对话

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

4. 查看对话结果

4.3.4 @Web使用和测试

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

    • 最近的教程:社区生成的内容和示例
    • 比较:比较不同方法的文章
    • 最近更新:Very Recent updates or announcement(最近的更新或公告)
    • 多种视角:不同的问题处理方法
  2. 测试@Web对话
    @web React 19 的最新性能优化

  3. 查看对话结果

  4. 对比@Docs和MCP配置
    在这里插入图片描述

4.3.5 @Lint Errors使用和测试

  1. @Lint Errors作用和说明
    @Lint Errors 符号会自动捕获并提供有关当前活动文件中的任何 limiting 错误和警告的上下文。

  2. 准备错误代码

五、Cursor智能插件开发实战

Cursor官网开发指导流程:
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5.1 Cursor设计Chrome浏览器插件

1. 需求设计

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

https://platform.moonshot.cn/docs

2. 设计和生成项目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 朗读功能

±–±–+
| 功能按钮组 |
±–±--------------------------+
| [解释] [翻译] [朗读] [润色] |
±–±-------------------+
| 朗读语言:[中文 v] |
| [▶ 开始朗读] [■ 停止] |
±–±-------------------+


### 2.4 润色功能

±–±-----------+
| 功能按钮组 |
±–±-------------------------+
| [解释] [翻译] [朗读] [润色] |
±–±-------------------------+
| 润色结果 |
| 润色后的文本内容… |
±–±------------------+
| [编辑] [替换原文] |
±–±-----------------+


### 3. 设计规范

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

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

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

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

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

3. 配置和导入kimi docs文档

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

在这里插入图片描述

  1. 生成kimi api key

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

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

5.2 Chrome插件实现

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

Ct AI 搜索 问问豆包 解释 翻译 朗读

  1. 实现插件功能

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

选择语言

  1. 配置kimi api key
// API配置
const config = {
    // Kimi API配置
    kimi: {
        apiurl: 'https://api.moonshot.cn/v1', // 替换为实际的kimi API URL
        apikey: 'YOUR_KIMI_API_KEY' // 替换为实际的kimi API Key
    },
    // 默认设置
    defaults: {
        translationTarget: 'zh', // 默认翻译目标语言: zh-中文, en-英文
        speechLanguage: 'zh' // 默认朗读语言: zh-中文, en-英文
    }
};
// 导出配置
export default config;

5.3 Chrome插件调试和发布

  1. 第一次回出现问题(使用cursor调试)

未能成功加载扩展程序

文件 ~\Desktop\chrome-plugin
错误 Could not load icon ‘icons/icon16.png’ specified in ‘icons’.
无法加载清单。

  1. chrome浏览器加载插件

设置-》扩展程序-》管理扩展程序-》加载已经解压的扩展程序

  1. 有错误信息时,将错误信息发给cursor进行调试

  2. 然后移除插件重新加载,并确保添加完成

更多推荐