cursor - 地表最强AI编辑器,到底如何用?

news/2024/10/27 20:34:58/

cursor__AI_0">cursor - 最强AI编辑器,到底如何使用?

阅读时长:15分钟

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

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

cursor_rules_8">第一步. 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 bash command 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_49">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个子栏目:企业历史,企业领袖

在这里插入图片描述

再次预览,神奇!
在这里插入图片描述


其他

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

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

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


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


http://www.ppmy.cn/news/1542422.html

相关文章

分组排序函数、dense_rank() 函数的使用、MySQL之dense_rank()、Hive之dense_rank()函数

文章目录 一、dense_rank() 函数二、使用案例2.1、按成绩进行排名2.2、获取排名前五的数据2.3、分组后再排名 三、总结3.1、row_number()、rank() 和 dense_rank() 的区别 DENSE_RANK()是一种窗口函数&#xff0c;用于在数据库中计算密集等级。它为每个行分配一个密集等级&…

怎么用c++的fill函数?

功能描述&#xff1a; 向容器中填充指定的元素 函数原型&#xff1a;fill(iterator beg, iterator end, value); // 向容器中填充元素 // beg 开始迭代器 // end 结束迭代器 // value 填充的值 示例&#xff1a; #include <numeric> #include <vector> #inclu…

用Spring Boot实现的在线厨艺学习平台

1 绪论 1.1 研究背景 现在大家正处于互联网加的时代&#xff0c;这个时代它就是一个信息内容无比丰富&#xff0c;信息处理与管理变得越加高效的网络化的时代&#xff0c;这个时代让大家的生活不仅变得更加地便利化&#xff0c;也让时间变得更加地宝贵化&#xff0c;因为每天的…

从 Web2 到 Web3:区块链技术的演进与未来趋势

在互联网的发展历程中&#xff0c;我们正经历着从 Web2 向 Web3 的重大转变。这个转变的核心驱动力之一&#xff0c;便是区块链技术的不断演进。 Web2 时代&#xff0c;互联网上的社交媒体、在线购物、视频分享等平台蓬勃发展。用户可以便捷地获取信息、与他人交流互动&#x…

uniapp-components(封装组件)

<myitem></myitem> 在其他类里面这样调用。

AI Infra 如何打造?云轴科技ZStack在中国CID大会上主题演讲

10月19日&#xff0c;2024年“中国云计算基础架构开发者大会&#xff08;China Cloud Computing Infrastructure Developer Conference - 简称CID&#xff09;”在北京举办。大会聚集业界最前沿的云计算基础架构技术成果&#xff0c;覆盖主论坛与四大技术主题分论坛&#xff0c…

No.19 笔记 | WEB安全 - 任意文件操作详解 part 1

1. 任意文件上传漏洞基础 什么是文件上传功能? 在网站和应用中,我们经常会看到允许用户上传文件的功能,比如: 更换头像:让用户上传自己的照片作为头像发布图片:在社交媒体或论坛上传图片提交文档:在办公系统中上传Word、Excel等文档 这些都是常见的文件上传功能。 任意文…

深入探讨TCP/IP协议基础

在当今数字化的时代&#xff0c;计算机网络已经成为人们生活和工作中不可或缺的一部分。而 TCP/IP 协议作为计算机网络的核心协议&#xff0c;更是支撑着全球互联网的运行。本文将深入探讨常见的 TCP/IP 协议基础&#xff0c;带你了解计算机网络的奥秘。 一、计算机网络概述 计…