哈哈,我好像知道 Cursor 为什么叫 Cursor 了,真相竟然是。。。

news/2024/12/4 11:49:10/文章来源:https://www.cnblogs.com/ryanyangcs/p/18585962

最近 Cursor 太火了,到处都是 Cursor 的文章和视频。

它就像一个能实时查看你代码的编程高手,可以提供建议,捕捉错误,还可以帮你重构代码。

你不用写一行代码,只需要动动嘴,它就能一顿操作猛如虎给你写一个官网、一个 Chrome 插件、一个卡密系统、一个。。。

按这速度发展下去,Cursor 最终就不是 Copilot 了,而是 Pilot,人类才是 Copilot!

而 GitHub Coplilot 就比较惨了,它的代码修改能力和上下文引用能力远远不如 Cursor,所以它就只能叫 Copilot 了。

GitHub Coplilot 只能追加代码,不能修改代码。

Cursor 既能追加代码,又能修改代码。

GitHub Copilot 使用两种符号 (@ 和 #) 来引用不同的上下文,太难记了。。。

Cursor 只使用一种符号 (@) 来引用上下文,简单易记。而且上下文选择范围更广。

怪不得 GitHub Copilot 只能叫 Copilot。

等等,你们好像忽略了一件事情:Cursor 为什么叫 Cursor?

今天我就来揭晓这个谜底。

Cursor 之所以叫 Cursor,来自于它对光标的极致利用。

前面我们提到,Cursor 最牛逼的是可以直接修改你的代码。它会根据光标所在的位置,自动生成代码补全建议,用户直接通过 Tab 键就可以完成代码补全 (当然 GitHub Copilot 也能补全,我们来说点不一样的)。

对于已经写好的代码,在进行修改或重构时,Cursor 会根据上下文,给出修改建议。修改建议会通过提示框的形式展现,而不是代码补全的灰色提示。

还有一个更牛叉的功能叫光标预测 (Cursor Prediction),它会根据上下文,直接预测你下一步可能要编辑的代码位置。

现在知道它为啥叫 Cursor 了吧?😄

下面我通过一个实际的例子,来演示 Cursor 的强大功能。

咱不整那些虚头巴脑的,直接来个实用的例子,看到这个网站的流量了没有?

这个网站是 Cursor 的入门教程合集,走的还是导航站的路线,刚上线不久,流量就蹭蹭蹭的往上涨。

你以为这种网站有多高的技术含量?

还真没有。我只需要动动嘴就可以复刻一个类似的网站

声明一下:我可不会 Next.js,也不会 Tailwind CSS,更不会 Node.js,我只会指挥 AI 干活。

创建开发环境

为了快速配置开发环境,我们可以选择使用 Sealos DevBox,它可以一键配置开发环境,并且自动配置了公网域名和 HTTPS 证书,非常强大。

首先进入 Sealos 桌面,然后打开 Debox 应用,创建一个新项目,选择 Next.js 作为运行环境。

Devbox 为开发者提供了几个非常实用的功能:

  • 灵活的资源配置:可以根据项目需求自由调整 CPU 和内存,选择合适配置既保证性能又能控制成本。
  • 一键启用 HTTPS:系统自动分配安全域名,再也不用为配置 SSL 证书发愁。
  • 全自动域名管理:从开发到测试环境,域名配置全程由系统处理,开发者可以专注于代码本身。

创建完成后,几秒钟即可启动开发环境。

环境准备好后,我们直接用 Cursor 连接开发环境。在操作选项中选择使用 Cursor 连接:

首次打开会提示安装 Devbox 插件,安装后即可自动连接开发环境。

打开 Cursor 的终端,先删掉项目根目录下的所有文件:

下面我要告诉你们一个骚操作了。

初始化项目

最近新出了一个 AI 驱动全栈开发平台叫 Bolt.new,集成了终端和编辑器,算是 Cursor 的竞争对手吧。

不过 Bolt.new 是基于 Web 的,和本地 IDE 开发体验有点割裂,不过用来初始化项目是极好的。

虽然使用 Cursor 来从头构建一个项目也很强,但相对而言 Bolt.new 初始化的前端 UI 更漂亮,比 Cursor 好看多了。

所以我们可以先用 Bolt.new 初始化项目,然后再导入到 Cursor 中进行开发,天才!

来看实战步骤。

首先进入 Bolt.new 官网:

在这里,你既可以输入提示词来初始化你的项目,也可以在 “or start a blank app with your favorite stack” 下方选择你喜欢的技术栈,然后点击它。

我选择了 Next.js,进去之后,项目就初始化完成了。

还可以实时预览,你说气人不气人。

接下来就是见证奇迹的时刻,我们以这个网站作为参考:https://cursor101.com,让 Bolt.new 生成一个类似的网站。提示词如下:

参考我上传的截图给我生成一个 UI 风格一致的导航站,导航站的主题是“集成了 AI 技术的强化型代码编辑器 Cursor”的各种入门教程和实用技巧以及视频资源。

上传参考网站的截图,输入提示词后,点击输入框下面的 “Enhance prompt” 按钮,然后回车。

这时候 AI 就在吭哧吭哧帮我们生成代码了,真是一顿操作猛如虎啊。

生成完毕后,它甚至还直接帮我启动了,启动了就算了,还直接帮我打开了预览界面。。。

你这......我这......哎呀,你看你......

行,没我事了,我就动个嘴,连启动都不需要我了。

那我就勉为其难把项目代码下载下来吧。点击右上角的 “Download” 按钮即可下载项目代码压缩包。

下载完成后,解压压缩包,打开项目文件夹,可以看到项目代码已经下载好了。

导入项目到 Cursor

直接将项目文件夹下的所有文件全部选中,然后拖拽到 Cursor 的代码编辑器左侧文件列表中,即可导入整个项目。

然后执行 npm install 安装依赖,安装完成后,执行 npm run dev 启动项目。

现在回到 Devbox 界面,进入 Next.js 开发环境的详情页面:

点击外网地址即可使用公网域名访网站:

完美!下面我们接着用 Cursor 来继续开发这个网站。

使用 Cursor 继续开发

现在我们回到 Cursor 界面,开始念咒施法。

直接按下快捷键 CMD + I (Windows/Linux 下是 Ctrl + I),即可打开 Cursor Composer 界面。

在 Composer 界面的输入框中,先输入 @,然后选择 Codebase,这样就可以让 Cursor 分析整个项目的所有文件,然后接着输入以下提示词:

这个项目是一个导航站,导航站的主题是“集成了 AI 技术的强化型代码编辑器 Cursor”的各种入门教程和实用技巧以及视频资源。请将网站中所有的英文都改成中文文案。请使用 CoT 思维链一步一步思考以完成我的任务

然后它就开始一步一步思考并完成任务了。

友情提示:在提示词中使用 CoT 思维链,可以让 Cursor 一步一步思考并完成任务,这样准确率更高。

现在我只需要检查一下 AI 改的代码是否正确,然后点击 “Accept all” 接受所有修改即可。

来看看它的修改成果吧:

我啥也不说了,你们自己感受吧~

我们还可以接着优化,看我继续念咒,毕竟我不懂 Node.js,也不懂 Next.js,更不懂 Tailwind CSS,我只会念咒

再来看看效果:

你这......我这......哎呀,你看你......

当然这还没完,你还可以接着念咒,让它帮你优化文案,让它帮你支持国际化,让它帮你生成单元测试,让它帮你生成文档。。。

如果你手痒,想自己改改代码,也没问题,你看我在这里直接换行,然后 Cursor 就开始预测我想写什么了,如果你觉得没问题,就直接按 Tab 键补全吧。。。

我觉得 “安装指南” 可能不太合适,我就把它删掉了,然后 Cursor 又开始自动预测我接下来要写什么了,如果觉得没问题,又可以按 Tab 键补全了。。。

总结

好了,到这里我就不继续演示了,相信你已经感受到 Cursor 的强大了。

这个网站还有很多可以优化的地方,比如:

  • 可以添加搜索功能,方便用户快速找到想要的教程
  • 可以添加评论系统,让用户分享使用心得
  • 可以添加用户系统,收藏喜欢的教程
  • 可以添加更多的教程分类,比如进阶技巧、实战案例等
  • 可以优化 SEO,让更多人发现这个网站
  • ......

这些优化就留给你自己发挥了。记住,你不需要太懂编程,只需要会念咒就够了

让 Cursor 成为你的得力助手,让它帮你完成这些优化工作。毕竟,人类只是副驾驶,AI 才是主驾驶嘛~ 😄

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/846608.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

QEMU中虚拟Linux网络配置

QEMU中虚拟Linux网络配置 baidu: 只有在ping的时候才想起我,对吗 初 刚才使用qemu测试驱动的时候,忽然发现ssh不能顺利的接入到虚拟操作系统之中,原以为是物理机资源紧张导致qemu启动变慢,结果摸鱼半天之后依然无法通过ssh访问。使用vnc接入后发现虚拟机无法上网,没有被分…

精橙FPGA,一个承接FPGA代码设计的资深工程师团队。

一、我们是谁 精橙FPGA,一个承接FPGA代码设计的资深工程师团队。 二、服务内容 面向在校学生、职场工程师等人员,提供FPGA入门指导和FPGA代码设计外包服务。 三、业务范围 主要提供Xilinx/Altera以及国产FPGA的入门指导和FPGA代码设计外包服务,包括但不限于以下内容: 3.1 F…

Vue项目访问路径加统一前缀(若依)

如果多个项目要发布至同一个域名下,或Vue项目要加项目名访问时,则可以通过域名后加统一前缀来区分及路由至指定的服务,例如同一域名下:站点A:https://www.abc.com站点B:https://www.abc.com/bbb站点B-接口API:https://www.abc.com/bbb/api Vue项目访问路径加统一前缀步骤…

ERP术语 中日英对照表

<table><tr><td>客户</td><td>Customer</td><td>得意先</td></tr><tr><td>供应商</td><td>Supplier</td><td>仕入先</td></tr><tr><td>仓库</td>&l…

2024 PyCharm安装激活使用教程 (至2099年)

Pycharm 简介 Pycharm 是一款非常强大的Python集成开发环境(IDE),由JetBrains公司开发。它提供了丰富的功能和工具,帮助开发者更高效地编写、调试和部署代码。 要求 在开始之前,请确保您的计算机满足以下系统要求:操作系统:Windows、macOS或Linux 处理器:至少1 GHz的处理器…

想提高工作效率?试试这些实用技巧!

在现代企业的日常运营中,工作效率低下似乎已成为许多团队和项目管理中的普遍现象。无论是在软件开发、市场营销、产品设计还是其他行业中,团队成员往往面临着进度滞后、任务拖延、沟通不畅等问题,导致整体工作效率低下,影响项目的顺利推进。这些问题不仅给团队带来了很大的…

elasticsearch 学习笔记之二 常见接口

一、索引操作类 1、创建索引(PUT /索引名称) PUT /my-index-000001 请求body{"settings": {"index": {"number_of_shards": 3, //创建3个主片"number_of_replicas": 2 //每个主片都会有两个副本}} } 未指定mapping的情况下,使…

为什么Unity里的变体数和UWA工具测出来的不一样

1)为什么Unity里的变体数和UWA工具测出来的不一样2)使用TextureArray为什么会导致L1 Cache Miss率变高3)Gfx.PresentFrame耗时异常高4)AO方案中哪个更适合移动端这是第412篇UWA技术知识分享的推送,精选了UWA社区的热门话题,涵盖了UWA问答、社区帖子等技术知识点,助力大家…

