AI Editor 真的被惊到了

引言

AI 辅助编程工具层出不穷，也尝试过不少 AI 编程辅助工具，但效果都不太理想，提示的代码命中率并不高，但却严重影响了编码的流畅性，并且聊天对话的时候，多数都需要手动引用代码，即使引用了代码，也仅仅就是引用了提供引用的代码，提供的帮助很有限，很多时候，都是试过就禁用了。

最近在开发过程中比较深入的使用了 Cursor、Windsurf，有被惊艳到。

立体轮播图开发

想给自己的独立站 『ONLOOKEE』 增加一个炫酷一点的带 3D 效果的轮播图，网上没找到现成的，自己实现也不太可能。

先是去问了 ChatGPT，ChatGPT 提供了几个方案（库），其中之一是使用 Swiper 库实现轮播效果，再额外增加立体效果，并附上了示例代码，复制进行测试后，发现并没有立体效果。

这个时候，想到了刚装好的 windsurf，便在此基础上让 Windsurf 增加立体效果，Windsurf 先是像人一样回答“我明白了……”看回答的内容，好像确实是明白了。然后，便自动生成、修改了代码，很惊艳！！！

不过，测试发现，立体效果是有了，但轮播功能却没了。这时候，我直接告诉 Windsurf 把轮播效果弄没了，Windsurf 又像人一样回答“抱歉，……”，看回答的内容，又好像确实是明白了。然后，便自动生成、修改了代码，很惊艳！！！

然后，测试发现，轮播效果有了，但立体效果又没了。这时候，我索性将我的需求一次性完整的告诉 Windsurf，但生成的代码始终差点意思，效果都不太理想。

因为代码都是自动生成的，所以，也完全没去看过，感觉有点乱了，我让 Windsurf 全新实现……又经过 N 多轮反复的对话调教，终于生成了一个相对满意的效果，前后共 5 张图（其实设想的是 3 张），但就是初始化显示“不完整”，自己又不知道怎么改，还是没法用。

Windsurf 生成的：『效果演示』

这个时候，想到了 Cursor，我将需求完整的告诉 Cursor，Cursor 就像理工男一样，二话不说，直接生成了代码，然后，在下面给出了一些解释。然后，Cursor 也不像 Windsurf 那样完全自动，默认不会直接修改代码，会一段一段让你确认，也因此，我会花点精力去看到底生成了哪些代码。

Cursor 也出现了 Windsurf 一样类似的问题，有轮播没立体效果，有了立体效果，又把轮播功能丢了的情况，但总体要好不少，生成的代码也更加符合本来的需求，当然，这里最根本的原因是背后的大语言模型的区别，不得不说，Claude-3.5-sonnet 确实在代码编程方面很强大。

又经过 N 多轮对话调教，Cursor 最终生成了基本符合设想的带 3D 效果的轮播图（前后 3 张图），因为有去看生成的代码，对代码也比较理解，自己仅仅是改了一个参数，让立体效果明显一点。

Cursor 生成的：『效果演示』

TypeScript 编译时类型报错问题的解决

一直卡在 Typescript 的类型问题上，看得懂，但就是写不了。好多次发现了好用的 Vue 框架，但就是在编译生成时，一堆类型报错，又不知道怎么解决，最终无奈放弃了。

自己可以不用 Typescript，但现成开源的项目多半都是使用 Typescript 的，自己造显然也是不现实的。

老王最近开发的工具箱 『toolboxes』，界面基于 『Nova-Admin』 搭建。

尝试让 Cursor 在界面写一个多平台的选项，Cursor 会自动引用当前代码文件，如果需要还会深入项目进行搜索，根据当前项目使用的技术进行分析，生成符合当前项目技术的代码。Nova-Admin 使用了 Naive UI，而我并没有将此细节告诉 Cursor，但 Cursor 在分析后，自动使用 Naive UI 的<n-checkbox></n-checkbox>组件生成了多平台的选项，非常的 Nice。

然后，在编译的时候，也是产生了一堆类型报错问题。试着把类型问题告诉 Cursor，很顺利，Cursort 一个一个把类型问题解决了，完全由 Cursor 完成，一次通过，这回终于顺利编译通过了。像这种不涉及逻辑，纯粹语法问题，Cursor 的达成率几乎 100%。

经过这一次，自己的 Typescript 也算是上岸了。

通用类型声明代码提取

在实现了 “聊天聚会”和“素材搜索”两个功能后，发现，有不少类型声明是通用的。

尝试了 Windsurf，提取的类型声明文件就在当前文件相同目录下。感觉缺点啥，放弃。

又尝试了 Cursor，会将提取的类型声明文件放到@typings目录下，显然 Cursor 达到的效果更好，再次感受 Claude-3.5-sonnet 的强大。

将数据改成接口动态加载

