在自定义VS Code扩展Webview中集成Monaco Editor遇阻求助

核心问题本质 #

VS Code Webview有严格的隔离加载策略，直接导入monaco-editor会触发权限限制——Monaco的依赖文件无法直接从扩展包加载到Webview的隔离环境，这是导致随机文件错误、err:access_denied的根本原因。

步骤1：调整依赖配置 #

在package.json中添加正确的依赖及webpack插件：

{
  "dependencies": {
    "monaco-editor": "^0.44.0"
  },
  "devDependencies": {
    "monaco-editor-webpack-plugin": "^7.1.0",
    "webpack": "^5.88.0",
    "webpack-cli": "^5.1.4",
    "ts-loader": "^9.4.3",
    "css-loader": "^6.8.1",
    "style-loader": "^3.3.3",
    "file-loader": "^6.2.0"
  }
}

步骤2：修改webpack.config.js #

添加Monaco专用插件处理资源打包与路径映射：

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './src/webview/index.ts',
  output: {
    filename: 'webview.js',
    path: path.resolve(__dirname, 'out/webview')
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.ttf$/,
        use: ['file-loader']
      }
    ]
  },
  plugins: [
    new MonacoWebpackPlugin({
      languages: ['javascript', 'typescript', 'python'] // 按需加载需要的语言包
    })
  ],
  resolve: {
    extensions: ['.ts', '.js']
  }
};

步骤3：更新tsconfig.json #

确保TypeScript能正确解析Monaco的类型定义：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM"],
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "strict": true,
    "outDir": "./out",
    "typeRoots": ["./node_modules/@types"]
  },
  "include": ["src/**/*"]
}

步骤4：Webview端正确实现 #

扩展主逻辑（extension.ts） #

处理Webview资源路径映射，确保符合VS Code的权限规则：

import * as vscode from 'vscode';
import * as path from 'path';

export function activate(context: vscode.ExtensionContext) {
  let disposable = vscode.commands.registerCommand('myExtension.openMonacoView', () => {
    const panel = vscode.window.createWebviewPanel(
      'monacoEditorPanel',
      '代码预览',
      vscode.ViewColumn.One,
      {
        enableScripts: true,
        localResourceRoots: [
          vscode.Uri.file(path.join(context.extensionPath, 'out/webview'))
        ]
      }
    );

    // 将本地资源路径转换为Webview可访问的URI
    const scriptUri = panel.webview.asWebviewUri(
      vscode.Uri.file(path.join(context.extensionPath, 'out/webview', 'webview.js'))
    );

    panel.webview.html = `
      <!DOCTYPE html>
      <html>
      <body style="margin:0;">
        <div id="editor-container" style="width:100vw; height:100vh;"></div>
        <script src="${scriptUri}"></script>
      </body>
      </html>
    `;
  });

  context.subscriptions.push(disposable);
}

Webview脚本（src/webview/index.ts） #

初始化Monaco Editor并加载ChatGPT生成的代码：

import * as monaco from 'monaco-editor';

// 替换为ChatGPT输出的代码内容
const chatGPTCode = `function calculateSum(a: number, b: number): number {
  return a + b;
}

// 示例调用
console.log(calculateSum(5, 10));`;

// 初始化编辑器
monaco.editor.create(document.getElementById('editor-container')!, {
  value: chatGPTCode,
  language: 'typescript',
  theme: 'vs-dark',
  minimap: { enabled: false }
});

关键注意事项 #

• 所有Webview用到的本地资源，必须通过panel.webview.asWebviewUri转换路径，否则会触发权限拒绝。
• 按需加载Monaco语言包，避免不必要的体积膨胀。
• 确保webpack打包后的产物输出到out/webview目录，与扩展主逻辑的资源映射路径一致。

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