首先通过npm或CDN引入Monaco Editor，然后创建容器并调用monaco.editor.create()初始化实例，配置language和theme设置语言与主题，最后通过registerCompletionItemProvider和setModelMarkers实现自动补全与错误提示，完成在线代码编辑器搭建。
Monaco Editor 是由微软开发的浏览器端代码编辑器，也就是 Visual Studio Code 的核心编辑器组件。它功能强大，支持语法高亮、智能提示、错误检查、代码折叠、自动补全等特性，非常适合用来构建在线代码编辑器。以下是快速搭建一个基础在线代码编辑的基本步骤。
引入 Monaco Editor
使用 Monaco Editor 最简单的方式是通过 monaco-editor npm 包结合 Webpack 或 Vite 等打包工具。也可以通过 CDN 快速引入进行测试。
方法一：使用 npm 安装（推荐）npm install monaco-editor
然后在项目中导入：
import * as monaco from 'monaco-editor';
方法二：CDN 引入（适合原型或演示）
在 HTML 文件中加入：
初始化编辑器实例
创建一个容器元素用于承载编辑器，并调用 monaco.editor.create() 初始化。
HTML 结构：
JavaScript 初始化：
require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@latest/min/vs' } });
require(['vs/editor/editor.main'], function() {
monaco.editor.create(document.getElementById('container'), {
value: 'function hello() {\n\tconsole.log("Hello, Monaco!");\n}',
language: 'javascript',
theme: 'vs-dark',
automaticLayout: true
});
});automaticLayout: true 非常重要，它让编辑器自动适应容器尺寸变化。
配置语言与主题
Monaco 支持多种编程语言，设置 language 参数即可切换语法高亮和提示行为。
例如：
language: 'html'language: 'css'language: 'typescript'language: 'json'
内置主题包括：
-
vs- 浅色主题 -
vs-dark- 深色主题 -
hc-black- 高对比度黑色
也可自定义主题，通过 monaco.editor.defineTheme 实现。
增强功能：自动补全与错误提示
Monaco 允许你扩展语言功能，比如添加自定义补全项或模拟诊断信息（如语法错误）。
示例：为 JavaScript 添加简单的补全提示：
monaco.languages.registerCompletionItemProvider('javascript', {
provideCompletionItems: () => {
return {
suggestions: [
{
label: 'myFunction',
kind: monaco.languages.CompletionItemKind.Function,
insertText: 'function myFunction() {}',
documentation: 'Insert a custom function'
}
]
};
}
});添加错误提示（模拟）：
monaco.editor.setModelMarkers(editor.getModel(), 'owner', [{
severity: monaco.MarkerSeverity.Error,
message: 'Missing semicolon',
startLineNumber: 2,
startColumn: 24,
endLineNumber: 2,
endColumn: 25
}]);基本上就这些。通过以上步骤，你可以快速集成 Monaco Editor 到网页中，打造一个具备专业 IDE 特性的在线代码编辑器。关键是正确加载资源、初始化编辑器，并根据需要扩展语言功能。虽然配置稍复杂，但灵活性极高，适合做在线 IDE、低代码平台或技术博客的交互式代码块。
