Monaco 编辑器

Monaco 编辑器是来自 VS Code 的功能齐全的代码编辑器。查看 VS Code 文档了解一些支持的功能。

试用

在我们的交互式演示场中试用编辑器并查看各种示例。

演示场是学习如何使用编辑器、了解它支持哪些功能、尝试不同版本以及为 bug 报告创建最小可重现示例的最佳方式。

安装

> npm install monaco-editor

你将获得：

• /esm 目录下：编辑器的 ESM 版本（兼容如 webpack 等）
• /dev 目录下：AMD 打包的非压缩版本
• /min 目录下：AMD 打包的压缩版本
• /min-maps 目录下：min 的源映射
• monaco.d.ts：指定编辑器的 API（这是实际版本化的内容，其他所有内容都被视为私有的，可能会在任何版本中发生变化）。

建议在开发时使用 dev 版本，在生产环境中使用 min 版本。

概念

Monaco 编辑器最为人所知的是作为 VS Code 的文本编辑器。然而，实际情况稍微有些复杂。要有效地使用 Monaco 编辑器，需要对其底层概念有一些基本了解。

模型

模型是 Monaco 编辑器的核心。当管理内容时，你就是在与模型交互。模型代表一个已打开的文件。这可以代表文件系统中存在的文件，但不一定如此。例如，模型保存文本内容，确定内容的语言，并跟踪内容的编辑历史。

URI

每个模型都由一个 URI 标识。这就是为什么两个模型不可能有相同的 URI。理想情况下，当你在 Monaco 编辑器中表示内容时，你应该考虑一个与用户正在编辑的文件相匹配的虚拟文件系统。例如，你可以使用 file:/// 作为基本路径。如果创建模型时没有指定 URI，其 URI 将为 inmemory://model/1。随着创建更多模型，这个数字会增加。

编辑器

编辑器是模型的用户界面视图。这是附加到 DOM 上的内容，也是用户在视觉上看到的内容。典型的编辑器操作包括显示模型、管理视图状态或执行操作或命令。

提供者

提供者提供智能编辑器功能。例如，这包括代码补全和悬停信息。它与语言服务器协议功能不完全相同，但通常会映射到这些功能。

提供者作用于模型。一些智能功能依赖于文件 URI。例如，TypeScript 需要解析导入，或者 JSON 智能感知需要确定将哪个 JSON 模式应用于哪个模型。因此，选择适当的模型 URI 很重要。

可处置对象

许多与 Monaco 相关的对象通常实现 .dispose() 方法。这个方法旨在在不再需要资源时执行清理。例如，调用 model.dispose() 将注销该模型，释放 URI 以供新模型使用。编辑器应该被处置以释放资源并移除其模型监听器。

文档

• 通过这些完整示例学习如何集成编辑器。
  • 集成 AMD 版本。
  • 集成 ESM 版本
• 在演示场中学习如何使用编辑器 API 并尝试你自己的定制。
• 探索 API 文档或直接阅读 monaco.d.ts。
• 阅读本指南以确保编辑器对所有用户都是可访问的！
• 在 Monarch 演示场中为新的编程语言创建 Monarch 分词器。
• 在 StackOverflow 上提问！搜索已开启和已关闭的问题，里面有很多技巧！

问题

在此仓库中为与 Monaco 编辑器相关的任何内容创建问题。请搜索现有问题以避免重复。

常见问题

❓ VS Code 和 Monaco 编辑器之间是什么关系？

Monaco 编辑器直接从 VS Code 的源代码生成，并在其周围添加了一些 shim 服务，使其能够在 Web 浏览器中运行。

❓ VS Code 的版本和 Monaco 编辑器的版本之间有什么关系？

没有关系。Monaco 编辑器是一个库，它直接反映源代码。

❓ 我为 VS Code 编写了一个扩展，它能在浏览器中的 Monaco 编辑器上工作吗？

不能。

注意：如果扩展完全基于 LSP，并且语言服务器是用 JavaScript 编写的，那么就有可能实现。

❓ 为什么有这么多 Web Worker，我应该关心它们吗？

语言服务创建 Web Worker 是为了在 UI 线程之外计算繁重的任务。就资源开销而言，它们几乎不消耗任何东西，你不应该太担心它们，只要你能让它们正常工作（见上面跨域的情况）。

❓ 这个 loader.js 是什么？我可以使用 require.js 吗？

它是我们在 VS Code 中使用的 AMD 加载器。可以使用。

❓ 我看到警告"无法创建 Web Worker"。我该怎么办？

HTML5 不允许通过 file:// 加载的页面创建 Web Worker。请使用 http:// 或 https:// 方案的 Web 服务器加载编辑器。

❓ 编辑器是否支持移动浏览器或移动 Web 应用框架？

不支持。

❓ 为什么编辑器不支持 TextMate 语法？

• 请参阅 https://github.com/bolinfest/monaco-tm，它将 monaco-editor、vscode-oniguruma 和 vscode-textmate 组合在一起，以在编辑器中获得 TM 语法支持。

贡献 / 本地开发

我们欢迎社区的贡献！ 请查看 CONTRIBUTING 了解如何有效地贡献、如何从源代码运行编辑器以及如何调试和修复问题。

行为准则

本项目采用了 Microsoft 开源行为准则。有关更多信息，请参阅行为准则常见问题或联系 opencode@microsoft.com 咨询任何其他问题或意见。

许可证

根据 MIT 许可证授权。