初识豆包MarsCode

这是前段时间做的一个直播课程，视频地址：https://www.bilibili.com/video/BV1RMynYPE12 ，纯新手向。

背景

这是一个全新的内容生产时代，从 GPT3.5 开始，LLM 已经爆发出惊人的内容生成能力，引发各行各业的高度关注，生态繁荣迅速为我们带来了 GPT 4o、Claude、豆包等各类细分领域模型，大量敢于吃螃蟹的人已经通过各种方式吃到大模型带来的时代红利。

LLM 有很强的内容生成能力，非常擅长基于旧的信息生成新的知识片段，在文本、图像、视频等内容生成领域其实都算是大放异彩了，并且它也非常适合辅助编程，善于做代码生成、测试生成、代码 bug 分析、文档生成、代码理解等任务，进而能够显著提升变成效率(《ML-Enhanced Code Completion Improves Developer Productivity》)，因此业界有许多团队在探索这个方向。

虽然，我们可以用传统的 LLM 对话框做辅助编程，但相比而言，专门为编程定制的，基于 LLM 的 IDE 必然会有更高的开发效率。以豆包MarsCode 为例，它可以：

1. 更强的上下文索引、理解能力， 能够更好地理解代码的上下文和开发者的意图，从而提供更加准确和相关的建议。这种能力不仅限于简单的代码补全，还包括对代码结构、变量命名、函数调用等方面的深度理解。
2. 更契合开发过程行为的各类 LLM 交互， 这些交互不仅仅是简单的对话或代码补全，而是深度嵌入到开发者的工作流程中。例如，豆包MarsCode 可以根据用户当前编码动作推断下一步可能的动作，直接给出下一步代码建议，用户只需点击 Tab 按钮即可采用；
3. 专门为编写代码而训练和微调的定制化模型， 配合 豆包MarsCode 内置的各类行之有效的 prompt，帮助开发者更高效地完成任务。对于使用者而言，这些复杂的模型和 prompt 是透明的，他们只需专注于编写代码，豆包MarsCode 会自动提供最合适的建议和补全；
4. 具备更强大的错误检测和修复能力， 豆包MarsCode 可以实时分析代码，检测出潜在的错误和漏洞，并提供相应的修复建议。这不仅能帮助开发者更快地发现问题，还能提高代码的质量和稳定性。

某种程度上，以 ChatGPT 为代表的大模型能力，打开了一个新的内容生产时代，而 豆包MarsCode 等基于 LLM 的辅助编程工具，则极大降低大模型的使用与软件开发部署门槛，能够极大提升软件工程效率。

我认为，这对每一位正在或将来有意愿从事程序开发工作的人都是大有益处的。

• 对新手而言：可以借助 豆包MarsCode 提供的这些能力快速上手熟悉语言与框架，不必花费过多学习时间就能进入开发状态并完成任务，可以无痛上手开发个人博客、小游戏、浏览器插件甚至学习 leetcode 题目等
• 对专业开发者而言：豆包MarsCode 可以帮你完成许多基础而琐碎的重复性任务，还能很好地帮你完成各类 Debug、代码优化、代码分析方面的工作，是一个非常强大的 7*24 编程助手。

启动

接下来我们来开始进入正题，豆包MarsCode 提供了两种使用方式，一是 Web IDE 形态，二是 IDE 插件形式，进入 豆包MarsCode 首页可看到多个入口：

IDE 插件的安装路径非常简单，可以直接在 VS Code 插件市场搜索 豆包MarsCode 关键字，下载安装即可：

