Monaco Editor是微软开发的浏览器端代码编辑器，源自VS Code核心，支持语法高亮、智能补全、错误检查、代码折叠和主题切换等功能。通过npm安装monaco-editor包并结合Webpack或Vite等构建工具可快速集成。创建容器元素后，使用monaco.editor.create()初始化实例，推荐设置automaticLayout: true以支持响应式布局。可通过monaco.languages.typescript.javascriptDefaults配置JS/TS的语法校验和编译选项，如目标ES版本。支持注册自定义语言（如mylang）并使用Monarch定义语法高亮规则。通过registerCompletionItemProvider实现代码补全提示，可扩展函数、关键词等建议项。内置vs、vs-dark、hc-black主题，也可调用defineTheme定义自定义主题并通过updateOptions动态切换。实际应用中需注意按需加载以优化性能，显式开启诊断功能与自动布局，避免默认关闭导致的功能缺失。合理配置下可构建接近VS Code体验的在线编辑器。
Monaco Editor 是由微软开发的浏览器端代码编辑器，也是 Visual Studio Code 的核心组件。它支持语法高亮、智能补全、错误检查、代码折叠、主题切换等强大功能，非常适合用来构建功能丰富的在线代码编辑器。
引入 Monaco Editor
使用 Monaco Editor 最简单的方式是通过 monaco-editor npm 包结合 Webpack 或 Vite 等现代前端构建工具。
安装方式：npm install monaco-editor
在页面中创建一个容器用于挂载编辑器：
<div id="container" style="width:100%; height:600px; border:1px solid #ccc;"></div>
初始化编辑器实例：
import * as monaco from 'monaco-editor';
<p>const editor = monaco.editor.create(document.getElementById('container'), {
value: 'function hello() {\n\tconsole.log("Hello, world!");\n}',
language: 'javascript',
theme: 'vs-dark',
automaticLayout: true
});
automaticLayout: true 能让编辑器自动适应容器尺寸变化，适合响应式布局。
启用语法检查与提示
Monaco 支持 TypeScript 和 JavaScript 的语言服务，可开启错误提示和智能感知。
配置 JavaScript/TypeScript 的诊断选项：
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
noSemanticValidation: false,
noSyntaxValidation: false
});
也可以设置编译选项，例如指定 ECMAScript 版本：
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
target: monaco.languages.typescript.ScriptTarget.ES2020,
allowNonTopLevelImports: true
});
自定义语言与语法高亮
除了内置语言，你还可以注册自定义语言实现特定语法高亮。
例如，注册一个简单的“mylang”语言：
monaco.languages.register({ id: 'mylang' });
<p>monaco.languages.setMonarchTokensProvider('mylang', {
tokenizer: {
root: [
[/\b(if|else|while)\b/, 'keyword'],
[/\d+/, 'number'],
[/"([^"]*)"/, 'string']
]
}
});
然后在创建编辑器时指定 language: 'mylang' 即可生效。
集成代码补全与提示
可以通过注册语言补全提供者（CompletionItemProvider）来增强智能提示能力。
monaco.languages.registerCompletionItemProvider('javascript', {
provideCompletionItems: () => {
const suggestions = [
{
label: 'myFunction',
kind: monaco.languages.CompletionItemKind.Function,
insertText: 'myFunction()',
detail: 'A custom function'
}
];
return { suggestions };
}
});
这个机制可用于集成 API 文档、框架关键词或用户自定义函数库。
主题与外观定制
Monaco 内置了 vs、vs-dark、hc-black 三种主题，也支持自定义主题。
定义深色变体主题：
monaco.editor.defineTheme('my-dark-theme', {
base: 'vs-dark',
inherit: true,
rules: [
{ token: 'comment', foreground: '608B4E' }
],
colors: {
'editor.background': '#1E1E1E',
'editor.lineHighlightBorder': '#333'
}
});
之后通过 editor.updateOptions({ theme: 'my-dark-theme' }) 切换主题。
基本上就这些。合理配置语言、提示、主题和布局，Monaco Editor 能快速构建出接近 VS Code 体验的在线编辑器。关键是按需加载、避免性能浪费，尤其在低配设备上注意控制语言服务的范围。不复杂但容易忽略的是自动布局和错误提示的默认关闭状态，上线前记得显式配置。
