VS Code扩展侧边栏Webview加载失败问题求助

核心错误原因 #

1. 错误创建WebviewPanel：你写的const panel = ('adrenaline', 'Adrenaline', vscode.ViewColumn.One, {...})是逗号表达式，最终panel的值是最后那个配置对象，并非WebviewPanel实例，所以panel.webview是undefined，执行panel.webview.html = ...就会抛出Cannot set properties of undefined错误。而且你要实现的是侧边栏WebviewView，不需要创建WebviewPanel（这是弹窗式Webview），这段代码完全多余。

2. WebviewViewProvider参数名不匹配：resolveWebviewView方法的第一个参数是webviewView，但你写的参数名是thisWebview，后面却用thisWebviewView调用，导致变量未定义，无法设置Webview内容。

3. package.json配置重复：根节点的views字段和contributes里的views重复，会导致配置冲突。

4. 模板字符串未闭合：getWebviewContent函数里的返回模板字符串缺少结尾的反引号，语法错误。

修正后的代码 #

extension.js #

const vscode = require("vscode");
const path = require("path");

/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {
    let diagnostics = vscode.languages.getDiagnostics();
    console.log(diagnostics);
    console.log("adrenaline has started");
    console.log('Congratulations, your extension "bugfixer" is now active!');

    // 侧边栏WebviewView提供者
    const thisProvider = {
        resolveWebviewView(webviewView, webviewContext, token) {
            // 启用脚本
            webviewView.webview.options = { enableScripts: true };
            // 设置Webview内容
            webviewView.webview.html = getWebviewContent();

            // 监听Webview消息（可选）
            webviewView.webview.onDidReceiveMessage(
                message => {
                    switch (message.command) {
                        case 'alert':
                            vscode.window.showErrorMessage(message.text);
                            return;
                    }
                },
                undefined,
                context.subscriptions
            );
        }
    };

    // 注册WebviewView提供者
    context.subscriptions.push(
        vscode.commands.registerWebviewViewProvider('adrenaline.start', thisProvider)
    );
}

function getWebviewContent() {
    return `<!DOCTYPE html>
<html>
    <body>hello</body>
</html>`;
}

module.exports = { activate };

package.json #

{
  "name": "adrenaline",
  "displayName": "adrenaline",
  "description": "",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.74.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [
    "onView:adrenaline.start"    
  ],
  "main": "./extension.js",
  "contributes": {
    "views": {
      "explorer": [
          {
              "type": "webview",
              "id": "adrenaline.start",
              "name": "Adrenaline"
          }
      ]
    },
    "commands": [{
      "command": "adrenaline.start",
      "title": "adrenaline"
    }]
  },
  "scripts": {
    "lint": "eslint .",
    "pretest": "npm run lint",
    "test": "node ./test/runTest.js"
  },
  "devDependencies": {
    "@types/vscode": "^1.74.0",
    "@types/glob": "^8.0.0",
    "@types/mocha": "^10.0.1",
    "@types/node": "16.x",
    "eslint": "^8.28.0",
    "glob": "^8.0.3",
    "mocha": "^10.1.0",
    "typescript": "^4.9.3",
    "@vscode/test-electron": "^2.2.0"
  }
}

额外说明 #

• 移除了多余的WebviewPanel创建代码，专注于侧边栏WebviewView的实现。
• 修正了resolveWebviewView的参数名，确保能正确访问WebviewView实例。
• 删除了package.json中重复的views配置，避免冲突。
• 补全了getWebviewContent的模板字符串，修复语法错误。
• 调整激活事件onView:adrenaline.start的格式，去掉空格，确保VS Code能正确识别。

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