cursor 是一款基于 VSCode 的 AI 优先编辑器，如果你还没有体验过它，我强烈建议看完这篇，因为 cursor 真的在改变编程游戏的规则，在了解 cursor 前，可以先思考一下我们日常在编程环节都做哪些事情，我日常开发中，占据绝大多少的是：
1、编写代码
2、测试代码 & 验证效果
3、阅读之前的代码
4、查阅文档（例如：MDN）
5、书写文档
6、review 代码，提交 commit
7、优化代码，重构代码
一、设置
1）登录与账号
claude-3.5 、gpt 4 等都是高级大模型 pro 500次 ，免费用户50次
cursor-small、gpt 4-mini 低级点的模型 pro 无限制，免费用户500次
2）Rules for AI添加[System prompt]
Always respond in 中文
You are a Senior Front-End Developer and an Expert in Vue.js, JavaScript, TypeScript, HTML, and CSS . You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.
- Follow the user's requirements carefully & to the letter.
- First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.
- Confirm, then write code!
- Always write correct, best practice, DRY principle (Dont Repeat Yourself), bug free, fully functional and working code also it should be aligned to listed rules down below at Code Implementation Guidelines .
- Focus on easy and readability code, over being performant.
- Fully implement all requested functionality.
- Leave NO todo's, placeholders or missing pieces.
- Ensure code is complete! Verify thoroughly finalised.
- Include all required imports, and ensure proper naming of key components.
- Be concise Minimize any other prose.
- If you think there might not be a correct answer, you say so.
- If you do not know the answer, say so, instead of guessing.
### Coding Environment
The user asks questions about the following coding languages:
- Vue.js
- JavaScript
- TypeScript
- HTML
- CSS
### Code Implementation Guidelines
Follow these rules when you write code:
- Use early returns whenever possible to make the code more readable.
- Use "class:" instead of the tertiary operator in class tags whenever possible.
- Use descriptive variable and function/const names. Also, event functions should be named with a "handle" prefix, like "handleClick" for onClick and "handleKeyDown" for onKeyDown.
- Implement accessibility features on elements. For example, a tag should have a tabindex="0", aria-label, on:click, and on:keydown, and similar attributes.
- Use consts instead of functions, for example, "const toggle = () =>". Also, define a type if possible.
二、使用
cursor最常用的快捷键就四个，非常好记：
Tab：自动填充
Ctrl+K：编辑代码
Ctrl+L：回答用户关于代码和整个项目的问题，也可以编辑代码（功能最全面）
Ctrl+i：编辑整个项目代码（跨文件编辑代码）
1.CTRL/CMD + L打开对话框
使用CTRL/CMD + L键在编辑器的右边打开对话框。
2.CTRL/CMD + K打开生成窗口
使用CTRL/CMD + K键在光标停留上方（因为k代表向上！）打开生成窗口：
需要额外说明的是，当你选中一块内容后，按下CTRL/CMD + K键，也能够打开相应的窗口，此时生成内容依据的上下文会是你选中的内容
3.CTRL/CMD + I打开 Composer
使用CTRL/CMD + I能够打开 Cursor 的特殊功能：Composer。Composer 是 Cursor 的特色功能，它的功能就是在一个对话窗口里同时对多个文件进行修改。
使用CTRL + I打开的Composer是这样的一个可以拖动的小面板界面
Composer的小面板界面
你可以在这里输入一个分步骤、涉及多文件的复杂修改，而后 Composor 会同时生成涉及到的文件的所有修改。但通常而言，使用 Composer 应该在通过小面板界面的右上角的按钮打开它的完整界面
为了更方便地向大语言模型提供上下文信息，Cursor 内设了不同地@注记，使用@注记能够方便地注入不同类型的上下文信息到你的对话里。
@注记有一些是通用的，在所有对话窗口中都可以使用；有一些是特殊的，我会在提到时做补充说明。
注：事实上 Github Copilot 也有类似的功能，但是没 Cursor 齐全好用。
1.@Files注记，传递指定代码文件的上下文
当你在对话框输入@Files注记时，Cursor 会自动弹出对你代码仓库的检索列表，你可以输入你想要导入上下文的文件名，而后按下确认键，相应的文件里的内容便会届时自动注入到上下文中
@Files注记 2.@Code注记，传递指定代码块的上下文
Code注记提供更精确的代码片段，@注记的使用都大同小异，会弹出相应的检索框，你输入关键词后在索引列表中选择相应的代码块即可。
代码块的识别是由你开发环境的 LSP 决定的，大多数情况下都是精确的：
@Code注记 3.@Docs注记，从函数或库的官方文档里获取上下文
@Docs注记能够从函数或库的官方文档里获取上下文。目前，它只能从可访问的在线文档里获取上下文。因此，你自己写的类似于 JSDoc 之类的文档信息除非你能整一个线上地址，否则是没用的~我个人觉得这个功能不是很泛用。
https://rulego.cc/
https://aisuda.bce.baidu.com/amis/zh-CN/docs/index
@Docs注记，通常使用需要你手动导入文档
4.@Web注记，从搜索引擎的搜索内容获取上下文
@Web注记类似于一种方法，它会默认将你的提问先向搜索引擎进行搜索，然后从搜索结果里提取上下文喂给 LLM。但因为 Cursor 官方没公开透明具体的实现法子，它自个也没调好，实际上使用效果忽好忽差的。
如果你遇到问题想偷懒不打开网页搜报错或是大模型自身的回答无法解决问题，你可以直接使用这个注记。
5.@Folders注记，传递文件目录信息的上下文
@Folders注记能够提供文件目录的相关信息，如果你遇到什么路径问题，可以考虑使用这个注记向大模型寻求解决方法。
@Folders注记
6.@Chat注记，只能在文件内的代码生成窗口里使用的注记
@Chat注记只能在文件内的代码生成窗口（CTRL + K打开的窗口）里使用，它能够将你右边打开的对话窗口里的对话内容作为上下文传递给大模型。
@Chat注记
7.@Definitions注记，只能在文件内的代码生成窗口里使用的注记
和@Chat注记一样，@Definitions注记只能在文件内的代码生成窗口里使用。它会将你光标停留的那一行代码里涉及到的变量、类型的相关定义作为上下文传递给大模型，类似于@Code注记。
@Definitions注记
8.@Git注记，只能在对话窗里使用
对话窗指的是通过CTRL + L与CTRL + I打开的对话窗口。@Git注记能够将你当前的 Git 仓库的 commit 历史作为上下文传递给大模型。
感觉比较适合在代码协作的时候查战犯清算的时候使用。
9.@Codebase注记，只能在对话窗里使用，用于在代码仓里扫描相应的文件传入
Codebase注记其实不是很好用，与其说它是扫代码仓，不如说是从代码仓里寻找到你想要的文件的上下文传入，也就是CodebaseFilter。
我感觉平时开发不会用到，因为它要传递过滤条件设置过滤参数：
@Codebase注记需要你传递数量、过滤/排序时使用的模型等信息
它和通过CTRL + enter快捷键的区别估计就在于你能够自定义查询的过滤规则。
三、cursor 的杀手锏的能力
1）终端对话
对于前端来说，很多 linux 命令，我们不常用，有时候也会使用但总是记不起来，需要查阅文档，在 cursor 中，我们直接在终端按下 cmd + k，就可以唤起对话，描述出要做的事情来询问对应的命令是什么，AI 会帮我们找到命令，然后输入到命令行
除此之外，我们还可以使用它来生成 commit 信息，先在终端中，输入'git diff | cat'，获取最近的修改，然后 cmd + k，在提示栏中输入'git commit message', Cursor会给你生成一个带 commit message 的 git commit 命令
2）composer（beta 能力，需要开启）
composer 其实就类似于 bolt.new （一个通过描述生成项目的工具），你给出需求，它会自动创建文件（夹）来实现需求，如何使用请看文档，后面我会使用 composer 能力来做一个项目分享它强大的能力
更详细的请看：https://cursor101.com/zh/article/cursor-composer
3）文档能力
在 Cursor Setting > Features >Docs 我们可以添加我们日常使用的文档，例如：mdn 文档，这样我们需要查询文档就不用去游览器，直接在对话框@ 选 Docs 来选择我们要查询的文档
4）code review （beta 能力，需要开启）
review 目前可能没有那么强大，我的方式是多问几次，三次左右，来保证潜在问题都被 AI 发现，最后自己再 review 一遍
5）强大实用的 @ 符号
无论是单独的对话框还是代码内对话弹窗，我们输入 @ 后就会看到
6）AI fix
当我们在代码报错后，鼠标移入会有 AI FIx 按钮，或者终端报错，我们选中报错，会有 Add to Chat 按钮，我们可以在对话中进行报错询问
7）预测你的下一步
它会猜你下一步做什么，并且把光标放到合适的位置，让你真正一路 tab
以下是一些还没有体验过的规则：
8）自定义规则 （AI rules）
我们可以在项目根目录新建 .cursorrules 来自定义规则，有一个专门的社区：https://cursor.directory/，里面有实用的规则，我们可以直接复制使用
9）.cursorignore
类似 .gitignore ，定义不让 cursor 读取的内容，保证安全
使用场景
1）学习源码 、新技术、框架等等
通过 cursor 的超强能力，我们可以拉取一个源码到 cursor 中，渐进的询问当前项目的问题，我们想要询问编程概念问题；获取代码建议和最佳实践；调试和错误排查的时候我们可以通过 cmd + L 唤起对话框来进行连续提问
2）做项目、写项目文档
3）重构代码
4）利于 @ Docs 能力，建立自己的知识索引库
5）写小工具网站，快速想法变为现实，例如：在线工具库，导航网站等等，这对有想法的产品经理来说是福音，他们可以快速把自己想法变成现实
=转载=