这个 AI 懂 Vue 吗？

作者：前端俱乐部

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

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

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

所以，本期我想分享在 VSCode 和豆包MarsCode 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 时代的低代码编程方式。