VSCode Webview扩展加载失败：提示无数据提供者注册

问题根源及修复方案 #

1. 视图容器ID不匹配 #

在package.json的contributes.views配置中，你使用了错误的容器ID。views的键必须与viewsContainers.activitybar中定义的id完全一致，否则VSCode无法将视图与对应的容器关联，导致找不到已注册的Webview提供者。

修复后的package.json：

{
  "contributes": {
    "viewsContainers": {
      "activitybar": [
        {
          "id": "p",
          "title": "vs",
          "icon": "resources/icon.svg"
        }
      ]
    },
    "views": {
      "p": [ // 改为与viewsContainers中的id一致的"p"
        {
          "id": "view",
          "name": "vsss"
        }
      ]
    }
  }
}

2. 缺少_getHtmlForWebview方法实现 #

你的MyViewProvider类中调用了_getHtmlForWebview方法，但未实现该方法，运行时会因无法生成Webview所需的HTML内容而报错。

修复后的extension.ts：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  const myViewProvider = new MyViewProvider(context.extensionUri);
  context.subscriptions.push(
    vscode.window.registerWebviewViewProvider(
      "view",
      myViewProvider
    )
  );
}

class MyViewProvider implements vscode.WebviewViewProvider {
  constructor(private readonly _extensionUri: vscode.Uri) {
  }

  public resolveWebviewView(
    webviewView: vscode.WebviewView,
    _context: vscode.WebviewViewResolveContext,
    _token: vscode.CancellationToken
  ) {
    webviewView.webview.options = {
      enableScripts: true,
      localResourceRoots: [vscode.Uri.joinPath(this._extensionUri, 'src', 'webview')]
    };

    webviewView.webview.html = this._getHtmlForWebview(webviewView.webview);   
  }

  // 新增_getHtmlForWebview方法实现
  private _getHtmlForWebview(webview: vscode.Webview): string {
    return `
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>VSSS Webview</title>
      </head>
      <body>
        <h1>Hello Webview!</h1>
      </body>
      </html>
    `;
  }
}

验证修复 #

完成修改后，按Ctrl+Shift+P执行Reload Window重新加载扩展，点击活动栏的扩展图标即可正常显示Webview界面。

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