Monaco Editor无法设置JSON为语言的问题及解决方法

问题原因 #

使用ESM方式导入Monaco Editor时，默认不会自动加载所有语言的支持模块，JSON语言的语法高亮、token provider等核心组件需要显式导入并注册，否则会触发"Cannot set tokens provider for unknown language json"错误。

修复步骤 #

1. 显式导入JSON语言贡献模块
   在原有monaco核心导入语句后，添加JSON语言支持模块的导入，确保编辑器能识别JSON语言：

import 'https://cdn.jsdelivr.net/npm/monaco-editor@latest/esm/vs/basic-languages/json/json.contribution.js';

2. 修正字符串语法错误
   原代码中value字段的多行JSON字符串使用普通引号包裹，这在JavaScript中属于语法错误，需改为模板字符串（用反引号``包裹）：

value: `{
  "key": "value"
}`,

完整修复后的代码 #

<script type="module"> 
import * as monaco from 'https://cdn.jsdelivr.net/npm/monaco-editor@latest/+esm';
// 导入JSON语言支持模块
import 'https://cdn.jsdelivr.net/npm/monaco-editor@latest/esm/vs/basic-languages/json/json.contribution.js';

document.addEventListener('DOMContentLoaded', () => { 
  monaco.editor.create(document.getElementById('editor-container'), {
    value: `{
  "key": "value"
}`,
    language: 'json',
    theme: 'vs-dark',
    minimap: {
                enabled: false
            }
  });
});
</script>
<div id="editor-container" style="width:800px;height:600px;border:1px solid #ccc;"></div>

补充说明 #

如果需要使用其他语言（如JavaScript、HTML等），只需按照相同逻辑导入对应语言的xxx.contribution.js模块即可，路径格式为https://cdn.jsdelivr.net/npm/monaco-editor@latest/esm/vs/basic-languages/[语言名]/[语言名].contribution.js。

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