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 的交互式演示