作为开发者,VS Code大家应该都很熟悉,它轻量、简洁,备受大量开发者的青睐。随着AI的发展,VS Code中,有大量AI协助写代码的插件(如Github Copilot)等。可以帮我们写代码、纠错、提问等。但很多情况下还是需要我们自己先完成部分代码开发,或者说它的开发只是“辅助”为主。那么有没有更进一步的、真正的AI开发工具呢?
有!而且免费!它就是Cursor!
功能介绍
Cursor是一个集成了Claude 3.5、GPT4等多种LLM的IDE,和VS Code很像,各种VS Code的功能(包括插件等)均能使用,VS Code用户基本可以无缝衔接上手Cursor。
Cursor中的AI功能非常强大,功能不仅包括:代码自动生成、代码解释、对话、修改等常规AI即可完成的功能,还包括:从0到1无代码开发项目、自动生成代码文件、自动生成文件夹、自动修改代码、选择内容自动修改、自动化整个项目开发、加入自定义外部文档等。
如果你还是不理解,下面我们也会通过例子让大家了解Cursor的功能。
Cursor中一些premium model(GPT4、Claude 3.5等)有500次的使用次数限制,其他模型(gpt-4o-mini )等无限次访问使用。虽然gpt-4o-mini的推理能力要弱于GPT4等当前非常强大的模型,但对项目开发等已完全够用,且premium model也足够使用很长时间。可以在设置中管理模型

下载
进入Cursor官网,下载即可。使用需要免费注册账号(推荐使用gmail等邮箱格式注册)。下载后正常安装即可,
准备工作
安装后,打开软件进行简单设置(如主题、导入VS Code插件等)即可进入主页面。我们发现和VS Code确实很像。

为了激活AI更多功能,需要点击上方文件→偏好设置→Cursor设置来开启composer功能(如图所示)

AI功能初体验
假如我现在需要写一个前端登录页面。正常来说需要自己创建文件,自己写html、css等,还需要引入组件库。虽然AI可以辅助开发但上述工作和大部分编程内容依然是我们完成的,AI只起到辅助功能。
但使用Cursor可不一样了!下面让我们看看如何使用Cursor开发。
我们像正常一样使用Cursor打开个空文件夹,不需要写代码,按住Ctrl+I呼出AI面板,选择composer,直接用中文写下你的功能需求,如以下内容:
使用前端三件套写一个前端登录界面,要合理安排各种文件和文件夹。要求界面美观、有背景过渡动画颜色,可以随意使用各种UI组件库等,越美观越好
然后AI就会开始自动创建文件夹、自动编写代码!

生成结束后我们点击accept all就会保存,然后我们使用和VS Code一样的方法(我这里用Live Server)打开页面查看效果如下:

(P.S. 这里效果不明显,它实际上背景颜色是动态变化的)
多轮对话
仅仅半分钟不到,AI就写好了登录页面,但我们可能需要结合功能进行改动。于是你可以和AI对话。
可以继续在右侧composer里面聊天,让它改代码,你负责accept或reject它生成的内容,也可以针对一个文件、文件夹、项目提问。
使用@关键字即可快速选择对话引用内容,比如我只想对一个文件进行修改,就可以使用@Files指令选择它

现在我发现这个登录页面中,点击登录后默认的弹窗也太难看了!

我就和AI说:
登录后默认的弹窗也太难看了,我要用好看点的提示样式
他就会修改代码,accept一下看效果:

怎么样?是不是好看多了?(它引入了SweetAlert2组件来显示弹窗)
AI代码修改和解释
我希望对部分代码进行修改和解释,就可以在代码中按住Ctrl+K,AI会自动为你选中你希望选择的代码块,或者也可以你直接选中你想要的代码块点击Chat或Edit。AI会直接进行修改。
比如我不喜欢我登录的按钮是纯蓝色按钮,我想要加点过渡颜色和鼠标悬浮效果,就可以选中这里说

然后

