Monaco Editor：用於網頁的 VS Code 程式碼編輯器

Visual Studio Code（世界上最受歡迎的程式碼編輯器）的核心並未被鎖在桌面應用程式內部。Microsoft 已將 Monaco Editor（GitHub 上的 microsoft/monaco-editor）作為獨立的網頁元件提供，將 VS Code 編輯能力的全部功能帶入任何網頁瀏覽器。這使 Monaco Editor 成為無數線上開發環境、文件工具和與程式碼相關的網頁應用程式的骨幹。

由 Microsoft 開發和維護，Monaco Editor 是與驅動 VS Code 相同的程式碼編輯器，被提取並打包為 JavaScript 函式庫。它為超過 60 種程式語言提供語法高亮、全面的 IntelliSense（含自動完成和參數提示）、程式碼折疊、括號匹配、多游標編輯、支援正規表示式的搜尋和取代、用於並排比較的差異編輯，以及廣泛的擴展 API。

該編輯器使用 TypeScript 編寫，並專為瀏覽器中的效能而設計。它使用虛擬渲染來高效處理大型檔案，延遲載入語言服務以最小化初始載入時間，並支援用於背景處理的 Web Worker。儘管具有桌面級別的功能集，Monaco Editor 仍能在網頁瀏覽器環境的限制內載入和執行。

編輯器架構

Monaco Editor 的架構將核心編輯功能與語言服務和 UI 分離：

graph TD
    A[網頁應用程式\n主機頁面] --> B[Monaco Editor\n編輯器實例]
    B --> C[核心編輯器\n文字緩衝區 / 檢視 / 游標]
    B --> D[語言服務\nWorker 執行緒]
    B --> E[UI 元件\n小地圖 / 麵包屑 / 行號]
    D --> F[TypeScript 服務\n型別檢查 / IntelliSense]
    D --> G[語言 Workers\n自訂提供者]
    B --> H[模型系統\n文件管理]
    H --> I[多個編輯器\n共享模型]
    B --> J[貢獻系統\n主題 / 按鍵綁定 / 動作]

核心編輯和語言服務之間的分離使得 Monaco Editor 能夠在計算密集的語言操作期間保持響應式輸入，這些操作在獨立的 Web Worker 中執行。

功能比較

整合模式

Monaco Editor 在網路上以幾種不同的整合模式使用。最常見的是完整程式碼編輯器模式，其中 Monaco 在網頁應用程式中為原始碼提供完整的編輯體驗。GitHub Codespaces 和 StackBlitz 等線上 IDE 使用這種模式，由 Monaco 處理核心編輯，並由其他 UI 元件提供檔案管理、終端機和除錯功能。

嵌入式編輯器模式在更有限的上下文中使用 Monaco，例如在文件網站中編輯單個程式碼區塊，或在網頁應用程式中作為配置編輯器。在這種模式中，Monaco 會根據使用案例配置有限的功能。

差異編輯器模式利用 Monaco 內建的差異編輯器來顯示兩個程式碼版本之間的變更。這用於程式碼審查工具、版本控制網頁 UI 和比較介面，使用者需要了解檔案中發生了哪些變更。

無論採用哪種模式，Monaco 的 API 都提供對編輯器行為的精細控制。配置選項、自訂語言服務、主題定義和鍵盤快捷鍵都可以透過 JavaScript API 進行程式化設定。

推薦的外部資源

• Monaco Editor GitHub 儲存庫 – 原始碼、文件和發行版本
• Monaco Editor 遊樂場 – 互動式示範和 API 探索

FAQ

什麼是 Monaco Editor？ Monaco Editor 是驅動 Visual Studio Code 的開放原始碼程式碼編輯器元件，由 Microsoft 作為獨立的網頁元件提供。它透過 JavaScript API 在任何網頁瀏覽器中提供語法高亮、IntelliSense、多語言支援、程式碼折疊、差異編輯以及數百種其他編輯功能。

Monaco Editor 支援哪些程式語言？ Monaco Editor 內建支援超過 60 種程式語言，包括 JavaScript、TypeScript、Python、HTML、CSS、C++、C#、Java、Go、Rust、PHP、Ruby、SQL、JSON、YAML 和 Markdown。每種語言都有語法高亮、括號匹配、自動縮排和可配置的語言特定功能。

Monaco Editor 中的 IntelliSense 是什麼？ IntelliSense 是 Monaco Editor 的程式碼完成和輔助系統，在輸入時提供自動完成建議、參數提示、快速資訊工具提示和簽章說明。對於 TypeScript 和 JavaScript，IntelliSense 提供完整的語言服務支援，包括型別檢查、錯誤診斷和重構建議。

Monaco Editor 可以自訂嗎？ 是的，Monaco Editor 透過其全面的 API 具有高度可自訂性。開發人員可以自訂主題（顏色、字型、樣式）、按鍵綁定、語言定義、完成提供者、懸浮提供者、診斷標記、小地圖設定以及數百種其他配置選項。自訂主題可以定義為 JSON 並在應用程式之間共享。

Monaco Editor 與 CodeMirror 或 Ace 相比如何？ Monaco Editor 提供所有基於瀏覽器的程式碼編輯器中最豐富的功能集，緊密匹配 VS Code 的桌面體驗。它比 CodeMirror 或 Ace 消耗更多資源，但提供卓越的 IntelliSense、TypeScript 支援和整體編輯能力。選擇取決於應用程式是否需要 VS Code 級別的功能還是更輕量的編輯器。

延伸閱讀

• Monaco Editor 在 GitHub 上 – 包含文件和發行說明的儲存庫
• Monaco Editor 遊樂場 – 用於探索編輯器 API 的互動式示範