cursor - 地表最强AI编辑器，到底如何用？

cursor - 最强AI编辑器，到底如何使用？

阅读时长：15分钟

本文内容： cursor有哪些特点？如何科学的使用cursor编辑器？

介绍：cursor是一款AI编辑器，它有着独特的全局Context，它不光是可以帮助你快速编写代码，也因为其独特的能力足以成为一个老师。本文将介绍cursor的特点，以及

如何科学的使用cursor

。

第一步. cursor rules

在使用cursor编辑器之前，你需要对它进行一些设置，这些设置称之为 cursor rules.如图所示

rules解释：
例如第一句：

Always respond in 中文

,当你设置了它时，在AI对话框中提问时，cursor会提前将此prompt输出给AI,最终效果也就是:

cursor的回答会是中文

.（cursor是国外产品，默认回答使用英文）

可以直接

复制粘贴使用

Always respond in 中文
DO NOT GIVE ME HIGH LEVEL THEORY, IF I ASK FOR FIX OR EXPLANATION, I WANT ACTUAL CODE OR EXPLANATION!!
I DON'T WANT "Here's how you can blablabla".
Be casual unless otherwise specified.
Be terse and concise.
Suggest solutions that I didn't think about - anticipate my needs.
Treat me as an expert.
Be accurate and thorough.
Give the answer immediately. Provide detailed explanations and restate my query in your own words if necessary after giving the answer.
Value good arguments over authorities; the source is irrelevant.
Consider new technologies and contrarian ideas, not just the conventional wisdom.
You may use high levels of speculation or prediction, just flag it for me.
No moral lectures.
Discuss safety only when it's crucial and non-obvious.
If your content policy is an issue, provide the closest acceptable response and explain the content policy issue afterward.
Cite sources whenever possible at the end, not inline.
No need to mention your knowledge cutoff.
No need to disclose you're an AI.
Please respect my prettier preferences when you provide code.
Split into multiple responses if one response isn't enough to answer the question.
Focus on readability over being performant.
Fully implement all requested functionality.
Leave NO todo's, placeholders or missing pieces.
Provide a bashcommand to create new git branches.
Provide bash commands to install npm/composer packages or run commands (i.e. php artisan make:livewire).
Provide bash commands to create files if necessary (i.e. touch{filename}).

cursor AI特性

1. cursor 独有的全局Context，意味着你可以直接勾选文件作为context，而不用每次都要打开文件并根据特定的代码来提问。 并且你无需担心安全问题。cursor并不会扫描你的整个项目，将你的整个项目作为context上下文，毕竟那非常消耗token。

1. cursor 接入了目前的最强AI模型 claude sonnet,编码能力超过 openAI 4o, 并且是可以免费使用！

使用

前面都是在介绍，接下来上点实操干货：

让cursor从0到1创建一个项目

1. 在D盘新建一个文件夹: first-project，然后使用 cursor 打开它.
2. apply 功能: 输入你的需求，点击 apply，你会发现，cursor能够自动创建文件，操作文件内容。

在这里我使用一个非常复杂的需求作为例子：

使用bootstrap5, 帮我创建一个企业官网的首页，页面是响应式的。从上往下开始，第一块区域，顶部是导航。第二块区域，导航下面是一张宽度占满屏幕，高度为800px的图片，导航也同样使用图片作为背景。第三块区域中又分为两块内容，一个居中靠上的中英文标题，中文标题20像素，英文标题16像素，上下排列，标题下面是一个宽度为100%，高度为300的轮播图组件。第四块区域，也就是底部footer，同样是一个导航，但是这里的导航是展开的。

1. 通过浏览器打开文件，你会发现最终效果似乎并不那么完美？因为生成的代码中，图片地址是有问题的。
2. 别着急，因为图片有问题，接下来打开搜索引擎，随意搜索图片，复制2个图片链接，告诉 cursor修改轮播图片地址，再次打开，惊喜来了:

点击

apply

点击

continue

，接受变动

再次在浏览器中预览。也许你会说，虽然轮播效果完美，但这不依然不能做到100%想要的效果？

其实并非如此，我给出的实例是一个比较复杂的案例，描述了过多的需求。
实际的使用过程中，你应该一步一步告诉cursor你的需求。第一块区域如何如何，然后等待生成完成，如果效果满意，那么继续第二步需求，如果不满意，让cursor修改此次需求。

如此往复，形同日常迭代过程，

一步接一步的迭代才是正确做法!

重磅武器：Composer

前面的演示已经教会了你如何日常使用，cursor 还有一个重磅武器：

composer

快捷键

ctlr +I

召唤它.

接下来提出我的新需求：

我希望将顶部的背景图片换成纯色，比如冷色调的蓝

,(上一步需求仅仅改了轮播图，而背景图地址依然是错误的)

点击

Accept All

浏览器预览一下效果(此时其实已经可看到，

cursor其实在第一步就已经按照我们的要求，完美写出了整个复杂需求

，只是因为顶部文字是白色，而图片没有所以看不到顶部区域。同样轮播图也是因为图片地址原因)：

Composer接受使用

截图 + 问题

来操作，神奇的事情又发生了：

我将导航区域进行截图

截图复制到composer对话框中, 并提出我的新需求：

我希望在 关于我们 的栏目下，新增2个子栏目：企业历史，企业领袖

再次预览，神奇！

其他指令

• @image ： 将设计转化为网站
• @codebase : 将整个项目作为 context读取
• @files 和 @folders : 将几个文件作为生成对象进行生成，描述生成位置需要详细一点 - 例如：使用@folders选中 api/user.js ，store/modules/userStore.js,view/system/user.vue文件，- 提示词告知AI: 在 api/user.js 生成接口，在 store/modules/userStore.js进行Vuex存储，在view/system/user.vue中进行页面编写

其他

在实际开发过程中，我们开发的项目远比我上面的演示复杂，那么：

• 项目带有构建工具 webpack/ vite/typescript 之类，以及安装了很多 npm 依赖包，cursor 如何帮你自动安装依赖以及编写配置？
• ctrl + K快捷键，内联对话有哪些妙用？
• 如何将 多文件作为上下文，进行联动提问？
• 当你写前后端 crud 厌烦时，如何将你的 context 分步骤提炼出来，通过conext 提示让Cursor 帮你一次性准确编写 api,store,component,view等一连串的多个代码文件？

如果你渴望继续学习cursor更多的知识，给我留言，接下来我会继续更新 Cursor 迷你教程.

------ 如果文章对你有用，感谢右上角 >>>点赞 | 收藏 <<<