前端初次使用 Cursor 的必学技巧

3,724 阅读5分钟

持续更新中...

常用配置

  1. 配置vscode布局

文件->首选项->设置

搜索 workbench.activityBar.orientation 设置值为 vertical

  1. 文件标签换行展示

{
    "workbench.editor.wrapTabs": true,
}

3. ### 全局设置会话

设置 - > Rules for AI 填充以下:

Always respond in 中文

使用中文 Generate Commit Message

代码注释

使用JSDoc注释

  1. .cursorrules 知识库文件开启

设置 -> Include .cursorrules file -> 勾选

可以配置一些项目的背景,或者项目的框架,或者某些限制条件

例如:

这是我的一个cursorrules知识库,针对与当前 xxx 项目,我的知识库需要包含: 1. 项目背景(当前组件是vue3的一个ui组件库) 2. 为了后续使用全局函数,全局样式,全局组件的使用,提高代码不重复性,你可以总结到知识库中,路经在: ./utils , ./styles ./icons等等 3. 生成代码需要严格遵循ts语法,以及js逻辑语法,vue3语法... 4. 注释需要详细,且遵循JSDoc语法 5. 后续可以自己补充

  1. Project Rules 配置项目单个业务规则

点击add new rule后创建文件.cursor/rule文件,在文件下可以创建单向业务功能规则

  1. 提交配置(新版本)

  • Agent:是 Cursor 的完全自主模式,适用于整个项目。它可以在多个文件中生成代码,运行 shell 命令,还能自行查找上下文,适合通过一句话创建完整项目 。
  • Ask:即原来的 Chat 模式,是一个对话式编码助手,适合了解整个代码的各项功能,也可用于代码局部功能的修改与调试,以及进行快速问答、调试代码和了解更多代码库信息等。
  • Edit:即原来的 Composer(normal)模式,适合用来添加新功能,适用于大型任务的代码生成,比 Ask 模式更自主,能修改多个文件,实现跨多个文件自动执行样板或重复代码任务。
  1. 快捷生成模板代码

  • 进入代码片段设置

  • 新建一个全局的代码片段代码

  • 举个栗子 我vue3的,当我输入vue3

常用插件

  1. Chinese 中文翻译

  1. Git History 查看git提交日志,历史记录

  1. GitLens 查看git提交记录 (通过 行 灰文提示查看 )

  1. Prettier 格式化代码

常用快捷键

  1. 通用编辑操作

操作描述Windows/Linux 快捷键macOS 快捷键
撤销上一步操作Ctrl + ZCommand + Z
恢复上一步撤销的操作Ctrl + YCommand + Shift + Z
复制选中内容Ctrl + CCommand + C
粘贴复制的内容Ctrl + VCommand + V
全选文档内容Ctrl + ACommand + A
保存当前文件Ctrl + SCommand + S
查找文本Ctrl + FCommand + F
替换文本Ctrl + HCommand + Option + F
快速打开文件Ctrl + PCommand + P
  1. 代码编辑相关

操作描述Windows/Linux 快捷键macOS 快捷键
注释 / 取消注释选中代码Ctrl + /Command + /
上下移动选中的代码行Alt + 上/下箭头Option + 上/下箭头
复制当前行并粘贴到下一行Ctrl + DCommand + D
删除当前行Ctrl + Shift + XCommand + Shift + X
格式化代码Ctrl + Shift + ICommand + Shift + I
智能提示(代码补全)Ctrl + SpaceControl + Space
  1. 分屏与窗口操作

操作描述Windows/Linux 快捷键macOS 快捷键
垂直分屏Ctrl + \Command + \
切换分屏窗口Ctrl + 1/2/3...Command + 1/2/3...
关闭当前分屏窗口Ctrl + WCommand + W
  1. AI 相关操作

操作描述Windows/Linux 快捷键macOS 快捷键
调用 AI 侧栏窗口Ctrul + I/LCommand + I/L
调用 AI 辅助窗口Ctrl + KCommand + K

AI操作技巧

  1. @Files:通用注记,在对话框输入时,会弹出代码仓库检索列表。输入文件名确认后,可将相应文件内容注入上下文。
  2. @Code:通用注记,输入后弹出检索框,通过关键词选择代码块,由开发环境的 LSP 识别代码块,准确性较高。
  3. @Docs:通用注记,从函数或库的在线官方文档获取上下文,无法使用本地类似 JSDoc 的文档信息,适用性有限。
  4. @Web:通用注记,将提问发送到搜索引擎,从搜索结果提取上下文供 LLM 使用,功能未完全优化,效果不稳定。
  5. @Folders:通用注记,提供文件目录相关信息,适用于解决路径相关问题。
  6. @Chat:仅在文件内代码生成窗口(通过 CTRL + K 打开)使用,把右侧对话窗口的对话内容作为上下文传递给大模型。
  7. @Definitions:仅在文件内代码生成窗口使用,将光标所在行代码涉及的变量和类型定义作为上下文传递给大模型,类似 @Code 注记功能。
  8. @Git:仅在对话窗口(通过 CTRL + L 和 CTRL + I 打开)使用,把当前 Git 仓库的 commit 历史作为上下文传递给大模型,适用于代码协作时查看历史记录或确认责任。
  9. @Codebase:仅在对话窗口使用,用于从代码仓找到所需文件的上下文,类似 CodebaseFilter,需设置过滤条件和参数,日常开发实用性较低。

无限邮箱方式

  1. 进入 官网 ,注销cursor账号
  2. 退出cursor软件
  3. 如果是window电脑,进入控制后台

  1. 执行清除缓存操作(一直敲回车即可)

irm aizaozao.com/accelerate.… | iex

  1. 回到cursor官网重新注册账户,并且登陆cursor软件