Cursor 使用分享

2,936 阅读11分钟

Cursor 使用分享

我在 2023 年 3 月份就试用过 Cursor ,它也是作为早期的 AI 辅助编程的一款工具,主打通过 AI 对话提供编程代码,通过编辑器快速植入到你的代码文件中。对于非开发人员其实还是有一定的帮助的,仅需要通过文字描述就可以生成准确率较高的可运行的代码,写写日常的小工具、脚本就比较方便。但是对于开发人员,真正深入到业务开发,实际很少有这种“又简单、有独立”的功能让你去通过 AI 直接生成。反而 AI 很难理解整体业务、整体代码逻辑,并不能一次性给出非常完美回答。于是我采用了当时同类产品 Copilot 采取结合上下文轻提示这种方式,它更符合日常开发习惯。

如今过了一年半,Cursor 又在圈内火了,铺天盖地的好评让我又开始试用了 2 个星期,总体来讲确实有了很大的变化,能力更加强大,下面我对它的一些能力进行简单分享。

聊天辅助编程

聊天辅助编程就是开辟一个聊天窗口,让你同 AI 聊天给予你代码以及思路。因为专门针对 Code 进行优化,所以给的回答准确率比较高。对于一些你不太熟悉的库,没有很好的文档,通过 AI 询问基本要比在网上搜答案效率高很多。

除此之外还有简版聊天功能,可以选中代码,通过快捷键唤起小窗,编辑器可以对 AI 给的代码进行比对和覆盖。在真实的开发场景中其实用得也不太多,因为生成的代码准确率虽高,但不一定好用,主要是它不一定能融入你的整体代码。所以我觉得它只适合一些“不灵活、很规则”的场景,比如单元测试

image.png

比如数据库表字段类型校验

Sep-19-2024_15-06-29.gif

再加个 swagger

Sep-19-2024_15-05-58.gif

另外还可以针对一些代码进行优化,不过用过来使用场景确实不多。

代码补全

与 Copilot 相同,新版 Curosr 也具备了同样的代码补全能力,以淡色的文字显示。使用了 2 周后它的准确率给我直接感觉是与 Copilot 不相上下。但是与 Copilot 不同,Cursor 的补全提示更加积极,更加有侵略性。这里的侵略性并不是贬义词,相反结合高准确率会让用户有更好的体验。

触发时机

Copilot 触发补全的时机基本都在代码输入时,所以有一些情况下我们可能要输一个空格/删一个空格来触发提示。Cursor 则似乎采用“全文对比”的形式,可以再非光标的位置进行补全,触发时机也不仅仅在输入时,甚至可以切换光标的时机触发。

Sep-19-2024_15-28-45.gif

以上例子我在对象上新增了 gender 属性,Cursor 会自动在下面的解构中补全 gender 属性,以及最后渲染 gender。这里我全程不需要移动光标和输入代码,它会有个 tab 图标提示,使用 Tab 键就会自动让光标切到指定位置并进行代码填充。

在高准确率下,这个能力会非常实用。

跨行/多行代码补全

上面提到 Cursor 似乎拥有全文对比能力,可以对你的代码文件与它推荐的代码进行对比,找出多处跨多行补全提示

Sep-19-2024_15-39-23.gif

这里我修改了 text 为 text3,后续的变量都会提示你修改(虽然我没明白为什么不是一次性全部补全到位)

相反,我可以先使用组件,它也可以跨行提示你去导入该组件

Sep-19-2024_20-03-13.gif

这 2 个例子相对简单,实际开发场景这种跨多行补全是很好用的,提升的效率非常明显。

跨文件补全

Cursor 一开始没有做成 VS Code 插件是因为能对编辑器 UI 有更好的控制,而且能读取整个项目文件,这样对于不同文件代码之间,尤其有相互引用关系的文件,会有更好的提示和补全。

Sep-19-2024_20-27-06.gif

这里我定义了 props type,切回到要应用的 tsx 文件时,Cursor 主动会提示你引用这个 type 文件。

Sep-19-2024_20-39-54.gif

同样地,我在两个文件之间相互修改,都有非常准确地提示、补全能力。

另外我还发现一件有意思的事,Cursor 似乎会参考文件堆栈,对于刚保存的文件会优先推荐引用。

Sep-19-2024_20-47-07.gif

这个例子中,case 3 文件夹中定义了 2 个组件 BaseText 和 BaseInput ,一旦其中一个文件保存或是查看后,主界面中会优先推荐引用。

智能修复

由于拥有这样“侵略性”的补全能力,Cursor 会提示你修复一些错误的关键字、变量名

Sep-19-2024_20-56-25.gif

这里我写错了变量名和关键字,在第一次写错变量名时就已经提示你正确的代码。尽管我无视了它给的修复性补全继续写,它还是能够过跨行补全的能力修复之前的错误变量名。

@Symbols

与 Copilot Chat 相同,Cursor 的 Chat 功能也提供了这种快捷指令的功能,能让用户与大模型更便捷地交互

文件/代码指引

可以使用 @Code @Files @Folders 来指定代码,效果等同于复制一整段代码进去聊天框,这三个都差不多,只是分别针对代码片段、代码文件、文件夹场景。

我实际测试下来,似乎也只是引用了里面的内容,方便了用户不用大量复制粘贴内容进入聊天框,只要引入对应文件就行。

image 1.png

这样的话其实我们可以把我们经常用的或是已经训练好的 Prompt 通过文件形式保存起来,需要时直接引用对应的文件,比如

image 2.png

