这个 AI 懂 Vue 吗？

作者：前端俱乐部

写在前面

最近海外的 AI 编辑器 Cursor 好像挺火的，与此同时，字节跳动也推出了豆包MarsCode编程助手，可以直接生成代码和极限编程。

豆包MarsCode AI 支持网页版编辑器，但我个人更喜欢让它和人气爆棚的 VSCode 强强联手，直接在扩展市场搜索即可一键安装，免费使用。

个人觉得 AI 编程助手之所以流行，是因为在极限编程中存在一个概念：Pair Programming（结对编程）。前 AIGC 时代结对编程需要同事或朋友联机编程，而后 GPT 时代则可以让 AI 和我们实时人机互动。

所以，本期我想分享在 VSCode 和 豆包MarsCode AI 结对编程的渐进测评和使用体验，本文代码主要以 Vue 框架为例。

AI 生成 Vue

目前 Vue 最新的主版本是 3.x，部分公司考虑到兼容性也有在用 Vue 2。

但我们不知道豆包MarsCode AI 懂不懂 Vue 3，所以在使用 AI 工具之前，我一般都会通过提问来试探一下其预训练模型的最新数据。

操作上没有任何黑科技，大部分 AI 都支持直接打字或语音提问即可，举个栗子：

可以看到， 豆包MarsCode 的情商还是比较高的，说自己虽然不如“Vue 之父”，但也是一个很懂 Vue 的 AI 助手。

这说明豆包MarsCode 的预训练模型里已经包含了 Vue 的相关数据，然后我们就可以大胆拷问它了。

首先，我让 豆包MarsCode 直接生成一段 Vue 3 的示例代码，这是它给出的答案，大家看看怎么样？ 

 

AI 结对编程还是很方便，不管是学习还是开发，确实是一个任劳任怨的辅助。

当年我刚实习刚写 Vue 2 的时候，我的代码可能还不如它，因为 AI 代码语义化方面在大模型的训练后天然有优势，虽然是人工智能，但代码却很人性化。

重构代码屎山

豆包MarsCode 除了可以生成代码，还可以用来重构优化代码。

比如上述示例中，我们其实更推荐组合式 API，那就可以让 AI 自己重构，加班是不可能加班的。

这是我让豆包MarsCode 重构之后的代码示例：
 

 可以看到，基本符合我们的需求。如果我们需要从旧项目迁移到新项目，重构工作直接委托给 AI 似乎就欧了。

此外，在 Vue 3 更新的版本中，我们更偏爱 <script setup> 语法糖，但豆包懂不懂 Vue 语法糖呢？

可以看到， 豆包MarsCode也能够使用新型语法糖来重构代码，前提是我们的需求要明确。
就我个人而言，VSCode 和 豆包MarsCode 插件强强联手的优势在于，AI 除了生成和解释代码，还可以点击右上角的按钮，直接将代码插入或者新建文件，直接解放双手，有点零代码或低代码开发的体验了！

最骚的是，我还测试了一个冷门的 Vue 3 功能，一般我们只会在模板中使用 v-bind 指令，但是 Vue 3.2 之后我们也可以在 <style> 标记中使用 v-bind。

可以看到，虽然 Vue 新语法比较小众，但豆包还是能够顺利实现。

人工智能之不能

AI 不会考虑代码风格或时代潮流，只会严格按照我们的指令来生成代码。

我目前个人体验比较头大的问题有两个，但解决方案也不复杂，一来我们需要熟悉一定的 Prompt 提示语技巧，二来我们可以借助豆包MarsCode AI 来弥补编程助手的不足。

就我目前的测试， 豆包MarsCode AI 目前是使用最新的数据进行训练，所以 Vue 3.5 的新功能也难不倒它。由于豆包MarsCode和编程助手都是字节跳动的产品，我相信最新数据很快应该能得到同步，到时候又直接少了一大痛点，perfect！

高潮总结

本期我们使用了豆包MarsCode编程助手进行结对编程，AI 在代码生成和重构优化方面确实效果拔群，但同时对程序员有一定的 AI 素养要求，需要我们去明确自己的代码需求。

我最满意的一点在于，豆包MarsCode 编程助手是作为 VSCode 插件直接集成的，无缝衔接，在 IDE 里结对编程更容易进入禅模式的心流状态，不会像其他各种网页版 AI 助手切屏那样导致编程时注意力分散。

同时， 豆包MarsCode编程助手不仅可以用于实际开发中，在学习技术的时候，我们也多了一个 AI 的外部视角，可以通过元认知来审查代码，这其实也是结对编程的优势之一。

你可以直接注册和抢先体验豆包MarsCode 编程助手，直接作为 VSCode 扩展插件尝试结对编程，提前尝试 AIGC 时代的低代码编程方式。