Cursor的基础与使用
Cursor的基础与使用
- 概述与安装
- 四、Cursor精准上下文指定
- 五、Cursor智能插件开发实战
概述与安装
概述
Cursor 是一款功能强大的AI优先的代码编辑器,主要提供三个核心方向
- 深度集成AI模型:让AI充当编译器的核心交互。支持代码块对话、项目级对话、模型自由选择
- 强上下文理解能力:可以自动识别项目文件、代码块、错误信息等,提供更直观准确的AI修改能力
- 对话式开发体验,仅需自然语言沟通,Coursor会根据指令完成布置的任务,使用者可以轻松扮演产品经理,让Coursor理解命令并自行工作
对比其他编辑工具:
- 对比VSCode:基于VSCode打造的AI编程工具,界面和基础操作与VSCode一致,但Cursor提供了更智能的AI模型,更丰富的功能
- 对于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 Settings | Editor 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工具汉化配置步骤:
- 打开扩展:启动 Cursor 后,按下
ctrl + shift + x(Windows/Linux)或Cmd + shift + x(Mac),左侧边栏会出现扩展商店界面。 - 搜索并安装插件:在搜索框输入 “Chinese” 或 “中文”,一般选择下载量最高的 “Chinese (Simplified) Language Pack for Visual Studio Code”,点击安装按钮进行安装。
- 打开命令面板:按下
ctrl + shift + P(Windows/Linux)或Cmd + shift + P(Mac),输入 “Configure Display Language” 并回车,进入语言配置界面。 - 选择中文并重启:在弹出的语言列表中选择 “中文(简体)” 或 “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 的插件,在导入时可能导致整个导入过程失败或部分功能(如主题显示)异常。
- 打开Cursor设置(⚙ / Ctrl+Shift+,)
- 导航到 常规 > 账户
- 在“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声明变量
(右侧有“选择语言”按钮)
- 生成代码
- 运行代码对话
把index.html页面在浏览器打开 - 后续调整代码对话
在页面中添加倒计时功能,每次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建议更改代码时:
修改页面背景,可以添加多种颜色可以选!!
-
Review:在差异视图中查看建议的更改
并有“Review Changes”按钮 -
Apply:在Ask / Manual模式下,使用“应用”按钮显式应用更改
(配有相关界面截图,标注“进行主动的修改和更新”,并有“Apply to workspace”按钮) -
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 体验
内联生成
- 打开 main.js,光标放文件末尾(无选中代码)
- 按 Cmd/Ctrl + K,输入提示:
生成一个带点击动画的按钮组件,用 Javascript 实现,点击后控制台打印次数 - 实现效果
内联编辑
- 打开 main.js,
- 选中代码按 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”按钮)
忽略文件配置测试:
- 创建忽略文件
(配有界面截图,展示项目文件结构,标注“.cursorignore”文件) - 添加忽略配置
# 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 项目规则配置
- 项目下创建规则文件
- 创建文件夹自定义文件项目
.cursor/rules/随意命名.mdc - 快捷命令方式创建:
Cmd + Shift + P> “New Cursor Rule”
(配有界面截图,标注“生效场景”“固定规则存储位置”“编写具体规则!”)
- 创建文件夹自定义文件项目
- 编写项目规则文件
---
description: "团队前端项目规范"
priority: 1000
---
# 代码风格
1. 函数必须包含 JSDoc 注释
2. 禁止使用 'var',统一用 'const' / 'let'
3. 函数命名必须遵循 驼峰 规则
# 依赖管理
- 优先使用项目内已有的工具函数(如`utils/request`)
- 禁止引入低版本的lodash(<4.0.0)
-
项目规则文件生效测试
- 准备一个main.js
- 进入ctrl+k
- 内联生成函数,查看是否生效规则
-
项目规则生效效果
4.2.3 用户规则配置
- 用户规则在
cursor settings > rules中定义。 - 添加规则内容即可
(配有界面截图,展示“Cursor Settings”界面,包含“User Rules”“Project Rules”等板块,标注有“添加数据库连接配置 地址:localhost 账号:root 密码:root”等内容) - 用户规则不支持 MDC,它们只是纯文本。
4.2.4 mdc语法了解
Cursor 的 MDC(Markdown with Cursor)语法是专门为编写项目规则设计的轻量级格式,它结合了 Markdown 的可读性和元数据配置能力。接下来,我们来说明 mdc 文件语法。
4.2.4.1 MDC 文件组成部分
- 前置元数据(Frontmatter)
- 用
---包裹的 YAML 格式配置 - 定义规则的基本属性(如作用范围、优先级)
- 用
- 规则内容(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使用和测试
- 准备测试文件 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;
-
测试@File对话
帮我总结一下main.js中包含那些方法? -
查看对话结果
4.3.2 @Code使用和测试
-
准备测试文件 main.js
-
测试@Code对话
帮我逐行解释一下@zwf_login代码的含义!并且最终在源文件中添加注释 -
查看对话结果
4.3.3 @Docs使用和测试
1. @Docs作用说明
@Docs 将 Cursor 连接到来自常用工具和框架的官方文档。当需要以下内容的最新权威信息时,请使用它:
- API 参考:函数签名、参数、返回类型
- 入门指南:设置、配置、基本用法
- 最佳做法:源中的推荐模式
- 特定于框架的调试:官方故障排除指南
2. @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 能直接进入到对应文档内容开始浏览。
3. 测试@Docs对话
基于 @MyBatis-plus 查询下乐观锁插件如何使用
4. 查看对话结果
4.3.4 @Web使用和测试
-
@Web作用说明
@web 在实时 Internet 上搜索当前信息、博客文章和社区讨论。当您需要时使用它:- 最近的教程:社区生成的内容和示例
- 比较:比较不同方法的文章
- 最近更新:Very Recent updates or announcement(最近的更新或公告)
- 多种视角:不同的问题处理方法
-
测试@Web对话
@web React 19 的最新性能优化 -
查看对话结果
-
对比@Docs和MCP配置

4.3.5 @Lint Errors使用和测试
-
@Lint Errors作用和说明
@Lint Errors 符号会自动捕获并提供有关当前活动文件中的任何 limiting 错误和警告的上下文。 -
准备错误代码
五、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

- 生成kimi api key
登录kimi api 用户中心:https://platform.moonshot.cn/console/api-keys
创建kimi api key (第一次赠送15元):
5.2 Chrome插件实现
- 准备一个参考界面(参考豆包)
Ct AI 搜索 问问豆包 解释 翻译 朗读
- 实现插件功能
@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', // 替换为实际的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插件调试和发布
- 第一次回出现问题(使用cursor调试)
未能成功加载扩展程序
文件 ~\Desktop\chrome-plugin
错误 Could not load icon ‘icons/icon16.png’ specified in ‘icons’.
无法加载清单。
- chrome浏览器加载插件
设置-》扩展程序-》管理扩展程序-》加载已经解压的扩展程序
-
有错误信息时,将错误信息发给cursor进行调试
-
然后移除插件重新加载,并确保添加完成
更多推荐




所有评论(0)