如何在Vue3 + Typescirpt项目中使用Monaco Editor

作者: Jim Wang 公众号: 巴博萨船长

摘要：如何在Vue3 + Typescirpt项目中使用Monaco Editor，项目使用vite。

Abstract: How to use Monaco Editor in Vue3 + Typescirpt project, project using vite packaging tool.

作者: Jim Wang 公众号: 巴博萨船长

方案：monaco-editor 使用vite-plugin-monaco-editor

安装依赖

monaco-editor：版本0.47.0
vite-plugin-monaco-editor；版本1.1.0

其中vite-plugin-monaco-editor 是为 Vite 专门设计的插件，它简化了在 Vite 项目中集成 Monaco Editor 的过程。以下是该插件的主要作用：

动态加载 Monaco Editor

与 monaco-editor-vite-plugin 类似，vite-plugin-monaco-editor 也可以帮助你动态地加载 Monaco Editor 的模块，从而减少打包体积和提高加载速度。

简化配置

该插件提供了一种更简单的方式来配置 Monaco Editor，包括但不限于指定默认语言、主题等。

自动资源管理

vite-plugin-monaco-editor 能够自动处理 Monaco Editor 的所有必要资源和依赖项，这包括 CSS 样式和语言定义，从而使引入和使用 Monaco Editor 变得非常方便。

热更新支持

该插件与 Vite 的热更新功能完美集成，这意味着在开发过程中对 Monaco Editor 进行的更改可以立即在浏览器中看到，极大地提高了开发效率。

TypeScript 支持

由于 Vite 本身就对 TypeScript 有着很好的支持，因此使用 vite-plugin-monaco-editor 在 TypeScript 项目中使用 Monaco Editor 会变得非常简单和流畅。

更清晰的依赖管理

该插件能够帮助你管理 Monaco Editor 的版本和依赖关系，确保所有的模块和资源都被正确地加载和引入。

总体而言，vite-plugin-monaco-editor 提供了一种更加优雅和高效的方式来在 Vite 项目中集成和使用 Monaco Editor，减少了配置的复杂性，同时还提供了更好的性能和开发体验。

完成配置

配置文件vite-config.ts，文件配置内容仅供参考，

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import monacoEditorPlugin from 'vite-plugin-monaco-editor'
import * as path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    (monacoEditorPlugin as any).default({})
  ],
  base: './',
  resolve: {
    alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
  },
  server: {
    hmr: {
      overlay: false
    }
  }
})

直接使用monacoEditorPlugin()会提示编译错误，monacoEditorPlugin并不是函数。截至2024-04-16，项目monacoEditorPlugin is not a function #21未关闭。

设置相关customMonaco与customWorker

在 Monaco Editor 中，customMonaco 和 customWorker 这两个属性是用于自定义 Monaco Editor 行为的关键属性，它们可以结合使用以实现更高度的自定义和控制。

`customMonaco`

customMonaco 属性允许你提供一个自定义的 Monaco Editor 实例，这使你能够在单个应用中使用多个 Monaco Editor 实例或者提供全局配置。

`customWorker`

customWorker 属性用于自定义 Worker 的加载方式，允许你提供自定义的 Worker 加载逻辑。

关系

这两个属性的关系通常是这样的：

独立使用：你可以单独使用 customMonaco 或 customWorker，根据你的需求进行配置。

typescriptCopy codemonaco.editor.create(document.getElementById('container'), {
  value: 'function hello() { alert("Hello, world!"); }',
  language: 'javascript',
  customMonaco: customMonacoInstance,  // 使用自定义的 Monaco 实例
  customWorker: customWorkerFunction,  // 使用自定义的 Worker 加载逻辑
});

结合使用：在某些场景下，你可能需要结合使用 customMonaco 和 customWorker，以实现更复杂的自定义需求。例如，你可能想要在自定义的 Monaco 实例中使用自定义的 Worker。

typescriptCopy codeconst customMonacoInstance = monaco.editor.create(document.getElementById('custom-container'));

monaco.editor.create(document.getElementById('container'), {
  value: 'function hello() { alert("Hello, world!"); }',
  language: 'javascript',
  customMonaco: customMonacoInstance,  // 使用自定义的 Monaco 实例
  customWorker: (moduleId) => {
    // 使用自定义的 Worker 加载逻辑
    if (moduleId === 'custom') {
      return new Worker('/path/to/customWorker.js');
    }
    return monaco.editor.createWebWorker({
      // 默认的 Worker 模块
      label: 'json',
      moduleId: 'vs/language/json/json.worker',
    });
  },
});

注意事项

在使用 customMonaco 和 customWorker 时，你需要确保它们的配置是兼容的，并且能够正确地与其他 Monaco Editor 的配置和行为结合。
自定义 Monaco 实例和 Worker 应该能够满足你的具体需求，例如特定的功能、性能优化或集成其他工具和服务。

通过合理地使用 customMonaco 和 customWorker，你可以实现对 Monaco Editor 的深度自定义，以满足特定的功能和性能需求。