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 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工具汉化配置步骤:

  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. 然后移除插件重新加载,并确保添加完成

Logo

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

更多推荐