vue + vite 项目配置 monaco-editor

简介

Monaco Editor 是 VS Code 的核心代码编辑器，功能强大且高度可定制。但是官方文档真的写的稀碎，很难找到有用信息。

本文根据自身实践（来回采坑），总结一下 vue + vite 项目下，如何裴配置 monaco-editor

配置

安装依赖

# monaco-editor 和 vite 插件
npm i monaco-editor@0.33.0 vite-plugin-monaco-editor

vite-plugin-monaco-editor 最新的版本是 22 年 7 月发布，依赖 monaco-editor 的版本是 0.33.0。用这两个版本肯定万无一失。

vite config 配置

vite config 增加如下配置

import monacoEditorPlugin from 'vite-plugin-monaco-editor';

// config
{
   plugins: [
    monacoEditorPlugin({})
  ],
  optimizeDeps: {
    include: [
      `monaco-editor/esm/vs/language/json/json.worker`,
      `monaco-editor/esm/vs/language/css/css.worker`,
      `monaco-editor/esm/vs/language/html/html.worker`,
      `monaco-editor/esm/vs/language/typescript/ts.worker`,
      `monaco-editor/esm/vs/editor/editor.worker`
    ],
  },
}

这里一定要 增加 optimizeDeps 配置，不然会报错

使用

<template>
  <div ref="editorContainer" class="monaco-editor-container"></div>
</template>

<script setup lang="ts">
  import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
  // 引入 monaco-editor
  import * as monaco from 'monaco-editor';

  const editorContainer = ref(null);
  let editor: any = null;

  initEditor() {
        // 初始化编辑器
    this.editor = monaco.editor.create(editorContainer.value!, {
      value: 'hello world', // 初始代码
      language: 'javascript', // 语言
    });
  }

  // 生命周期钩子
  onMounted(() => {
    initDiffEditor();
  });

  onBeforeUnmount(() => {
    editor?.dispose(); // 销毁编辑器实例
  });
</script>

代码变更

代码修改直接使用setValue方法

editor.setValue(newCode);

问题记录

1. Cannot read properties of undefined (reading 'languageWorkers')

failed to load config from /app/main/config/vite.config.dev.ts
error when starting dev server:
TypeError: Cannot read properties of undefined (reading 'languageWorkers')

这个是 vite-plugin-monaco-editor 插件 monacoEditorPlugin() 没有传配置，可以默认一个空对象

monacoEditorPlugin({})

2. Node is not a constructor

Uncaught TypeError: Node is not a constructor
at <static_initializer> (editor.worker.bundle.js:475:24)
at editor.worker.bundle.js:473:14
at editor.worker.bundle.js:12480:3

使用 vite-plugin-monaco-editor 还是会报这个错误，原因是没有将worker编译。这时需要设置 optimizeDeps

{
  optimizeDeps: {
    include: [
      `monaco-editor/esm/vs/language/json/json.worker`,
      `monaco-editor/esm/vs/language/css/css.worker`,
      `monaco-editor/esm/vs/language/html/html.worker`,
      `monaco-editor/esm/vs/language/typescript/ts.worker`,
      `monaco-editor/esm/vs/editor/editor.worker`
    ],
  },
}

3. SyntaxError: The requested module does not provide an export named 'default

SyntaxError: The requested module '/node_modules/.vite/deps/monaco-editor.js?v=75709a73' does not provide an export named 'default

引入 monaco 需要用 import * as monaco from 'monaco-editor';不要直接 import monaco from 'monaco-editor';

4. EditorSimpleWorker.loadForeignModule Error

++chunk-GTR2D34Z.js?v=ed0c2f3d:65++ Uncaught Error: Unexpected usage Error: Unexpected usage
>at EditorSimpleWorker.loadForeignModule (++chunk-GTR2D34Z.js?v=ed0c2f3d:10061:27++)

at ++chunk-FA7EBIDT.js?v=ed0c2f3d:26229:22++ at EditorSimpleWorker.loadForeignModule (++chunk-GTR2D34Z.js?v=ed0c2f3d:10061:27++)
at ++chunk-FA7EBIDT.js?v=ed0c2f3d:26229:22++ at ++chunk-GTR2D34Z.js?v=ed0c2f3d:65:21++

这个是没使用 vite-plugin-monaco-editor 引起的

总结

monaco-editor 配置文档渣渣，配置不容易，希望遇到这些方案对你有用

原文地址：https://webfem.com/post/monaco-editor，转载请注明出处