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

在 AI 技术快速迭代的今天，保持持续学习的能力比掌握任何特定的技术都更重要。理解底层原理可以帮助你在遇到新技术时更快地上手，可以在不同的技术方案之间做出更明智的选择。建议开发者建立自己的技术框架，而不是追逐每一个新的工具和框架。实践是最好的学习方式，在真实项目中应用新学到的技术，遇到问题并解决，这种经历比任何教程都更有价值。定期整理和复盘也是很好的习惯。将学到的知识归档整理，形成自己的知识库。当需要用到某个技术时，可以直接从自己的知识库中找到相关的参考，而不是从零开始搜索。