如何点击Diagnostic目标URI时打开VS Code WebViewPanel？

你的核心问题是在循环中直接创建WebViewPanel导致一次性打开多个面板，正确的做法是将面板创建逻辑延迟到用户点击Diagnostic的URI时执行，具体步骤如下：

1. 替换示例URI为自定义协议 #

不要用外部链接，定义专属自定义协议（比如demo-panel://），将每个item的ID嵌入URI中，让VS Code能识别这是我们需要处理的点击事件：

const code: DiagnosticCode = {
  // 用自定义协议携带item ID，替代原谷歌链接
  target: vscode.Uri.parse(`demo-panel://item/${element.id}`),
  value: element.id
};

2. 注册URI处理监听器 #

在扩展激活函数（activate）内注册UriHandler，监听自定义协议的URI点击事件，此时才创建/显示WebViewPanel：

// 存储items到模块级变量，方便后续查找
let globalItems: any[] = [];

export function activate(context: vscode.ExtensionContext) {
  // 注册URI处理器
  context.subscriptions.push(
    vscode.window.registerUriHandler({
      handleUri(uri: vscode.Uri) {
        // 解析URI中的item ID
        const itemId = uri.path.split('/')[2];
        // 找到对应item
        const targetItem = globalItems.find(item => item.id === itemId);
        
        if (!targetItem) return;

        // 检查是否已有打开的面板，避免重复创建
        const existingPanel = vscode.window.webviewPanels.find(panel => 
          panel.viewType === 'demo' && panel.title === `Demo - ${itemId}`
        );

        if (existingPanel) {
          // 已有面板则直接显示
          existingPanel.reveal(vscode.ViewColumn.Beside);
        } else {
          // 新建面板并填充内容
          const html = `
            <div class="path">
              <div class="label"><span class="font-light">${targetItem.description}</span></div>
            </div>
          `;
          const panel = vscode.window.createWebviewPanel(
            'demo',
            `Demo - ${itemId}`,
            vscode.ViewColumn.Beside,
            {}
          );
          panel.webview.html = html;
        }
      }
    })
  );

  // 原有逻辑：处理输出并创建Diagnostic
  const output = JSON.parse(stdout);
  globalItems = output['items'];
  if (globalItems && globalItems.length > 0) {
    const foundDiagnostics: vscode.Diagnostic[] = [];
    for (const element of globalItems) {
      const code: DiagnosticCode = {
        target: vscode.Uri.parse(`demo-panel://item/${element.id}`),
        value: element.id
      };

      foundDiagnostics.push({
        range: new vscode.Range(0, 1),
        message: `${element.item_id}: ${element.name} (${element.severity})`,
        severity: vscode.DiagnosticSeverity.Error,
        code
      });
    }
    // 将诊断信息绑定到目标文档（替换为你的目标文件URI）
    const targetDocUri = vscode.Uri.file('/path/to/your/target/file');
    vscode.languages.createDiagnosticCollection('demo').set(targetDocUri, foundDiagnostics);
  }
}

3. 移除循环中的面板创建代码 #

删除原循环内的vscode.window.createWebviewPanel相关代码，避免提前批量创建面板。

关键说明 #

• 自定义协议确保VS Code能将点击事件转发到你的扩展处理器；
• 存储items到全局变量是为了在点击时快速匹配对应内容；
• 检查已有面板可以避免重复创建，优化用户体验；
• 最终只有用户主动点击Diagnostic的URI时，才会创建或显示对应的WebViewPanel。

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