🌟 为什么选择 Monaco Editor？

Monaco Editor 是微软开源的代码编辑器，也是 VS Code 的核心组件。它具备：

  • ✅ 完整的语法高亮与智能提示

  • ✅ 错误检查、代码折叠、自动补全

  • ✅ 多语言支持（JavaScript、Python、Java 等）

  • ✅ 高性能，适合大型项目

而在 Vue 3 生态中monaco-editor-vue3 是目前最成熟、轻量且活跃维护的封装方案。

⚠️ 注意：该库已发布到 npm，可直接使用 npm 安装！

🛠️ 第一步：安装依赖

npm install monaco-editor-vue3 monaco-editor

🔧 第二步：配置 main.ts（解决 Web Worker 错误）

import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';

self.MonacoEnvironment = {
    getWorker(_, label) {
        if (label === 'json') {
            return new jsonWorker();
        }
        if (label === 'css' || label === 'scss' || label === 'less') {
            return new cssWorker();
        }
        if (label === 'html' || label === 'handlebars' || label === 'razor') {
            return new htmlWorker();
        }
        if (label === 'typescript' || label === 'javascript') {
            return new tsWorker();
        }
        return new editorWorker();
    },
};

🔄 修改后务必重启开发服务器！

💻 第三步：在 Vue 3 组件中使用

<template>
  <div id="monaco_editor_div">
    <CodeEditor
        v-model:value="code"
        :options="editorOptions"
        language="javascript"
        theme="vs-dark"
    />
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import {CodeEditor} from 'monaco-editor-vue3';

const code = ref(`function hello() {
  console.log('Hello, Monaco Editor Vue3!');
}`);

const editorOptions = {
  fontSize: 14,
  minimap: {enabled: false},
  automaticLayout: true
};
</script>

<style lang="scss" scoped>
#monaco_editor_div {
  height: 400px;
}
</style>

💡效果图