VS Code扩展点击Webview后activeTextEditor为undefined问题求助

问题概述 #

开发VS Code扩展时，通过Webview展示大语言模型（LLM）生成的代码重构建议，点击Webview内的"Accept"按钮替换选中代码时，间歇性出现vscode.window.activeTextEditor为undefined的情况，导致无法完成代码替换。该问题并非每次触发。

复现步骤 #

• 启动扩展
• 打开一个文本文件
• 在编辑器中选中部分文本
• 触发显示建议命令（如Ctrl+Shift+P -> Show Code Suggestions）

预期与实际结果 #

预期结果 #

Webview面板展示代码建议；点击"Accept"按钮可替换编辑器选中文本；操作后焦点保留在编辑器，activeTextEditor始终有效。

实际结果 #

间歇性出现点击Webview（含Accept按钮）后，Webview标签变为激活状态，activeTextEditor变为undefined，无法替换代码，提示"No active editor or suggestion available."

相关代码 #

commands.ts #

import * as vscode from "vscode";
import { getLoadingWebviewContent, getWebviewContent } from "./utils/utils";
import { llmProxyConnector } from "./connector/LLMProxyConnector";

class Commands {
  private panel: vscode.WebviewPanel | undefined;
  private suggestion: string | undefined;

  public acceptSuggestionCommand() {
    const editor = vscode.window.activeTextEditor;

    if (this.panel?.webview && editor && this.suggestion) {
      const { selection } = editor;

      if (selection) {
        editor.edit((editBuilder) => {
          editBuilder.replace(selection, this.suggestion as string);
        });
        this.panel.dispose();
        vscode.window.showInformationMessage("Accepted suggestion");
      } else {
        vscode.window.showInformationMessage(
          "No selection in the active editor."
        );
      }
    } else {
      vscode.window.showInformationMessage(
        "No active editor or suggestion available."
      );
    }
  }

  public async showSuggestionsCommand() {
    const editor = vscode.window.activeTextEditor;

    if (editor) {
      const selectedText = editor.document.getText(editor.selection);

      if (selectedText) {
        vscode.window.showInformationMessage(
          "Generating suggestion for the code you have selected."
        );
        if (!this.panel) {
          this.panel = vscode.window.createWebviewPanel(
            "suggestionPanel",
            "Code Suggestion",
            { viewColumn: vscode.ViewColumn.Beside, preserveFocus: true },
            {
              enableScripts: true,
              retainContextWhenHidden: true,
            }
          );
        }
        this.panel.webview.html = getLoadingWebviewContent();

        const response = await llmProxyConnector.fetchLLMSuggestions(
          selectedText
        );

        const { codeSnippet, explanation } = 
          this.parseCodeAndExplanation(response.choices[0].text);
        this.suggestion = codeSnippet;
        this.panel.webview.html = getWebviewContent(
          selectedText,
          this.suggestion,
          explanation
        );

        this.panel.webview.onDidReceiveMessage(
          this.onDidReceiveMessageCallback.bind(this)
        );
        this.panel.onDidDispose(() => {
          this.panel = undefined;
        });
      } else {
        vscode.window.showInformationMessage("Please select a text first!");
      }
    }
  }

  // Other command methods...

  private parseCodeAndExplanation(input: string) {
    const delimiter = "<===>";
    const parts = input.split(delimiter);

    const codeSnippet = parts[0].trim();
    const explanation = parts[1].trim();
    return { codeSnippet, explanation };
  }

  private onDidReceiveMessageCallback(message: any) {
    switch (message.command) {
      case "acceptSuggestion":
        vscode.commands.executeCommand("ai-code-simplifier.acceptSuggestion");
        break;
      case "declineSuggestion":
        vscode.commands.executeCommand("ai-code-simplifier.declineSuggestion");
        break;
      case "webviewClose":
        this.panel?.dispose();
        break;
      case "focusOnEditor":
        vscode.commands.executeCommand(
          "workbench.action.focusActiveEditorGroup"
        );
        break;
    }
  }
}

export const commands = new Commands();

webviewScript.ts #

export const webviewScript = `
  const vscode = acquireVsCodeApi();

  function acceptSuggestion() {
      vscode.postMessage({ command: 'acceptSuggestion' });
  }

  function declineSuggestion() {
      vscode.postMessage({ command: 'declineSuggestion' });
  }

  window.addEventListener('message', (event) => {
    const message = event.data;

    switch (message.command) {
      case 'acceptSuggestion':
        acceptSuggestion();
        break;
      case 'declineSuggestion':
        declineSuggestion();
        break;
      case 'webviewClose':
        vscode.postMessage({ command: 'webviewClose' });
        break;
    }
  });

  document.body.addEventListener('click', (event) => {
    event.stopPropagation();
    setTimeout(() => {
      vscode.postMessage({ command: 'focusOnEditor' });
    }, 0);
  });
`;

