Monaco Editor是微软开发的浏览器端代码编辑器，基于VS Code核心，支持语法高亮、智能补全、错误检查、代码折叠和主题切换。通过npm安装并结合Webpack或Vite集成到Web应用，可构建在线IDE或配置工具。需注意其体积较大，建议异步加载以优化性能。初始化时需创建容器并调用monaco.editor.create()，配置语言、主题和自动布局。支持JavaScript/TypeScript语法校验，可设置诊断选项和全局变量声明。可通过typescriptDefaults.setCompilerOptions配置TS编译参数。支持注册自定义语言（如DSL），使用Monarch定义词法，配置括号匹配与自动闭合，并实现代码补全提示。可自定义主题，继承内置主题并修改颜色规则，适用于品牌化需求。整体功能强大，适合扩展为完整在线开发环境。
Monaco Editor 是由微软开发的一款功能强大的浏览器端代码编辑器，作为 Visual Studio Code 的核心编辑器组件，它支持语法高亮、智能补全、错误检查、代码折叠、主题切换等高级功能。将 Monaco 集成到 Web 应用中，可以快速构建在线 IDE、配置编辑界面或调试工具。
集成 Monaco Editor 到项目
要在项目中使用 Monaco，推荐通过 npm 安装并配合模块打包工具（如 Webpack、Vite）使用。
注意：Monaco 体积较大，建议按需加载或异步引入以优化性能。安装依赖：
npm install monaco-editor
在 HTML 中准备一个容器：
立即学习“Java免费学习笔记（深入）”；
<div id="container" style="width: 100%; height: 500px;"></div>
初始化编辑器：
import * as monaco from 'monaco-editor';
<p>const container = document.getElementById('container');
const editor = monaco.editor.create(container, {
value: 'function hello() {\n\tconsole.log("Hello Monaco!");\n}',
language: 'javascript',
theme: 'vs-dark',
automaticLayout: true // 自动处理尺寸变化
});
automaticLayout 启用后，编辑器会监听容器尺寸变化并重绘布局，适合响应式页面。
配置语言与语法校验
Monaco 支持多种语言模式，可通过 language 选项指定。对于 JavaScript，还可启用 ESLint 式的诊断功能。
设置 JavaScript 特定选项：
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
noSemanticValidation: false,
noSyntaxValidation: false,
diagnosticCodesToIgnore: [80001] // 忽略某些警告
});
<p>// 可设置额外的全局变量，避免 "is not defined" 错误
monaco.languages.typescript.javascriptDefaults.addExtraLib(
'declare const myGlobalVar: string;',
'filename://global.d.ts'
);
若项目使用 TypeScript，可进一步配置编译选项：
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
target: monaco.languages.typescript.ScriptTarget.Latest,
allowNonTopLevelImports: true
});
扩展功能：自定义语言与提示
Monaco 允许注册自定义语言，适用于 DSL 或内部脚本语言。
注册简单语言示例：
monaco.languages.register({ id: 'my-lang' });
<p>monaco.languages.setMonarchTokensProvider('my-lang', {
tokenizer: {
root: [
[/\b(if|else|while)\b/, 'keyword'],
[/\d+/, 'number'],
[/"([^"]*)"/, 'string']
]
}
});</p><p>// 设置语言配置
monaco.languages.setLanguageConfiguration('my-lang', {
brackets: [['(', ')'], ['{', '}']],
autoClosingPairs: [
{ open: '(', close: ')' },
{ open: '"', close: '"' }
]
});
添加自定义提示（代码补全）：
monaco.languages.registerCompletionItemProvider('my-lang', {
provideCompletionItems: () => {
return {
suggestions: [
{
label: 'myFunction',
kind: monaco.languages.CompletionItemKind.Function,
insertText: 'myFunction()',
detail: '自定义函数'
}
]
};
}
});
主题与样式定制
除了内置的 vs、vs-dark、hc-black 主题，还可以定义自己的主题。
创建深色变体主题：
monaco.editor.defineTheme('my-dark-theme', {
base: 'vs-dark',
inherit: true,
rules: [
{ token: 'comment', foreground: '608B4E' },
{ token: 'string', foreground: 'CE9178' }
],
colors: {
'editor.background': '#1E1E1E',
'editor.foreground': '#D4D4D4',
'editor.lineHighlightBorder': '#2A2A2A'
}
});
<p>// 应用主题
monaco.editor.setTheme('my-dark-theme');
主题可精细控制语法标记颜色和 UI 元素背景，适合品牌化集成。
基本上就这些。Monaco 功能丰富，掌握基础集成与常见扩展方式后，可根据业务需求添加代码格式化、键盘绑定、装饰器标注等功能。集成时注意资源加载策略和性能影响，合理使用 Worker 提升解析效率。