abb喷涂机器人维修齿轮泵电机不转了怎么办?

ABB喷涂机器人齿轮泵电机常见的故障表现有哪些?1、电机振动过大:这可能是由于电机安装不当、轴承磨损或者不平衡导致的。振动过大会影响电机的稳定性和工作效率。2、电机无法启动:这可能是由于电源故障、电机内部短路或者过载保护触发导致的。无法启动会导致生产线停工,影响…

Android 添加指定QQ或加群

原文地址: Android 添加指定QQ或加群-Stars-One的杂货小窝实际上,原理就是通过scheme来唤起手机QQ进行对应的操作 添加QQ import android.content.Context import android.content.Intent import android.net.Uri import com.blankj.utilcode.util.ToastUtilsobject QqUtils {f…

【AIX】AIX系统安装教程及相关命令

⼀、 安装教程 1、unix是从MULTICS操作系统演变⽽来,MULTICS的特征是啥?终端!咱们通过串⼝去连接IBM P740吧,⾸先得准备USB转串⼝线2、 就是这种了,按照下图连接3、连接正常后(这⾥⽤的是win10操作系统),可以在设备管理那⾥看到安装正确的串⼝(这⾥是COM3⼝)(没正确…

MySQL: 划分具有连续相同值的区间

需求 有一组数据,第一列是类型A/B,第二列是操作时间,怎么取出不同类型不同时间段的最大、最小操作时间? 输入:输出:建表语句: create table test2 (`type` varchar(5),`time` timestamp )engine=innodb;insert into test2 values (A, 2021-08-09 10:00:00), (A, 2021-08…