如上图，一开始，老王是自己一个一个把平台的选项敲上去的，都是先实现，后优化。。。

我先是让 Cursor 用循环将平台选项进行循环输出，Cursor 声明了类型，数据封装，用v-for进行了输出，一次基本上就搞定得差不多了。

然后，告诉 Cursor，数据是由后端（Pyton）接口返回，Cursor 便进行了类型的重新声明、数据封装，模板输出修改，一气呵成，生成的代码也非常 Nice（比自己写得好太多了）。

将两个处理逻辑相同的代码块进行整合

然后，国产、国外这两块功能逻辑也是一样的，又让 Cursor 对这两块进行整合。其实，一开始，是不抱太大希望的，至少觉得不会太顺利。但事实上，Cursor 一次就实现了基本可用的代码，生成的代码非常简洁专业，包括类型重新声明，数据封装，函数实现，模板输出，一气呵成，自己仅仅是在具体的数据项目进行了设置，有被再次惊艳到。

全选功能

想增加全选功能，奈何自己也是赶鸭子上架，对 Naive 框架不太熟悉，继续让 Cursor 生成。按上面的经验，原本以为 Cursor 应该会很顺利实现，然而，事实却总是出乎所料，这里反复折腾了好久，代码生成后，进行测试发现，全部选中后，全选按钮本身的状态却始终是未勾选的，无法取消全选，查询官方文档无果，也没有这方面的示例……不断告诉 Cursor 有问题，Cursor 反复尝试不同方案进行生成，终于，在反复 N 多次生成后，终于生成了一个有用的，发现需要用到computed()函数，解决了问就好>_<。

n-form-item 设置宽度问题

发现表单项的标签宽度不统一，不好看，便想给标签增加一个固定宽度。让 Cursor 进行修复，Cursor 反复在n-form-item中设置label-width、label-style……，但始终无法生效，此时 Claude-3.5-sonnet 模型已经无法使用，Cursor 并没有提供更深入有效的答案。

去查官方文档，看来看去，就是找不到原因。

这个时候，我去问了 ChatGPT “Naive中n-form-item表单项标签宽度label-width设置无效 ”，ChatGPT 把所有相关的文档都罗列出来了（如下图），然后，我发现在 n-form 中也有个 label-width，测试后发现这个优先级更高，终于解决了。

global 类型报错

在编译的时候，提示我类型重复了，问了 Cursor、Windsurf，都是在当前文件把相关类型给删除，再编译，又提示我类型未定义，问了 Cursor、Windsurf，又把同样的类型给加回去了……反反复复，来回了十几来回，始终无法解决。

这种问题，去问 ChatGPT，也是罗列了一堆可能性，但是都定位不到具体问题所在

后面，我自己意识到，提示重复的是 2 个文件，而这两个文件，有一个是复制另一个来的，因为逻辑大体是相同的，而文件中的类型声明是用global块包围的，然后，我就让 Cursor 将类型声明提取到独立文件，然后，编译通过了，问题解决了。发现global真的很 Global。

程序猿离下岗还有多远

体验过 Cursor、Windsurf，既有惊艳到，也确实有一丝丝顾虑。

一个初级程序员加上 AI 是否就会把老程序员多年的开发经验给抹平，毕竟老板都喜欢降本增效。

当然，有经验的老程序员，也能在 AI 的帮助下，达到更高的水平，这就拔高了对程序员的要求。

AI 生成的代码几乎不会存在语法错误，当然语法正确不代表逻辑正确。

目前，AI 编程工具大体处于 L2 级别，辅助级，简单的原子级功能通常能顺利完成，且可用度还可以，但是，当步骤稍微多一点，通常需要好几个来回才能达到相对满意的程度。如果自己本身不懂编程，想要实现比较复杂的功能还是不太实现。

Cline & Deepseek V3

这几天，当红炸子鸡 Deepseek 刷屏了，自己也通过 Cline 插件进行了试用，效果确实不错，可以像 Cursor 一样深入解决一些疑难杂症，只是有时候等待的时候会有点点长。

相比于 Cursor 本身的 AI Compose 功能，在 Cline 中使用 Deepseek V3 的过程更加透明。TA 会告诉你 TA 需要读取什么文件，会征求你的“Approve”（同意），会列出读取了哪些文件，处理了哪个功能，具体是怎么处理的，。。。再次被惊艳到了，这不就是一次手把手的教学么！

总结

大语言模型已经证明了，大力出奇迹，AI 的发展已经上了快车道，可以说是日新月异，指不定哪天就实现了突破。

拥抱变化，努力适应 AI 带来的变革，提升自己的能力，才不至于被时代所淘汰。

---

本文链接：https://onlookee.cn/dev/ai/aieditor.html

欢迎转载 ~~~ 欢迎收藏 ~~~ 欢迎评论 ~~~