此外还可以用这种能力来导入组件和方法,比如我定义了一个 hooks,我通过 @Files 来引用,它会解析这个 hooks,分析出入参和返回,最后给你一个比较“合理”代码片段。这里的“合理”并不单单指准确率比较高,还会分析上下文,哪些变量可以作为 hooks 的入参,哪些变量使用了该 hooks 的返回值,都能解析出来,并非只给你一段独立的引用代码片段。

image 3.png

如上图,getDataApi 方法会传入 hooks,返回值 data loading pagination 用在了 Table 组件上

最后还有一种场景,我们可能会遇到一些相似的页面,比如管理后台的列表页,估计大部分开发者都是复制一套模板代码,在从模板代码上修修改改,如果用这个功能会更加简便。

image 4.png

比如我们的模板代码大概长这个样子,一个筛选表单,一个表格。于是可以引用这个模板代码,再加上自己额外的需求,来生成对应的代码。

image 5.png

最后效果

image 6.png

其实还不够完美,这里出生年月应该是时间选择器,prompt 中还得明确表明才行

文档检索

@Docs 可以选择文档,Cursor 已经配置好了很多非常流行的库的文档。即便没有收录,我们也可以再设置中添加,不过似乎不太支持客户端渲染的单页面文档。

在 Chat 提问中,指定某个文档会得到更加准确的结果。

image 7.png

于是就可以指定 tailwind css 文档,非常准确地生成对应的原子类。

不过也有一个疑问,正常情况下就算不指定文档,也能生成准确的结果,那指定文档有没有提升效果?

我做了一个实验,指定最新的 ant design 文档,生成一个 modal 组件的 demo

image 8.png

这个没什么问题,然后我自己新增了一个 doc,名为 antd@4,其实用的是 antd@3 的 Modal 组件文档页,这里想做一个误导,于是生成了下面的内容

image 9.png

在 antd 3 版本之前,Modal 等组件的显隐是 visible 属性来控制,往后改成了 open,可以看到这 2 个例子,新版本 doc 用的是 open,老版本的 doc 用的 visible,所以配合文档确实还有效果的。

既然能分析文档,那我想是否能解析 API 文档,然后直接生成 API 请求方法。我找了豆瓣 API api.doubans.com/https://api… 再配合一段示例代码来生成所有豆瓣开放接口的请求方法

image 10.png

确实可行,但是生成效果并不好。豆瓣 API 文档中共有 25 API,即便后面我一再强调不要遗留 API 最终也只会生成十来个方法,没有覆盖全部。这里我分别试了 gpt-4o 和 claude-3.5-sonnet 都不太行。

所以我换了一个策略,先解析出文档的分类,再生成每个分类下的请求方法。

image 11.png

image 12.png

效果明显提升了很多,不同的项目都有不同的优化策略,对于 API 文档生成请求方法代码是可行的。

同理,上文提到 @Files 指令,可以直接引用 API json 来生成,这里以 swagger.json 为例

image 13.png

效果显著,还可以自动定义接口类型

网络搜索

添加 @Web 可以对提供的上下文构建搜索查询,然后把搜索结果附加到上下文,针对于查找最新的消息会比较有用。

此外还会列出搜索参考的网址

image 14.png

理论上结果会更准确,但也有例外。我又测试了一遍关于 antd 的 Modal 组件

image 15.png

这里依然显示的是老版本的 visible 属性。原因是红框里的 2 个 url 分别是 3.x 和 2.x 版本的文档,导致与最新的 API 有偏差。所以还是得明确 prompt 以及对结果要保持验证与实证的态度。

Git 提交分析

使用 @Git 可以调用 git commit 或 pr 记录,分析代码差异

image 16.png

总体来说就是解析一下这个提交记录做了什么,或者 git add 后生成一个 commit message,一时也没能想到可以玩的东西。

Codebase

Cursor 会扫描你的项目,使用 @Codebase Cursor 在代码库中找重要的文件或是代码块,然后根据与查询的相关性对上下文项进行重新排序、推理再生成回答。

这里的使用场景可能更加广泛,不单单指某个文件。如下面例子,针对于整个项目请求方法的优化方案。首先它能够找到对应的文件和代码块并分析

image 17.png

用处嘛好像也没太大用?但是我想这是不是更适合源码解析?

于是下载了 axios 的源码,并提问

image 18.png

回答还是挺准确,并找到了相应的代码块。axios 毕竟还是比较轻量,不知道 react vue 这种效果如何。

结尾

其他还有一些功能,比如自定义的 rules ,类似 chatgpt 的 system 定义,优化提示词,可以在 github.com/PatrickJS/a… 上找就行。

同时还支持新增 model,如 deepseek,网上有很多教程这里就不展开说明了。

最后对标 Copilot,Cursor 在代码补全的能力上有更优秀的表现,尤其是跨行补全和跨文件补全,比 Copilot 覆盖了更多的补全场景。在补全准确度上,简单逻辑场景两者几乎不相上下,都具有超过 90% 的准确度,减少了很多“脏活累活”。在复杂逻辑场景下 Copilot 似乎更优秀一点,但差距也不明显。Copilot Chat 与 Cursor Chat 相比,Cursor Chat 具有切换各种模型的优势,以及快捷指令更加具有易用性。另外还有一个早期被我诟病的问题是 Cursor 编程卡顿,虽然那时候已经 fork 了 VS Code 但似乎有点被阉割,体验下来没有原版流畅。不过现在使用下来与原版完全没有差别,甚至不看图标我几乎感受不出到底是 Cursor 还是 VS Code。

总体上还是很推荐使用 Cursor 的。