nuxt4 monaco 编辑器的使用 (json校验, 代码块显示, 语言高亮等在线编辑)

nuxt官方模块开箱即用

nuxt 提供的 nuxt-monaco-editor 模块开箱即用 链接: nuxt.com/modules/nux…

# 安装
npx nuxi@latest module add nuxt-monaco-editor

# 设置 (将此模块添加到 Nuxt 配置)
export default defineNuxtConfig({
  modules: [
    'nuxt-monaco-editor'
  ]
})

# 可选）配置模块
export default defineNuxtConfig({
  monacoEditor: {
    // These are default values:
    locale: 'en',
    componentName: {
      codeEditor: 'MonacoEditor',
      diffEditor: 'MonacoDiffEditor'
    }
  }
})

# 在您的页面或组件中使用组件
<template>
  <MonacoEditor v-model="value" lang="typescript" />
</template>

<script lang="ts" setup>
const value = ref('')
</script>

手动引入 monaco-editor 优点可控性 防止依赖第三方自由度高

# 安装 版本 0.52.2
npm i monaco-editor


# 处理 开发环境 可能会因为循环导致的内存溢出问题
vite:{
  optimizeDeps: {
      exclude: [
        'monaco-editor',
      ],
  },
}


# 添加客户worke插件 app/plugins/monaco.client.ts
import { defineNuxtPlugin } from '#app'
import * as monaco from 'monaco-editor'
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'

export default defineNuxtPlugin(() => {
    self.MonacoEnvironment = {
        getWorker(_: string, label: string) {
            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()
        }
    }
    return {
        provide: {
            monaco
        }
    }
})


# 创建组件或页面 非ssr
<script setup lang="ts">
  import * as monaco from 'monaco-editor'
  import { onMounted, onBeforeUnmount, ref, watch } from 'vue'

  const editRef = ref<HTMLDivElement | null>(null)
  let editor: monaco.editor.IStandaloneCodeEditor | null = null

  onMounted(async () => {
    await nextTick()
    editor = monaco.editor.create(editRef.value!, {
      value: props.modelValue || '',
      language: 'json',
      theme: 'vs-dark',
      automaticLayout: true,
      minimap: { enabled: false },

      fontSize: 18,      // 设置字体大小（默认 14）
      lineHeight: 26,     // 设置行高（建议略大于 fontSize
      scrollBeyondLastLine: false, //禁止滚动超出最后一行

      folding: true,                 // 启用折叠
      foldingStrategy: 'indentation',      // auto 或 indentation
      showFoldingControls: 'always', // 总是显示左侧折叠箭头
      // glyphMargin: true, //是否显示行首图标边距（调试断点、折叠图标等）
      // smoothScrolling: true, //是否启用平滑滚动

      tabSize: 2,          // Tab 等于多少空格宽度
      // insertSpaces: true,  // 输入 Tab 时插入空格（而非真正的 Tab 字符）
      // detectIndentation: false,  // 关闭自动检测，强制使用上述配置
  })

  onBeforeUnmount(() => {
    editor?.dispose()
  })
</script>

<div ref="editRef" style="width:500px;height: 500px"></div>

demo: www.otter-data.com/dashboard/t…