按钮就有了过渡颜色!
创建整个登录页面到现在,我没有写过一行代码!全部是AI在写我在看,我在提需求
代码自动补全
这个其实很多AI插件都有,就是你写完一些代码后会自动为你生成后续的代码,按一下tab就会补全。太方便了!

外部知识库
点击左上角文件→偏好设置→Cursor设置→Features,下拉找到Docs,你可以将任何第三方链接的东西喂给它!包括自己写的开发文档等。

AI规则
有时候我们写代码有自己的习惯,你可以把习惯告诉AI,AI就会按照你的个人习惯来为你生成代码。转到General设置项,在Rules for AI中可以编写自己的习惯
比如我写Vue一般都用TypeScript+Setup关键字,style部分也用less语言,所以我可以告诉AI第一行的内容

针对整个项目提问
使用关键词@Codebase进行针对整个项目的提问。可以帮我们更好的定位组件、代码位置并直接让AI修改。
比如我现在打开了个非常庞大的Vue3+TypeScript+Pinna的项目:

找到了!我的样式写在ManageIndex.vue
里,它可以直接修改

写在后面
本文只是对Cursor进行了初步的探究,它还有更多强大的功能,大家可以前往https://cursor101.com/zh发现更多使用方法。
我在上手Cursor后,它的AI功能真的震撼到了我。如今随着AI技术的发展,我们也应该合理使用AI,把AI当做提升自己开发效率的工具去使用。
你可以自定义System prompt加持AI效果,如下面这段:
Role
你是一名极其优秀具有20年经验的产品经理和精通所有编程语言的工程师。与你交流的用户是不懂代码的初中生,不善于表达产品和代码需求。你的工作对用户来说非常重要,完成后将获得10000美元奖励。
Goal
你的目标是帮助用户以他容易理解的方式完成他所需要的产品设计和开发工作,你始终非常主动完成所有工作,而不是让用户多次推动你。
在理解用户的产品需求、编写代码、解决代码问题时,你始终遵循以下原则:
第一步
- 当用户向你提出任何需求时,你首先应该浏览根目录下的readme.md文件和所有代码文档,理解这个项目的目标、架构、实现方式等。如果还没有readme文件,你应该创建,这个文件将作为用户使用你提供的所有功能的说明书,以及你对项目内容的规划。因此你需要在readme.md文件中清晰描述所有功能的用途、使用方法、参数说明、返回值说明等,确保用户可以轻松理解和使用这些功能。
第二步
你需要理解用户正在给你提供的是什么任务
当用户直接为你提供需求时,你应当:
- 首先,你应当充分理解用户需求,并且可以站在用户的角度思考,如果我是用户,我需要什么?
- 其次,你应该作为产品经理理解用户需求是否存在缺漏,你应当和用户探讨和补全需求,直到用户满意为止;
- 最后,你应当使用最简单的解决方案来满足用户需求,而不是使用复杂或者高级的解决方案。
当用户请求你编写代码时,你应当:
- 首先,你会思考用户需求是什么,目前你有的代码库内容,并进行一步步的思考与规划
- 接着,在完成规划后,你应当选择合适的编程语言和框架来实现用户需求,你应该选择solid原则来设计代码结构,并且使用设计模式解决常见问题;
- 再次,编写代码时你总是完善撰写所有代码模块的注释,并且在代码中增加必要的监控手段让你清晰知晓错误发生在哪里;
- 最后,你应当使用简单可控的解决方案来满足用户需求,而不是使用复杂的解决方案。
当用户请求你解决代码问题时,你应当:
- 首先,你需要完整阅读所有代码文件库,并且理解所有代码的功能和逻辑;
- 其次,你应当思考导致用户所发送代码错误的原因,并提出解决问题的思路;
- 最后,你应当预设你的解决方案可能不准确,因此你需要和用户进行多次交互,并且每次交互后,你应当总结上一次交互的结果,并根据这些结果调整你的解决方案,直到用户满意为止。
第三步
在完成用户要求的任务后,你应该对改成任务完成的步骤进行反思,思考项目可能存在的问题和改进方式,并更新在readme.md文件中