其次是 Web IDE，直接进入 Dashboard(https://www.marscode.cn/dashboard) 即可启动。

两者核心功能相似，都能借助豆包模型配合各类专门为编程设计的交互模型实现辅助编码，只是使用方式上略有差异，下面展开细讲。

使用 VS Code 插件

Step1：安装插件

首先介绍 VS Code 插件，使用之前需要先在本地 PC 安装 VS Code 与 豆包MarsCode 插件：

1. 如果你未安装 VS Code，则需要提前下载安装，下载地址：https://code.visualstudio.com/Download；

2. 安装 Visual Studio Code 后，点击左侧导航栏上扩展按钮，打开扩展窗口。

3. 在搜索框搜索“豆包”或者“MarsCode”关键词，找到豆包豆包MarsCode 后单击「install」，完成安装。

3. 安装完成后，点击左侧 豆包MarsCode icon 即可进入 豆包MarsCode 交互面板；

Step2：创建项目

正式开始之前，我们需要在本地创建教学项目，方便后续讲解，这里我们只需要创建一个最简单的项目结构即可，可参考执行如下命令：

mkdir -p my-test/src && cd my-test 
npm init -y 
touch src/index.js

之后使用 VS Code 打开该项目。

Step3：理解基础功能

1）交互面板

安装完成并打开 VS Code，即可看到左边操作区域出现 M 字形的 豆包MarsCode Icon，点击即可打开 豆包MarsCode 操作面板：

插件操作面板 是 MarsCode 的主要交互入口，这里可以看到若干围绕 LLM 建立的交互能力，包括：

• Generate(生成)：只需以文字方式提交需求，豆包MarsCode 即可生成对应代码，这一功能对编程新手尤其重要，可帮助新手快速理解和掌握编程的基本原理和技巧。另外，通过直接观察生成的代码，新手也可以更好地理解代码的结构、逻辑和语法，从而提高自己的编程能力，进而提升学习效率；

• Explain(解释)：能详细解释给定代码的作用，对于新手可通过这样的方式，更加深入地理解代码的功能和逻辑，从而更好地掌握编程技能，最终也还是能够提升理解与学习效率；
• Doc(生成文档)：给特定代码加上详细且清晰的代码注释，以便提高代码的可读性和可维护性，这有助于帮助开发者迅速理解代码意图；
• Test(单测)：为特定代码生成单测，以提升代码稳定性；事实上，许多程序员擅长编写业务代码但并不擅长为这些代码编写对应的单元测试代码，因为这需要对代码的功能、逻辑、边界情况等有深入的理解，并运用合适的测试框架和工具来实现，而 豆包MarsCode 非常擅长分析并生成模块对应的测试代码，这能够非常有效地提升开发效率；
• Fix(修复): 能够分析并修复特定代码中潜在的问题，包括稳定性、性能、安全性等，相当于一个 7 * 24 的私人代码教练，能帮你写出更好更容易维护的代码。

2）行内交互

其次，右侧代码编辑框中也会出现如图所示的交互按钮，可用于对特定代码片段做解释、生成文档、生成单测等动作：

在这里，豆包MarsCode 会动态分析代码结构，为每一个函数、Class 等添加交互按钮，开发者可在此处围绕函数、Class 直接与 LLM 交互，相对更方便一些。

3）打开自动补全功能

此外，豆包MarsCode 还支持代码补全功能，不过默认关闭，推荐用户主动调整配置，开启该功能。

1. 点击配置按钮：

2. 开启 Code Completion Pro 配置

行内补全能力非常强大，它能够持续分析你的编码动作，在适当时机、位置提供代码补全提示，遇到合适的代码只需点击 Tab 按钮即可采纳，推荐大家打开。

小结

豆包MarsCode所提供的编程辅助 能力可有效提升整体开发效率，包括：

1. 自动生成代码：豆包MarsCode 可以根据自然语言描述生成代码片段或整个函数。这种自动化可以减少重复性工作，让开发者专注于更高层次的设计和问题解决；
2. 智能代码补全：豆包MarsCode 可以提供上下文感知的代码补全，不仅限于单个单词或符号，还可以补全整个代码块。这种智能补全可以减少开发者输入的字符数，提高编码速度(参考《ML-Enhanced Code Completion Improves Developer Productivity》)；
3. 错误检测：豆包MarsCode 可以实时检测代码中的潜在错误，并提供修复建议。这种功能可以帮助开发者在编写代码时就发现并修复错误，减少调试时间；
4. 文档生成：豆包MarsCode 可以根据代码生成详细的文档，包括 API 文档、使用示例和参数描述。这可以帮助团队成员更快地理解和使用代码库，提升项目的可维护性；
5. 代码重构：豆包MarsCode 可以根据代码的上下文和结构，提供代码重构的建议，帮助开发者优化代码，提高代码的可读性和可维护性；类似的，豆包豆包MarsCode 还适用于性能分析与优化、安全问题检测等场景；
6. 学习和培训：豆包MarsCode 可以根据开发者的需求，提供相关的学习资源和培训材料，帮助开发者快速掌握新技术和新工具。

使用 Web IDE

接下来，我们扩展了解一下 Web IDE 插件。

Step1：启动项目

除了 IDE 插件外，为方便学习试用，豆包MarsCode 还提供了 Web IDE 形态形态的产品入口，无需任何配置，进入 Dashboard(https://www.marscode.cn/dashboard) 页面即可一键开启试用。

不过，Web IDE 目前还不支持导入本地项目，首次进入需要创建新项目或导入 git 项目，出于教学目的，此处推荐创建一个 HTML/CSS/JS 模板项目：

Step2：界面布局

进入 Web IDE 后，整体功能布局与 VS Code 非常接近：

• 左上角菜单，其中的 M 字形 logo 与 VS Code 的各菜单项相对应，您可以在此处进行一系列的操作和设置。比如，您能够通过点击相关菜单项来打开或关闭特定的功能模块，调整软件的界面布局，访问插件管理页面以安装或卸载所需的插件，还能对代码编辑的一些基本参数进行个性化的配置。

• 左侧文件目录视图，以清晰直观的方式展示该项目下所有文件与目录的详细内容。通过层次化的结构呈现，用户可以轻松地浏览和定位所需的文件或目录。每个文件和目录都有对应的图标和名称，一目了然。并且，用户可以通过点击目录展开或收缩其下的子目录和文件，方便进行查看和操作。

• 中间区域为编码区域，可在此编辑代码文件等

• 下边是 terminal 交互面板，用户可在此执行各类命令行命令，例如启动调试项目等

右边菜单栏比较重要，各项非常重要的交互入口，自上而下分别是：

• AI Assistant 是主要交互入口，在这里可以问各种问题，整体交互上与 VS Code 相似，也包含 generate、test 等能力

• 搜索、分支管理跟平常 VS Code 差不多，这里不着重介绍；
• Webview 是个亮点，豆包MarsCode 本质上是 cloud ide，因此terminal 中启动的各类应用都不在本地执行，而是挂靠在 cloud 环境中，因此无法使用 http://localhost`:xxx` 方式访问，需要 豆包MarsCode 做一层代理过去，在后续章节中我们会展开讨论；

• 扩展：在此可搜索到许多可在 豆包MarsCode 上使用的插件，整体功能理论上与 VS Code 兼容，所以可以复用各类 VS Code 插件；

不过，注意 Web IDE 有相对宽松的容量限制(https://docs.marscode.cn/docs/limitations)，对进出流量、CPU 等都有要求，使用时需要注意不可超出限制量。

与 VS Code 插件的差异

Web IDE 整体功能与 VS Code 插件趋近，同样提供了与 AI 对话的对话面板，同样支持生成代码、解释代码等能力，此处不再赘述。

与 VS Code 比较大的差异在于，在 Web IDE 中使用 ctrl + i 快捷键可打开行内交互面板：

我们可在此，就特定文件的内容与 LLM 做交互。其次，Web IDE 不需要设置认可本地环境，不需要提前安装其他软件，只需要有适当的浏览器即可开始使用 豆包MarsCode，非常适合入门试用。

实例：实现并发控制函数

实例演示，手把手使用豆包MarsCode 实现“并发控制函数”。

熟悉基本操作方法后，接下来我们演示如何借助 豆包MarsCode 实现一个简单功能：并发控制函数。在业务编码场景中，我们常常需要限制同一时间某类任务的并发执行数量，以免触发诸如 QPS 限制或占用过多 CPU、内存等计算资源，导致系统奔溃。

在过去，实现这类函数并不是一件容易的事情，需要对语言、并发机制等有一个比较深入的理解，即使是专业开发者也需要花费一些时间。但借助 豆包MarsCode，只要一句自然语言即可生成相关核心代码：

class PQueue {
  private readonly concurrency: number;
  private readonly queue: (() => Promise<any>)[];
  private running: number;

  constructor(concurrency: number) {
    this.concurrency = concurrency;
    this.queue = [];
    this.running = 0;
  }

  public add(task: () => Promise<any>): Promise<any> {
    return new Promise((resolve, reject) => {
      this.queue.push(() => task().then(resolve).catch(reject));
      this.schedule();
    });
  }

  private schedule(): void {
    if (this.running < this.concurrency && this.queue.length > 0) {
      this.running++;
      const task = this.queue.shift()!;
      task().then(() => {
        this.running--;
        this.schedule();
      }).catch(() => {
        this.running--;
        this.schedule();
      });
    }
  }
}

const pLimit = (concurrency: number) => {
  const queue = new PQueue(concurrency);
  return (task: () => Promise<any>) => queue.add(task);
};

并且，更强大的点在于我们可以使用 豆包豆包MarsCode 在此基础上不断迭代优化，例如，我们可以要求 豆包MarsCode 补充代码注释，帮助开发者理解代码意图：

也可以要求 豆包MarsCode 将代码中所有 any 类型替换为 unknown；或者从 class 风格切换为 FP 风格；又或者分析代码中可能存在的性能问题，给出修复意见等等。

甚至，可以用于生成单测代码：

1. 圈选需要生成单测的代码，点击 Unit Test 按钮：

2. 等待右侧对话框完成代码生成：

3) 点击保存按钮，将单测代码保存到文件：

上述编码过程几乎都由 豆包MarsCode 完成，某种程度上开发者从编码角色转换为“编导”角色，主要职责从编写具体代码切换为指导、验收 LLM 的生成结果，甚至极端情况下，只需掌握若干语言最基础的调试、启动规则，就可以完成复杂应用开发，无论是编码新手还是专业开发者，都能从中获得效率提升。