初識豆包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 為例，它可以：

更強的上下文索引、理解能力， 能夠更好地理解程式碼的上下文和開發者的意圖，從而提供更加準確和相關的建議。這種能力不僅限於簡單的程式碼補全，還包括對程式碼結構、變數命名、函式呼叫等方面的深度理解。
更契合開發過程行為的各類 LLM 互動， 這些互動不僅僅是簡單的對話或程式碼補全，而是深度嵌入到開發者的工作流程中。例如，豆包MarsCode 可以根據使用者當前編碼動作推斷下一步可能的動作，直接給出下一步程式碼建議，使用者只需點選 Tab 按鈕即可採用；
專門為編寫程式碼而訓練和微調的定製化模型， 配合豆包MarsCode 內建的各類行之有效的 prompt，幫助開發者更高效地完成任務。對於使用者而言，這些複雜的模型和 prompt 是透明的，他們只需專注於編寫程式碼，豆包MarsCode 會自動提供最合適的建議和補全；
具備更強大的錯誤檢測和修復能力， 豆包MarsCode 可以實時分析程式碼，檢測出潛在的錯誤和漏洞，並提供相應的修復建議。這不僅能幫助開發者更快地發現問題，還能提高程式碼的質量和穩定性。

某種程度上，以 ChatGPT 為代表的大模型能力，開啟了一個新的內容生產時代，而豆包MarsCode 等基於 LLM 的輔助程式設計工具，則極大降低大模型的使用與軟體開發部署門檻，能夠極大提升軟體工程效率。

我認為，這對每一位正在或將來有意願從事程式開發工作的人都是大有益處的。

對新手而言：可以藉助豆包MarsCode 提供的這些能力快速上手熟悉語言與框架，不必花費過多學習時間就能進入開發狀態並完成任務，可以無痛上手開發個人部落格、小遊戲<em>、瀏覽器外掛甚至學習 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 外掛：

如果你未安裝 VS Code，則需要提前下載安裝，下載地址：https://code.visualstudio.com/Download；

安裝 Visual Studio Code 後，點選左側導航欄上擴充套件按鈕，開啟擴充套件視窗。

在搜尋框搜尋“豆包”或者“MarsCode”關鍵詞，找到豆包豆包MarsCode 後單擊「install」，完成安裝。

安裝完成後，點選左側豆包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 還支援程式碼補全功能，不過預設關閉，推薦使用者主動調整配置，開啟該功能。

點選配置按鈕：

開啟 Code Completion Pro 配置

行內補全能力非常強大，它能夠持續分析你的編碼動作，在適當時機、位置提供程式碼補全提示，遇到合適的程式碼只需點選 Tab 按鈕即可採納，推薦大家開啟。

小結

豆包MarsCode所提供的程式設計輔助 能力可有效提升整體開發效率，包括：

自動生成程式碼：豆包MarsCode 可以根據自然語言描述生成程式碼片段或整個函式。這種自動化可以減少重複性工作，讓開發者專注於更高層次的設計和問題解決；
智慧程式碼補全：豆包MarsCode 可以提供上下文感知的程式碼補全，不僅限於單個單詞或符號，還可以補全整個程式碼塊。這種智慧補全可以減少開發者輸入的字元數，提高編碼速度(參考《ML-Enhanced Code Completion Improves Developer Productivity》)；
錯誤檢測：豆包MarsCode 可以實時檢測程式碼中的潛在錯誤，並提供修復建議。這種功能可以幫助開發者在編寫程式碼時就發現並修復錯誤，減少除錯時間；
文件生成：豆包MarsCode 可以根據程式碼生成詳細的文件，包括 API 文件、使用示例和引數描述。這可以幫助團隊成員更快地理解和使用程式碼庫，提升專案的可維護性；
程式碼重構：豆包MarsCode 可以根據程式碼的上下文和結構，提供程式碼重構的建議，幫助開發者最佳化程式碼，提高程式碼的可讀性和可維護性；類似的，豆包豆包MarsCode 還適用於效能分析與最佳化、安全問題檢測等場景；
學習和培訓：豆包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 風格；又或者分析程式碼中可能存在的效能問題，給出修復意見等等。

甚至，可以用於生成單測程式碼：

圈選需要生成單測的程式碼，點選 Unit Test 按鈕：

等待右側對話方塊完成程式碼生成：

3) 點選儲存按鈕，將單測程式碼儲存到檔案：

上述編碼過程幾乎都由豆包MarsCode 完成，某種程度上開發者從編碼角色轉換為“編導”角色，主要職責從編寫具體程式碼切換為指導、驗收 LLM 的生成結果，甚至極端情況下，只需掌握若干語言最基礎的除錯、啟動規則，就可以完成複雜應用開發，無論是編碼新手還是專業開發者，都能從中獲得效率提升。