众所周知,作为目前最火的 AI 代码编辑器,Cursor 可为风头正盛,很多人都说用过了就再也离不开了。
作为一个对 vue/angular、nodejs、java/spring、flutter 等生态略有了解的 Web 全栈开发从业人员,终于确定要试一试了,那当然是拿 cursor 来开发一个之前从来没涉及过的 chrome 扩展开发试试水了。
其实标题并不虚假,但只说了一半:基础功能实现、问答3分钟;细节功能优化、调试一下午。
AI 翻译扩展的效果
安装配置好扩展后,点击扩展图标,显示出功能弹窗,选择需要使用的功能,比如对比翻译:
或者全文的替换翻译:
- 划词翻译:对只需要翻译网页中部分文本,在选中文本(划词)后,会出现一个小的“翻译”按钮,点击之后就会弹窗显示翻译结果,目标语言在右上角的配置面板中指定。
如果是阅读 pdf 文件,或者也是一般网页,右键选择“AI 翻译助手-翻译选中文本”,会弹出独立翻译窗口。
这个独立窗口可以直接当成个简单的翻译工具,复制需要翻译的内容,选择目标原因,然后随意翻译即可,甚至可以保留历史记录。
代码已经放在 github,更多内容可到 Sanotsu/chrome-AI-translation-extension 查看。
使用 cursor 开发的过程
理所当然的,现阶段 AI 大模型的好用程度,和使用者提问的质量是息息相关的,作为一个完全不懂提示词工程的人来说,可能就是使用口水话来问答,都能完成这么一个小工具,那对于高手来讲,应该更简单。
所以我这里先简单分享一下我浅薄的使用过程,只代表个人能力,与工具优劣无关,谢谢。
安装 cursor 并“无限试用”
安装这个没什么好说的,去 cursor 官网 下载安装即可。
至于“无限试用”,是当前可以,后续就不知道了。前提操作是:使用谷歌邮箱注册 cursor 账号。
cursor 新注册账号可以试用 14 天 pro 版本,拥有 500 次“fast requests quota”。如果当前账号过了 14 天或者 500 次用完了,使用该谷歌账号,在名字后+1重复注册即可。
比如用aaa@gmail.com注册后,再使用aaa+1@gmail.com注册,cursor 会当作两个账号,但谷歌邮箱会认为后者这个魔法邮箱和前者的原始邮箱是一样的,所以验证码之类的也是发在前者的。注意,在 cursor 中,要更新账号为后者魔法邮箱。
这个不一定是漏洞,也可能是 cursor 故意让个人开发者使用的特性。总之目前还可以用,所以试用到+9999也是理论可能的,但不排除什么时候就封掉了。
使用 cursor 的 Composer 完成项目编写
cursor 其实就是一个 VSCode 套壳,界面、功能、操作逻辑等和 VSCode 别无二致,主要还是登陆之后 cursor 自带的 AI 特性。
第一步:创建项目文件夹
首先,你还是需要一个新建一个项目文件夹,比如chrome-AI-translation-extension,然后在 cursor 中打开这个项目。
第二步:打开 composer 窗口提需求
然后快捷键Ctrl+I打开 Composer 面板,此时就可以进行对他提你的需求了。类似如下:
看右上角的 Chat 和 Composer 窗口,我个人感觉“Chat”和随便找个大模型网页版进行对话类似,但 Composer 就是可以和你的项目进行互动,可以自动更新、应用代码到项目中去,自己不用动手。但具体介绍可以去看其他说明教程。
输入需求点击回车,等待 cursor 帮你创建代码文件,生成代码即可,类似如下(可放大图片看说明):
注意:每次提问 cursor 帮你生成的文件、代码不一定一样,我这里的提示词,再用一次也不一定得到同样的结果。
在我图示的例子中,根据 cursor 的回答,我新建了一个assets/icon.png,然后打开 chrome,在chrome://extensions/中“加载已解压的扩展程序”选中此项目文件夹,就成功加载了翻译扩展。
然后点击本扩展图标右键的“选项”中,配置保存好在线大模型服务的 API 的地址、模型、密钥。再点击扩展按钮,试一下效果:
对比翻译的:
替换翻译的:
都正常运作了,至此,仅需要一两个问答,就完成了一个小项目的编写。配一下参数,一个 AI 网页翻译扩展就完成了,从输入需求跑一圈下来都等不到 3 分钟。
第三步:修复 bug,优化细节,增加功能
这一部分而我就不展开讲了,需要根据个人需求,在composer中继续提问即可。
例如我这个扩展,在完成初始功能之后,主要还添加了以下几个部分需求的提问(具体提问不是这么直接问的,这里只是列功能需求概述):
- 从点击扩展图标显示功能按钮弹窗,改为一个网页常驻的功能面板,在不同页面进行翻译操作时互不干扰。
- 目标语言选项也修正为类似“繁体中文 (繁體中文)”、“英语 (English)”、“韩语 (한국어)”这样的结构。
- 翻译过程中,可随时停止翻译。翻译完成之后,按钮改为显示原文。
- 为了节约重复翻译时间,将每个网页调用 API 翻译的文本分别存入缓存,设置时效为 1 小时:
- 在有效时效内,已经缓存的网页重复翻译时直接取用缓存的翻译结果
- 增加清除缓存按钮,清除之后可强制调用 API 重新翻译网页
- 在阅读本地 pdf 或网页时,选中文本后,在右键功能中添加“AI 翻译助手-翻译选中文本”选项,点击之后,新建一个独立的窗口,来显示翻译结果。
- 独立窗口上部分显示选中的文本,下部分显示翻译的结果。
- 中间一行左侧可显示和切换目标语言、右侧有翻译按钮,在独立窗口切换目标语言后,可以重新翻译。
- 在独立窗口中添加翻译的历史记录,保留翻译时间、原文、目标语言、译文等内容,预览也要显示这些内容。
- 优化网页文本的获取方式,尽量完整准确地获取需要翻译的文本内容。
cursor 的使用经验分享
我的同事倒是对 cursor 的依赖度突然变得很高,尝试找了很多替代品,但还是没有能够平替的。现在注册邮箱估计得+10了,还靠它写了超过 2 万行代码的单项目。
我是没用多少天了,就从 cursor 开发了好几个小工具,尤其对于不懂的技术,让它去实现而自己不写一行代码就感觉它很厉害。体验下来还是有一些想法:
- 如果在某次问答之后,cursor 产生的代码有缺失,功能上产生了明显的副作用,可以考虑不要继续问答让它修复,而是从产生错误的那一次提问的 checkpoint ,修正提示词重新提交,让它重新生成。
- 因为在问答列表中间重新提问,后面的问答内容会全部丢失,所以尽量不要在已有很多问答后才重新开始。
- 这样做的原因不是它无法修复错误,而是可能一错再错,后续积累太多就不好改了。
- 最好在一开始对项目有比较好的规划,cursor 在重构项目这块不理想。
- 即便是付费的“fast requests quota”,也是使用 claude 大模型来完成代码的生成,gpt-4o-mini 或 cursor-small 效果就更差了。
- 虽然这个 claude 大模型的代码能力很强,但始终是一个生成式模型,它的
refactor可能只是delete + generate。- 所以重构这个做法,看着看着可能代码块就不见了,垃圾代码又留下来了。尤其是可能在改完 A 功能后,想改 B 功能时,发现B 功能的代码已经全丢了,再切回去 A 功能就白改了。
- 对于比较大的项目或者工程文件本身就比较复杂的项目,效果可能不那么理想。
- cursor 在我没有任何介入下完成了我需要的 chrome 扩展的功能开发,我本身就不会 chrome 扩展开发,所以我觉得它很厉害。
- 我有试着让它生成一个 flutter 项目,虽然这个我也不说熟练,但 cursor 的 flutter 扩展就显示了一大堆需要改进的地方,很多新版本特性我知道,它因为各种原因是不知道的。
- 有时候某些细节你可能有更好的想法,但在“统筹全文”的情况下 cursor 可能并不理解你的想法(这也可能是措辞问题)。
- 由于当前这些大模型的训练资料时效,许多技术的新特性它可能不知道。
- 避免超长的对话
- 对话越来越长,你可能会觉得它的回复越来越差。此时可以考虑新开composer。
- 它可能知道自己是怎么实现的功能,但你不一定就知道了。
- 我到现在都没有认真观察过它获取网页需要翻译的文本是怎么实现的,这还是我会js相关前端技术。如果我让它写的rust项目,可能审查的成本就更高了(我不会rust)。
- 注意,可能它也不知道功能有没有实现,只是自顾自地写出了代码,直到你告诉它错了,它才知道错了。
- cursor的好用程度也看个人的接受程度,有时候真的会砸键盘。
- 不要企图当个甩手掌柜,所有内容都靠 cursor 来。
要是它啥都做了,想想你的价值……- 它不能理解领导的需求,但你可以,但你得让它明白你想做什么。你的提问质量越高,它的回复也“可能”会更好。
- ……
当然,这都只是 cursor 的冰山一角了,只是我个人几天的使用经历。更多的意见建议和知识,可以博览多识,看看别人的分享。
题外话
其实 cursor 刚出,用的GPT模型,每天还要限时限量和别人抢用量的时候,我就已经体验过了。不过那比较古早,我就让它写个快排算法,写出来了,哇,厉害,然后也不知道怎么用到项目上。
之后大模型很红火的时候,我的借助 AI 写代码,也只是停留在各个大模型的网页版,去问,去让它们优化部分代码块之类的。不过国内大模型代码能力不是很好,国外的又比较贵且没有试过。
至于我主力编辑器 VSCode 安装扩展的做法,很早就开始的 Bito、CodeGeeX、BLACKBOXAI、TONGYI Lingma、Continue……但由于办公电脑资源有限,i5-4460,DDR3 的 16G 内存,而且在 VBox 使用 Ubuntu 虚拟机进行项目开发,装了这类的扩展加上已有的其他扩展是真的卡,效果还不如我直接复制代码在网页端使用。
与时俱进了朋友们,以前的话,要先看教程,看 API 文档,学得一知半解,慢慢一行一行敲代码,不懂的、报错的那要去查。现在好了,在自己不熟悉的方面,cursor 两三下就把我需要的功能给做出来了,不懂的有错的跟它讲,它自己就改好了。就很震撼。
一方面来讲,这些大模型看过的代码、会的技术,比个人要多得多了,说不定我怎么写都不会比它更厉害。但却又觉得,不是自己写出来的代码,没有安全感,对于未知的事物,确实还是应该敬畏的。所以倒是审查下代码啊,看过了就是自己写的了;就像看教程帖子,收藏了,就当自己会了。
感谢垂阅,有时间也欢迎去我 github 主页 Sanotsu 看看,谢谢。