Vue 3集成Vitest与Monaco Editor样式异常问题求助

问题汇总 #

当前集成后代码可运行，但存在三个样式异常：

• 设置 lineNumbers: 'on' 后行号不显示
• 左上角出现奇怪图标
• 编辑器宽度不符合预期

一、行号不显示问题解决 #

1. 检查样式导入完整性
   确认Monaco的核心样式已正确导入：

   • 在CodeEditor.vue中手动引入基础样式：

     import 'monaco-editor/esm/vs/editor/editor.main.css'
     

   • 检查vite-plugin-monaco-editor配置，确保没有禁用样式加载，插件默认会处理样式，但如果自定义了配置，要确认css选项未设为false。

2. 容器样式排查

   • 行号区域默认在编辑器左侧，若容器padding-left为0或设置了overflow: hidden，会导致行号被遮挡。给编辑器容器添加：

     .editor-container {
       padding-left: 40px;
       overflow: visible;
     }
     

   • 确认容器没有设置text-indent等可能偏移行号的样式。

二、左上角奇怪图标处理 #

这个图标通常是折叠功能的默认UI或样式加载异常导致的：

1. 补全缺失样式
   确保不仅导入了编辑器主样式，还要确认monaco-editor的所有关联样式都被正确加载（比如折叠、滚动条相关的样式），部分场景下动态加载可能漏加载样式文件。

2. 排查样式冲突
   检查父组件或全局CSS是否有::before/::after伪元素，或者position: absolute的元素覆盖了编辑器左上角区域。可以给编辑器容器加z-index: 10临时测试。

3. 临时禁用折叠功能验证
   在编辑器初始化配置中添加folding: false，如果图标消失，说明是折叠功能的样式异常，可针对性排查折叠相关样式：

   monaco.editor.create(container, {
     lineNumbers: 'on',
     folding: false,
     // 其他配置
   })
   

三、宽度显示异常修复 #

1. 容器尺寸约束
   编辑器默认继承容器宽度，确保容器有明确的宽度设置：

   .editor-container {
     width: 100%;
     min-width: 600px; /* 或固定值 */
     box-sizing: border-box; /* 避免padding撑大宽度 */
   }
   

2. 开启自动布局
   配置automaticLayout: true让Monaco自动监听容器尺寸变化并调整：

   const editor = monaco.editor.create(container, {
     // 其他配置
     automaticLayout: true
   })
   

   若仍有问题，可在Vue的onMounted钩子中手动调用布局方法：

   onMounted(() => {
     editor?.layout()
   })
   

四、Vitest环境额外注意 #

Vitest运行时可能无法完整加载Monaco的Web Worker或样式，导致渲染异常：

• 测试时优先模拟编辑器模块，避免初始化真实实例：

  vi.mock('monaco-editor', () => ({
    editor: {
      create: vi.fn(() => ({ layout: vi.fn() }))
    }
  }))
  

• 若需要渲染测试，确保测试环境支持DOM样式加载，可使用@testing-library/vue配合jsdom完整模拟浏览器环境。

附：用户提供的参考代码

CodeEditor.vue #

<!-- 用户的组件代码 -->

vite.config.ts #

// 用户的Vite配置代码

内容的提问来源于stack exchange，提问作者Non404