VS Code扩展HTML Webview中Monaco Editor不显示问题排查

我目前正在开发一款Visual Studio Code扩展，该扩展会打开HTML格式的webview作为预览界面，当前通过HTML生成视图。我尝试在扩展代码中集成Monaco Editor，但无法看到编辑器，仅能显示标题，使用的代码如下：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>monaco editor</title>

        <!-- MONACO CSS -->
        <link rel="stylesheet" data-name="vs/editor/editor.main" href="_static/js/ext/monaco-editor/min/vs/editor/editor.main.css">
    </head>

    <body style="background-color: rgb(140, 190, 190);">
        <h1>monaco editor</h1>
        <div id="monaco_editor" style="height:400px">
        </div>

        <!-- MONACO JS -->
        <script>var require = { paths: { 'vs': '_static/js/ext/monaco-editor/min/vs' } };</script>

        <script src="_static/js/ext/monaco-editor/min/vs/loader.js"></script>
        <script src="_static/js/ext/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
        <script src="_static/js/ext/monaco-editor/min/vs/editor/editor.main.js"></script>

        <script>
        // CREATE AN EDITOR
        var h_div = document.getElementById('monaco_editor');
        var editor = monaco.editor.create(h_div, {
            value: [
                'function x() {',
                '\tconsole.log("Hello world!");',
                '}'
            ].join('\n'),
            language: 'javascript'
        });
        </script>
    </body>
</html>

核心疑问：该问题是否由资源路径不存在导致？是否存在更优的实现方案？

路径问题是核心故障原因 #

VS Code Webview 运行在独立的隔离上下文，有严格的内容安全策略（CSP）和资源访问限制，代码中硬编码的_static/...相对路径无法被Webview直接识别，所有Monaco相关的CSS、JS资源都会加载失败，最终只能渲染出h1标题，编辑器容器因为依赖脚本未执行完全无法渲染。

基础修复步骤 #

• 所有本地资源必须通过Webview实例的asWebviewUri()方法转换为Webview可访问的特殊URI，不能直接写本地相对路径。转换逻辑示例（扩展侧TS/JS代码）：

// 获取webview实例后执行
const monacoRootPath = vscode.Uri.joinPath(
  context.extensionUri,
  '_static', 'js', 'ext', 'monaco-editor', 'min', 'vs'
);
const monacoWebviewRoot = webview.asWebviewUri(monacoRootPath);

• 在Webview的HTML头部添加CSP配置，允许加载对应来源的脚本、样式资源：

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'none'; style-src ${webview.cspSource} 'unsafe-inline'; script-src ${webview.cspSource} 'unsafe-inline'; worker-src ${webview.cspSource};"
>

• 将HTML中所有Monaco相关的路径配置、资源引用地址替换为转换后的monacoWebviewRoot对应路径，包括require配置、link标签的href、script标签的src。
• 额外补充Monaco的Worker路径配置，否则编辑器加载后会出现语法服务失效、控制台报错的问题。

更优实现方案 #

• 优先复用VS Code内置Monaco能力：VS Code本身基于Monaco构建，不需要额外打包Monaco资源，可以通过VS Code扩展API直接唤起内置文本编辑器、或者通过Webview和扩展宿主的通信，调用内置编辑器的能力，包体积为0，和VS Code原生行为100%兼容，不存在版本适配问题。
• 如果必须在Webview内嵌入独立编辑器，直接使用适配好Webview场景的Monaco集成包，不需要手动处理资源路径、CSP、Worker配置等问题，大幅降低集成成本。

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