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

最新推荐文章于 2025-03-15 13:33:14 发布
最新推荐文章于 2025-03-15 13:33:14 发布
阅读量1.5k 收藏 13
点赞数 6
分类专栏： 开发插件/工具技巧 文章标签： 前端 vscode AI编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43536071/article/details/145828792
版权

常用配置

1. 配置vscode布局

文件->首选项->设置
搜索 workbench.activityBar.orientation 设置值为 vertical

2. 全局设置会话

设置 - > Rules for AI 填充以下:
Always respond in 中文
使用中文 Generate Commit Message
代码注释
使用JSDoc注释

3. .cursorrules 知识库文件开启

设置 -> Include .cursorrules file -> 勾选
可以配置一些项目的背景，或者项目的框架，或者某些限制条件

例如:

这是我的一个cursorrules知识库，针对与当前 xxx 项目，我的知识库需要包含：

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

4. 提交配置

cursor操作

附: 如果需要生成的文档或者代码里有特殊符号，cursor可能会卡断文档，导致无法写入文件中，这时可以使用agent方式。

5. 快捷生成模板代码

  • 进入代码片段设置
    cursor

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

  • 举个栗子 我vue3的，当我输入vue3
    cursor
    在这里插入图片描述

常用插件

1. Chinese 中文翻译

cursor

2. Git History 查看git提交日志，历史记录

在这里插入图片描述

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

在这里插入图片描述

4. Prettier 格式化代码

在这里插入图片描述
等等根据自己需求添加…

常用快捷键

1. 通用编辑操作

暂时无法在飞书文档外展示此内容

2. 代码编辑相关

暂时无法在飞书文档外展示此内容

3. 分屏与窗口操作

暂时无法在飞书文档外展示此内容

4. AI 相关操作

暂时无法在飞书文档外展示此内容

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. 进入 官网 ，注销账号
  2. 退出cursor软件
  3. 如果是window电脑，进入控制后台
    [图片]
  4. 执行清除缓存操作

irm https://aizaozao.com/accelerate.php/https://raw.githubusercontent.com/yuaotian/go-cursor-help/refs/heads/master/scripts/run/cursor_win_id_modifier.ps1 | iex

  1. 重新登陆即可
