哈哈,我如同知道 Cursor 为什么叫 Cursor 了,本相竟然是。。。
最近 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 才是主驾驭嘛~ 😄