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() {ntconsole.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 体验的在线编辑器。关键是按需加载、避免性能浪费，尤其在低配设备上注意控制语言服务的范围。不复杂但容易忽略的是自动布局和错误提示的默认关闭状态，上线前记得显式配置。
javascript word java js 前端 vite typescript 浏览器 工具 ai JavaScript typescript ecmascript npm webpack JS visual studio visual studio code