Cursor使用教程
CamilleZJ的博客
01-08 1万+
全面详细的cursor使用教程！
前端新手必学】打造客户反馈与评分管理页面：完整HTML、CSS、Vue.js实战教程 【一步步教你】构建时尚暗色主题的订单统计分析页面：新手友好、功能详解 【完整项目指南】前端新手如何用HTML、CS
南北极之间
12-12 588
前端新手必学】打造客户反馈与评分管理页面：完整HTML、CSS、Vue.js实战教程 【一步步教你】构建时尚暗色主题的订单统计分析页面：新手友好、功能详解 【完整项目指南】前端新手如何用HTML、CSS和Vue.js实现多样化任务中心页面 【实用前端项目】创建高级客户奖励任务页面：详细教程与源码解析 【新手友好】使用HTML、CSS和JavaScript打造任务领取与积分奖励页面前端新手必学】打造客户反馈与评分管理页面：完整HTML、CSS、Vue.js实战教程 【一步步教你】构建时尚暗色主题的订单统计分析
Cursor开发前端的详细过程
shine_du的博客
01-22 3868
使用 Cursor 开发前端涉及多个步骤，从创建项目、编写 HTML 和 JavaScript 代码，到使用前端框架、样式设计、调试和构建。同时，结合构建工具和版本控制系统，可以更好地管理和部署前端项目。在开发过程中，充分利用 Cursor 的 AI 辅助编程功能，可以加速开发进程，提高开发效率。在开发前端项目时，你可以根据实际需求灵活运用上述步骤和工具。如果你遇到任何问题或需要更多帮助，欢迎随时向我咨询，让我们一起完成出色的前端项目开发。
Cursor详细使用教程（看完无敌版本）
小赵的博客
03-02 5万+
从年中cursor开源以来，逐渐火遍全网，成为编程的又一更强力助手。Cursor 是由 Anysphere 这个实验室打造的代码编辑器，它基于 VSCode 修改派生，因此所有你在 VSCode 上的配置都能够导入到 Cursor 里使用，如果你平常使用 VSCode 进行开发，那么你能够非常便捷地迁移过来。Cursor 和 VSCode 的最大的不同点在于它内置了 AI 进行代码的协作，为此它对 VSCode 进行了诸多修改，这些修改使得它的体验比在 VSCode 上使用诸如Github。
cursor使用及实战
u012606014的博客
03-08 2034
cursor的使用教程，代码智能，java开发工具
【前端必读】一、使用 Cursor 的基本功能全教程（使用与安装）
万物皆有灵
09-26 3869
Cursor 是由 Anysphere 实验室开发的一款代码编辑器。它是在 VSCode 的基础上进行修改和衍生的，因此你可以将 VSCode 上的所有配置无缝导入到 Cursor 中。如果你习惯使用 VSCode 进行开发，那么迁移到 Cursor 会非常方便。Cursor 与 VSCode 最大的区别在于它内置了 AI 协作功能。为了实现这一点，Cursor 对 VSCode 进行了多项改进，使得使用体验比在 VSCode 上使用类似 GitHub Copilot 的插件更加流畅。
Cursor 与 VS Code 并存使用，code cursor 命令各司其职
Gui_mi的博客
03-02 500
通过调整环境变量配置，避免 Cursor 覆盖 VS Code 的 code 命令。
【前端必读】二、使用 Cursor 的基本功能全教程（快捷键及其他功能）
万物皆有灵
09-26 2万+
【前端必读】使用 Cursor 的基本功能全教程
Cursor使用及经验分享
Esther_liew的博客
01-26 4402
Cursor使用及经验分享
Cursor 使用技巧指南
ainnle的专栏
09-22 1万+
高效地使用 Cursor，提升开发效率，并实现免费使用最强代码AI。这些技巧包括明确表述需求、添加代码注释、使用 Composer 进行精细管理、定制 AI 回答风格，以及重复注册账号以延长免费使用期限。这些方法不仅帮助你更好地管理项目，还能让你在编程过程中更加得心应手。希望这些技巧能帮助你更好地使用 Cursor，提升开发效率。如果你需要更详细的文档信息，请点赞、评论、分享，并发送私信或回复“Cursor”，我会给你回复对应的文档。让我们一起探索 Cursor 的无限可能，提升编程技能，创造更多精彩的项目
【前端开发笔记】CSS样式-cursor
weixin_43826965的博客
11-19 1258
CSS之cursor属性前言正文cursor简介用法 前言 近日写开发网页时，客户想要鼠标移入某个菜单时，将鼠标样式显示为手的样式，以往用的a标签或者button标签来实现，但项目已经接近尾声，懒得改结构，想着能否使用CSS来实现该功能，因此有了这个笔记。 正文 cursor简介 在CSS中cursor属性定义了鼠标指针在一个元素内展现的样式 用法 url：自定义鼠标指针样式 .app { cursor: url('此处写指针图标路径'); } default：默认指针样式(通常为箭头) .app {
Cursor 实用技巧指南
musicml的博客
09-30 1641
▼国庆专场直播，预约保你有收获—1—技巧一：明确表述需求问：如何更准确地改写功能需求以适应 Cursor 的使用？原因：Cursor 的设计旨在精确执行用户的具体指令。过多的细节可能导致执行复杂化，而过于模糊的描述则可能让 Cursor 在执行时缺乏必要的指导，影响项目的精准控制。操作步骤：精确阐述需求，剔除无关的细枝末节。 避免在需求中使用含糊其辞的词语（比如“上传”），除非它们对功能实现至关...
前端面试八股文（超详细）
热门推荐
m0_50861631的博客
03-06 16万+
JavaScript \1. Promise 的理解 Promise 是一种为了避免回调地狱的异步解决方案 2. Promise 是一种状态机： pending（进行中）、fulfilled（已成功）和rejected（已失败） 只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。 回调地狱 回调函数中嵌套回调函数的情况就叫做回调地狱。 回调地狱就是为是实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。 一、Promise是什么？ Promise是最早
从零开始：HTML + CSS + JavaScript 完整任务管理系统实战教程（适合前端新手）” “前端小白必看！一步步实现任务管理页面——HTML、CSS、JavaScript 完整示范” “前
南北极之间
11-27 394
从零开始：HTML + CSS + JavaScript 完整任务管理系统实战教程（适合前端新手）” “前端小白必看！一步步实现任务管理页面——HTML、CSS、JavaScript 完整示范” “前端开发入门：用 HTML、CSS、JavaScript 创建简单实用的任务管理系统” “零基础前端实战：HTML、CSS、JavaScript 实现任务管理系统，带你一步步完成” “超简易任务管理系统教程：HTML、CSS、JavaScript 完整代码解析” “前端新手必学：用 HTML、CSS、JavaSc
前端面试题（超全！）
weixin_57136547的博客
09-09 4839
CSS的盒子模型有哪些：标准盒子模型、IE盒子模型CSS的盒子模型区别：标准盒子模型：margin、border、padding、contentIE盒子模型 ：margin、content（ border + padding + content ）通过CSS如何转换盒子模型：/*标准盒子模型*//*IE盒子模型*/伪元素什么是伪元素：是用于创建并操作元素的特定部分，它可以在DOM中创建一个不存在的元素，并为其添加样式。::before：在元素内容之前插入内容。
Web前端设计与开发课程设计：简易淘宝网页设计
m0_64198455的博客
12-25 5807
本项目使用HTML5、CSS、javascript、jQuery技术，实现了淘宝网站的简易网页设计。项目设计具体的功能有登录、注册、动画播放和基本的页面跳转等。
前端学习笔记之背景、cursor、定位（static、relative、fixed、absolute）
HJHAlone的博客
03-03 408
背景图片的使用： background-image:url("XX") background-position: background-attachment: background 的缩写属性
cursor 使用经验分享
weixin_48191864的博客
11-25 7564
深入 Cursor AI 编辑器的核心功能与实战经验。从代码补全、终端对话到文档集成，详解如何利用 AI 提升开发效率。对比 Windsurf，分享会员使用技巧，助你掌握 AI 辅助编程新方向。
【Cursor】低代码小白12小时开发前端
最新发布
2301_76271860的博客
03-15 1071
牛子是一名数学专业的大三学生，对AI，ML领域略感兴趣。这是牛子的第一篇博客，用来记录并分享学习过程中一些有趣且实用的案例，希望对你有帮助。 3/15/2025 Newzil 这篇文章适合具备一定 AI 使用基础且对 cursor 项目开发感兴趣的读者。其中不免会提及一些 AI 领域的专有名词：NLP、agent、prompt。项目文件已开源于：[Newzil-git/time-capsule](https://github.com/Newzil-git/time-capsule) ，欢迎 star。
cursor的rule设置
03-04
### 设置SQL游标的规则或属性 在PL/SQL环境中，定义和管理游标时有多种方式来设置其行为。对于显式游标，可以通过特定的关键字和参数控制游标的特性。 #### 使用 `FOR UPDATE` 子句锁定行 为了确保数据的一致性和防止并发修改问题，在声明游标时可以附加 `FOR UPDATE` 子句。这会使得从该游标获取的数据行被加锁，直到事务结束为止。其他会话在此期间无法对该些行执行更新、删除或其他形式的锁定读取操作[^3]。 ```sql DECLARE CURSOR emp_cursor IS SELECT employee_id, first_name, last_name FROM employees FOR UPDATE; BEGIN -- 游标逻辑... END; ``` #### 指定列用于锁定 (`OF`) 如果只需要锁定某些特定字段而非整行，则可以在 `FOR UPDATE` 后面加上 `OF column_list` 来指定受影响的具体列名列表。这种方式有助于减少不必要的资源占用并提高性能。 ```sql DECLARE CURSOR salary_update_cur IS SELECT department_id, salary FROM employees WHERE job_title = 'Manager' FOR UPDATE OF salary; BEGIN -- 更新经理薪水的操作... END; ``` #### 控制等待时间 (`NOWAIT`, `WAIT n`) 默认情况下，当尝试访问已被另一个事务锁定的行时，当前事务会被挂起直至前者的释放。然而，通过添加 `NOWAIT` 或者设定最大等待秒数 `WAIT n` 可改变这种行为模式，从而立即抛出异常通知开发者或者允许一定时间内重试。 - **NOWAIT**: 如果遇到已锁定的目标行则立刻报错而不是阻塞。 ```sql DECLARE CURSOR urgent_data_cur IS SELECT * FROM critical_table FOR UPDATE NOWAIT; BEGIN -- 处理紧急情况下的数据... END; ``` - **WAIT n (n为正整数)**: 设定了超时期限后的处理机制；超过给定时长仍未成功取得所需行上的锁就触发错误提示。 ```sql DECLARE CURSOR patient_wait_cur IS SELECT * FROM large_dataset FOR UPDATE WAIT 5; -- 等待最多五秒钟 BEGIN -- 需要较长时间才能完成的任务... END; ``` #### 利用 `WHERE CURRENT OF` 进行当前位置更新/删除 配合使用 `FETCH ... INTO` 和 `UPDATE|DELETE ... WHERE CURRENT OF cursorname` 结构能够实现基于最新检索到的结果集来进行精确位置处的数据变更动作。此功能特别适用于批量维护作业中逐条记录地调整信息而不必担心遗漏任何一条符合条件的对象实例。 ```sql -- 假设有一个已经打开并且定位到了某一行的游标 named_cur UPDATE employees SET salary = salary * 1.05 WHERE CURRENT OF named_cur; -- 类似地也可以做 DELETE ... DELETE FROM employees WHERE CURRENT OF named_cur; ``` 以上就是关于如何配置SQL游标的几个重要方面介绍，涵盖了基本概念以及实际应用中的技巧示例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

tommyrunner

你的支持,就是我的动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值