豆包 MarsCode AI Apply功能揭秘：自动代码应用与 Diff 实现

前言

最近豆包MarsCode AI 问答已上线新功能:一键 Apply AI 生成的代码片段至项目对应的文件位置并形成 Diff，无需手动打开文件、复制粘贴，AI 生成代码的体验更流畅，听起来很nice👍️，接下来让我们在实际项目中体验一下吧🏄️🏄️🏄️。

使用指南

1. 以VsCode为例，在插件市场搜索豆包，点击Marscode AI安装按钮，右侧就会出现MarsCode图标，点击即可打开面板，mac下快捷键（ ⌘ + u ）

2. Apply功能使用：选中右侧代码,在左侧输入想问的问题（例如优化），在豆包生成的回答右上角点击apply即可将豆包的回答添加至选中代码处。
   

ps: 在引用信息处点开即可看到上述选中的代码位置

同时在选择上下文时也支持一些自定义指令，这点确实很方便，不用一个一个粘贴到回答区，点个赞👍️👍️👍️

使用场景

本文使用开源项目react-admin，地址:https://github.com/marmelab/react-admin, 来模拟日常开发场景，看看是否能满足日常工作中的需求，项目概览图：

1. 功能实现

示例需求：我想只显示table组件的tags这一列，应该如何实现？

操作步骤：

如图所示，依次点击apply按钮

此时会出现新旧文件的diff，可以对新增对豆包的回答部分点击采纳✅或者拒绝❌，也可以点击左侧回答区域的全部采纳

这点和我们在使用vscode merge代码是很相似，总体来说这个diff功能还是很不错的。

回答效果： 完美理解需求，保存后即可预览页面，和我所预期一致，🐮🍺！

2. 代码优化/错误排查

示例需求： 这段代码有什么问题吗？请找出并优化。

ps: 故意将数组的map方法修改为maps，看看是否能发现

回答效果
在指出文中的错误的同时，还对已有代码提出优化建议，很不错

按照区域依次或者左侧点击采纳，即可将代码插入文件中

3. 同步函数名称修改

即修改一个函数的名称，所有对引用的地方也同步修改

示例需求：将exporter函数名称换成exporterFile并将调用到的地方也同步修改

回答效果：完美完成👍️

ps：这个功能和vscode的目录或者单文件搜索替换相比的话，豆包会自动过滤非函数但是名称仍然是exporter的值，而目录搜索只是正则匹配。

例如我文中的ListBase组件也有一个exporter参数，目录搜索会匹配到，但是豆包则不会，所以相比较而言还是豆包更胜一筹👍️

全局搜索

豆包回答

4. 注释生成

顾名思义就是生成注释😂😂😂

操作步骤：
生成注释的话这边会有快捷键，如图所示依次点击即可

回答效果：比较好的点是可以配合apply功能对注释进行增量添加，过多的注释有时会显得很冗余。

5. 自动生成所需文件

示例需求：在当前项目根目录下生成一份.prettierrc格式化文件，统一格式化配置

回答效果：

点击全部采纳后，项目根目录就自动生成啦💯💯💯

总结

优点：

1. 减少复制粘贴等重复性操作
2. 增量diff类似于git提交，方便开发者在豆包回答的基础上二次调整
3. apply功能支持生成文件至特定目录，这点之前在豆包在线的IDE体验过，感觉很不错，这次弄到插件里来了，很nice。

待优化（个人意见）：

个人感觉这个apply功能优点类似于cursor的apply，我在之前的文章（文章链接）中有提到这个点，不知道是不是官方看到了👀，然后做了这个功能🥲🥲🥲🥲。

1. 添加项目依赖时文件目录位置不明确，例如一般项目中各个组件目录都会有index文件，但是豆包的话我需要一个一个hover上去，相比之下cursor就会一目了然。

豆包：

cursor：

2. apply在单文件时表现优异，但是跨文件时有时并不好用（相较于cursor的composer），cursor的composer会自动保存整个过程中的所有文件的生成和修改

豆包：

会生成很多无关内容，导致我全部替换需要向下滑动很久

cursor：

ps: 同时我在cursor的composer目录下可以连续多次选择很多文件，选择弹窗不会关闭

豆包则还需要重新输入#Files来添加，这一点算是个小优化吧。