大家好,我是双越老师,也是 wangEditor 作者。
我正致力于开发一个 Node 全栈 AIGC 知识库 划水AI,包括 AI 写作、多人协同编辑。复杂业务,真实上线,大家可以去注册试用,围观项目研发过程。
开始
我之前写过一篇文章 程序员设计不出精美的 UI 界面?让 V0 来帮你
其中提到了 Cursor 编辑器“适合非专业人员使用”,引来了几个负面评论。
在此我重新更正一下我的观点,并为此造成的误解说声抱歉~
- Cursor 给了非专业人员编程的能力;
- Cursor 会让专业人员编程更加高效;
PS. 在 划水AI 项目分享群里,真的有非专业人员使用 Cursor 开发功能,并且用的非常自信。
但是,Cursor 的 AI 能力如果给专业人员使用,到底会怎样呢?尤其是它的 Composer 编写多个文件的功能,在不同的项目场景下到底能带来怎样的提升?
我们今天就来详细试用一下 Cursor Composer 生成代码的功能。文章最后我会给出我个人的试用总结。
配置 prettier 和 eslint
上来就是专业模式。虽然 prettier 和 eslint 比较基础,但非专业程序员应该不会在意这些,甚至不知道这些工具。
我拿一个几乎是空白的 Nextjs 项目,里面只有两三个简单页面和 2 个 API ,一眼就能看懂的。
使用 Cursor 打开,让它去生成 prettier 和 eslint 的配置,效果非常好。
它默认生成的规则是带分号的,我让它去掉分号,也可以准确修改
当然,其中它会告诉你去安装一些 npm 插件,按照它的说明去执行即可。不到 1 分钟搞定 prettier 和 eslint 的配置。
配置 pre-commit 检查
一般会把 prettier 和 eslint 配置到 pre-commit 检查,使用 husky 工具。
但这里出问题了:husky 的配置是老版本的,最新版本的已经不用 lint-staged 了。
而且 husky add 这个命令也是过时的,以及 pre-commit 文件的写法也是就版本的。
执行 husky add 命令,控制台会提示 husky - add command is DEPRECATED 老旧弃用了。
后来我参考 husky 官网的写法,自己手动修改代码,改过来的。
然后又继续生成 pre-commit 检查 commit-lint 的配置,也没成功。同样的问题,这里不再赘述了。
虽然没有成功,但这也是可以理解的。
- AI 大模型都没有办法实时的更新所有数据的资料
- 工具的配置即便是错误了,我们作为专业的程序员也可以自己补救,毕竟工具配置是一次性的,不是天天改
简单的 Todo List
工具类的有时效性的问题,那就来个业务类的,先从简单的业务开始。
我看国外的一些博主推荐使用 v0 或 bolt.new 来创建一个项目,然后下载下来再用 Cursor 编辑。这倒是一个很不错的方式,但这里我已经有一个简单项目代码了,就不用了。对 v0 和 bolt.new 感兴趣的同学可以看看我之前写的文章 juejin.cn/post/743864… 和 juejin.cn/post/744122…
我们继续。
我这个 Nextjs 项目本身就有一个非常简单的 Todo List 功能,就前端获取 API 数据并展示,非常简单。
基于当前的代码,继续增加新功能:新建 todo 的 input button 并提交到服务端。几秒生成代码,没问题。
继续增加新功能:切换完成状态,要考虑同步数据到服务端。几秒生成代码,也没问题。
并且准确的修改了服务端代码,增加 PATCH API
网页界面如下,可以看出这个功能是比较简单的。
重新设计 UI 样式
当前界面不好看,想重新设计样式,我给出要求:内容居中,增加字体 input button 尺寸,看起来松散一些
设计结果并没有达到我的预期,内容没有居中,input 和 button 也没有变大,就增加了一个多余的标题。
对于 UI 的理解和设计上,和 v0 的感觉完全不一样,后者更专业。
使用 React19 重构
当前代码用最普通的方式实现 fetch 请求,而 React19 对此做了一些升级,我想在此使用一下。
基于之前操作 husky 和 commitlint 的时效性问题,我首先使用 Chat 聊天,询问 react19 是否熟悉,Cursor 是熟悉的。
然后我使用 Composer 去生成代码,结果,它直接把我之前写的 react19 代码给删掉了。
然后使用传统的 if 实现了 loading 效果。现在代码已经比较多了,我看着就感觉有点乱乱的。
而且我现在不知道如何撤销这一步修改,点击这里 reapply 没反应。这一步效果比较差。
而且,项目代码多了,它这一次性修改几个文件,如果我不是非常详细的一行一行过目,我都不知道它改了啥。尤其是经过几次修改之后,修改的内容都混合在一起,更不知道改了啥。总不能每次都 git commit 一次吧。
非专业人员不会在意 react 哪个版本,也不会在意代码是不是乱乱的,反正能实现功能就行。
其实我们实际工作中也不会太在意哪个版本,能用就行。所以,从实际角度出发,这个问题也不是啥大问题。
修改 划水AI 代码
简单的 Todo List 搞的问题不大,那就再搞一下复杂项目试试。用 Cursor 打开 划水AI 项目代码。
使用 Cursor Composer 增加一个需求:修改用户信息以后,强制退出,重新登录。
修改以后,运行报错
有报错没关系,可以使用 Cursor 修复这个报错。鼠标放在报错位置,会提示 Fix in Composer
点击这个蓝色按钮,会跳转到 Composer 对话框,再回车即可。
它直接创建了一个目录 hooks 和一个文件 useAuth.ts —— 这对于我这种有代码洁癖的人,有点难以接受。
因为 logout 在现有的 auth.ts 文件中就有,不用新建一个文档。
无论如何总算是运行成功了。测试,修改用户信息,提交 —— 并没有退出,和之前效果一样。控制台也没有报错,如何解决这个问题 —— 只能靠人工排查。
对了,它还搞出了一个 TS 编译报错
Fix in Composer 修复这个问题
然后重新运行,直接运行失败,服务器端错误...
划水AI 并不算是超级复杂的项目,而且代码和设计也都比较合理。相比之前,有些公司项目会更加复杂,而且经过几代人的维护代码会更加凌乱,这种情况可能 AI 更难应对。
复杂项目的使用技巧
我在 Cursor 的论坛上发现了一个和我类似的问题。该用户提到,对于大型项目,Cursor 也是非常挣扎,它倾向于去创建新组件、新属性,并且可能带来新问题。
下面的一个回答,我觉得说的很有道理
- Cursor 仅仅是一个工具,它代替不了程序员
- 大型项目,不要直接给出全部的代码库,AI 吃不消的。而是使用 Context 上下文,即选择一个或几个文件/文件夹,划定范围
- 写出尽量详细的 prompt 让 AI 更详细的了解你的意图
- 努力保持代码简洁,要聪明的、精细的使用 AI ,它才会有效果
按回答者的说法,大型项目使用 Cursor 是需要很多技巧的,就光第二条“使用 Context 上下文”这就需要很精心的考虑,否则你遗漏了内容 AI 也考虑不了那么全面。
而且,写出详细的 prompt 这也是一个挑战,因为我遇到太多的人,提问一个问题都说不明白,你让它怎么写详细的 prompt 。
最后保持代码简洁这更是困难,尤其是公司里经过几代程序员维护的大型项目,简洁不敢说,动一行代码可能就跑不起来了。
所以,这些使用技巧和要求,对程序员的考验比对 AI 的考验还要大,实现起来还要难。
另外,我觉得对于公司内部的复杂的大型项目,也许训练私有的大模型(基于目前开源的模型,如 Llama DeepSeek)是一个不错的方向。当然这只适用于大公司大团队,需要持续的成本投入。
- 项目比较大,共用 AI 模型理解不了
- 公司资产要保密,不适合让 AI 模型获取和上传
- 训练私有模型,理解公司内部项目,在内网使用
关于 cursorrules
cursorrules 是一个文件,用于告诉 Cursor 你的一些项目背景,例如
- 指定项目的技术栈
- 设定开发规范
- 引导AI的问题解决思路
- 创建自定义指令
cursorrules 可以参考这个网站 cursor.directory/ 来下载和修改。
隐私模式
在 Cursor设置里,可以看到隐私模式,默认是关闭的,即它会收集你的代码和数据。但如果开启隐私模式,它不收集你的代码了,那它对于你代码库的理解会不会打折扣?
而且,在我使用 Cursor 这段时间里,CPU 消耗非常高,看来它一直在分析代码或者上传代码。
总结
我试用 Cursor 的总结:
- 简单常见的场景没问题,重复性的增删改查工作也没问题
- 工具和框架不能保证及时更新(husky commitlint react19 nextjs15 next-auth),当然这和 AI 模型有关系
- 复杂项目、大量的代码,目前它还处理的不好。而且在代码结构设计的合理性上目前还远远不够。
我现在日常维护 划水AI,开发一些功能,修复一些 bug ,我不会使用它。
- 项目比较大,它理解的不好
- 它可能会把我的代码搞乱
但如果我是开发公司的一些重复性的项目,增删改查,重复性的功能比较多,时间紧任务重,我会使用它。至于代码乱不乱...先保证工期吧。
无论 PPT 写的多好,AI 现在仍然处于 assistant 的角色,适合的还是 repetitive 重复性的工作。