已尝试的解决方案 #

点击Webview时执行workbench.action.focusActiveEditorGroup命令切换回编辑器焦点，但无法彻底避免问题。

环境信息 #

• VS Code版本：1.84.2
• NodeJS版本：16.14.2
• 操作系统：macOS Sonoma 14.1

解决方案建议 #

1. 缓存触发命令时的编辑器与上下文 #

在showSuggestionsCommand中，缓存触发命令时的TextEditor实例和Selection对象，避免依赖后续的activeTextEditor：

class Commands {
  private panel: vscode.WebviewPanel | undefined;
  private suggestion: string | undefined;
  private targetEditor: vscode.TextEditor | undefined; // 新增：缓存编辑器实例
  private targetSelection: vscode.Selection | undefined; // 新增：缓存选区

  public acceptSuggestionCommand() {
    // 直接使用缓存的编辑器和选区，而非activeTextEditor
    if (this.panel?.webview && this.targetEditor && this.suggestion && this.targetSelection) {
      this.targetEditor.edit((editBuilder) => {
        editBuilder.replace(this.targetSelection, this.suggestion as string);
      });
      this.panel.dispose();
      vscode.window.showInformationMessage("Accepted suggestion");
      // 清理缓存
      this.targetEditor = undefined;
      this.targetSelection = undefined;
    } else {
      vscode.window.showInformationMessage(
        "No target editor or suggestion available."
      );
    }
  }

  public async showSuggestionsCommand() {
    const editor = vscode.window.activeTextEditor;

    if (editor) {
      const selectedText = editor.document.getText(editor.selection);
      // 缓存编辑器和选区
      this.targetEditor = editor;
      this.targetSelection = editor.selection;

      if (selectedText) {
        // 原有逻辑保持不变...
      }
    }
  }

  private onDidDispose() {
    this.panel = undefined;
    // 面板销毁时清理缓存
    this.targetEditor = undefined;
    this.targetSelection = undefined;
  }
}

2. 优化Webview焦点控制 #

移除Webview中全局的点击触发焦点切换逻辑，改为仅在点击Accept/Decline按钮时执行焦点切换，并且确保在执行替换操作前等待焦点切换完成：
修改webviewScript.ts：

export const webviewScript = `
  const vscode = acquireVsCodeApi();

  async function acceptSuggestion() {
      // 先切换焦点到编辑器
      vscode.postMessage({ command: 'focusOnEditor' });
      // 等待焦点切换完成（使用setTimeout确保VS Code内部状态更新）
      await new Promise(resolve => setTimeout(resolve, 50));
      vscode.postMessage({ command: 'acceptSuggestion' });
  }

  async function declineSuggestion() {
      vscode.postMessage({ command: 'focusOnEditor' });
      await new Promise(resolve => setTimeout(resolve, 50));
      vscode.postMessage({ command: 'declineSuggestion' });
  }

  window.addEventListener('message', (event) => {
    const message = event.data;

    switch (message.command) {
      case 'acceptSuggestion':
        acceptSuggestion();
        break;
      case 'declineSuggestion':
        declineSuggestion();
        break;
      case 'webviewClose':
        vscode.postMessage({ command: 'webviewClose' });
        break;
    }
  });

  // 移除全局点击事件，仅保留按钮点击时的焦点切换
`;

3. 确保Webview创建时的焦点设置 #

在创建WebviewPanel时，确认preserveFocus: true生效，并且添加编辑器激活事件监听，实时更新缓存的编辑器实例：

public async showSuggestionsCommand() {
  const editor = vscode.window.activeTextEditor;

  if (editor) {
    // 原有逻辑...
    this.panel = vscode.window.createWebviewPanel(
      "suggestionPanel",
      "Code Suggestion",
      { viewColumn: vscode.ViewColumn.Beside, preserveFocus: true },
      {
        enableScripts: true,
        retainContextWhenHidden: true,
      }
    );
    // 监听编辑器激活事件，更新缓存
    const editorDisposable = vscode.window.onDidChangeActiveTextEditor(activeEditor => {
      if (activeEditor) {
        this.targetEditor = activeEditor;
      }
    });
    // 面板销毁时释放监听器
    this.panel.onDidDispose(() => {
      this.panel = undefined;
      editorDisposable.dispose();
      this.targetEditor = undefined;
      this.targetSelection = undefined;
    });
    // 原有逻辑...
  }
}

问题根源分析 #

该问题的核心是VS Code的焦点状态更新存在异步延迟：当点击Webview时，VS Code会异步切换激活状态，此时立即执行acceptSuggestionCommand可能会在activeTextEditor更新前获取到undefined。缓存触发命令时的编辑器上下文，避免依赖实时的activeTextEditor，是最可靠的解决方案。

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