记录在使用 monaco-editor 时，语言包或代码高亮功能加载失败的常见原因与解决方案。

一、问题现象

  • 设置 language 后不生效，编辑器显示为纯文本
  • 多语言切换时高亮丢失
  • 控制台报错：Cannot load language <xxx>
  • worker 文件请求 404

二、常见原因

  1. worker 文件路径错误

    • monaco-editor 通过 worker 文件加载语言解析逻辑
    • 在 Vite/Webpack 打包后，worker 可能被放置到不同路径

  2. 语言模块未导入

    • 某些语言（如 SQL、YAML）需要额外 import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution'

  3. 使用 CDN 且未加载对应语言包

    • 如果用 CDN 引入，需要确保引入了完整语言包文件

  4. 语言 ID 与注册 ID 不匹配

    • monaco.editor.create({ language: 'javascript' }) 中的语言 ID 必须与注册时一致

三、解决方案

1. 确保引入语言包

import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'
import 'monaco-editor/esm/vs/basic-languages/python/python.contribution'

2. 正确配置 worker 路径

Vite 示例：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    include: ['monaco-editor']
  }
})

或者使用 vite-plugin-monaco-editor 自动处理 worker 引入。

3. 手动注册语言

monaco.languages.register({ id: 'customLang' })
monaco.languages.setMonarchTokensProvider('customLang', {
  tokenizer: {
    root: [
      [/[a-z_$][\w$]*/, 'identifier']
    ]
  }
})

四、调试建议

  • 先确认 monaco.editor.getModels() 中的 language 值
  • 检查浏览器 Network 面板是否成功加载对应 worker
  • 使用 console.log(monaco.languages.getLanguages()) 查看已注册语言

五、小结

语言包与高亮依赖 worker 与对应贡献文件，问题通常出在路径、导入或注册不一致上，按步骤排查即可定位原因。