Monaco Editor

Monaco Editor 简介

Monaco Editor 是微软从 VS Code 源码中抽取并适配到浏览器环境的代码编辑器组件。它把 VS Code 的编辑体验带到了 Web 端：语法高亮、智能补全、悬浮提示、多光标、查找替换、代码折叠、括号匹配等能力开箱即用。

核心概念

使用 Monaco 前，理解以下几个概念会事半功倍：

• Model（模型）：代表一个被打开的文件，保存文本内容、语言类型与编辑历史。
• URI：每个模型由 URI 唯一标识，建议按虚拟文件系统的方式设计，例如 file:///src/index.ts。
• Editor（编辑器）：面向用户的视图，挂载到 DOM 上，负责展示模型与执行命令。
• Provider（提供者）：补全、悬浮、诊断等智能功能的来源，常与 LSP 能力对应。
• Disposable：多数对象提供 .dispose()，用于释放资源与监听器。

安装与集成

通过 npm 安装：

npm install monaco-editor

包内主要包含：

• esm/：ESM 版本，适配 webpack、Vite 等现代打包工具
• monaco.d.ts：编辑器对外 API 的类型声明

注意：AMD 构建仅为兼容保留，已标记废弃，新项目应直接使用 ESM 版本。

本地化

Monaco 支持多语言界面。以德语为例，在加载主脚本前引入对应的 nls 文件即可：

<script src="path/to/monaco-editor/esm/nls.messages.de.js"></script>

使用建议

• 语言服务通过 Web Worker 在后台线程计算，需正确配置 worker 路径，否则会出现 “Could not create web worker” 警告。
• 页面需通过 http:// 或 https:// 加载，file:// 协议下无法创建 Worker。
• 移动端浏览器支持有限，面向移动端的场景需谨慎评估。
• 若需要 TextMate 语法支持，可参考社区方案组合 vscode-oniguruma 与 vscode-textmate。

学习资源

官方提供交互式 Playground、完整集成示例与 API 文档，是上手和排查问题的最佳入口；遇到疑问也可在 StackOverflow 的 monaco-editor 标签下检索。