Monaco Editor Hello World - 快速入门指南

本文介绍 Monaco Editor 的基础用法，演示如何创建一个简单的代码编辑器实例。Monaco Editor 是 VS Code 的核心编辑器组件，支持语法高亮、智能提示、代码折叠等丰富功能。

什么是 Monaco Editor

Monaco Editor 是微软开源的基于 Web 的代码编辑器，它是 Visual Studio Code 的核心编辑器组件。该编辑器提供了丰富的功能，包括：

• 语法高亮支持多种编程语言
• 智能代码补全和提示
• 代码折叠和缩略图
• 查找和替换功能
• 多光标编辑
• 错误和警告标记

Hello World 示例

以下是一个最简单的 Monaco Editor 创建示例：

JavaScript 代码

const value = /* set from `myEditor.getModel()`: */ `function hello() {
	alert('Hello world!');
}`;

// Hover on each property to see its docs!
const myEditor = monaco.editor.create(document.getElementById("container"), {
	value,
	language: "javascript",
	automaticLayout: true,
});

HTML 代码

<div id="container" style="height: 100%"></div>

CSS 代码

本示例不需要额外的 CSS 代码。

代码解析

核心 API

monaco.editor.create() 是创建编辑器实例的主要方法，它接受两个参数：

1. container - 编辑器挂载的 DOM 元素
2. options - 编辑器配置选项

常用配置选项

在线体验

你可以访问 Monaco Editor Playground 在线编辑和测试代码。

项目链接

• GitHub 仓库：https://github.com/microsoft/monaco-editor
• 官方文档：https://microsoft.github.io/monaco-editor/docs.html
• Playground：https://microsoft.github.io/monaco-editor/playground.html