自定义Monaco编辑器，打造强大在线代码工具

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《用Monaco Editor打造强大在线代码编辑器》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

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

在页面中创建一个容器用于挂载编辑器：

初始化编辑器实例：

import * as monaco from 'monaco-editor';
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' });
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 体验的在线编辑器。关键是按需加载、避免性能浪费，尤其在低配设备上注意控制语言服务的范围。不复杂但容易忽略的是自动布局和错误提示的默认关闭状态，上线前记得显式配置。

今天关于《自定义Monaco编辑器，打造强大在线代码工具》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于语法高亮,在线代码编辑器,MonacoEditor,智能补全,自定义语言的内容请关注golang学习网公众号！