如何在VS Code扩展中实现支持单键输入的Yes/No对话框？

可行方案：基于QuickInput API自定义交互 #

VS Code内置的QuickInput API（包含QuickPick、InputBox等组件）可以实现轻量、贴合编辑器风格的交互，并且支持监听键盘事件处理单键响应，完美匹配你的需求。

具体实现步骤 #

1. 创建自定义QuickPick实例
   通过vscode.window.createQuickPick()生成选择器，隐藏默认选项列表，仅展示提示文本告知用户可用按键。

2. 监听键盘事件实现单键响应
   捕获用户按下的Y、N、回车键，根据按键触发对应逻辑并销毁组件。

3. 处理默认回车行为
   将回车键映射为默认选择Yes的操作。

TypeScript代码示例 #

import * as vscode from 'vscode';

async function showYesNoPrompt(): Promise<boolean> {
  return new Promise((resolve) => {
    const quickPick = vscode.window.createQuickPick();
    // 隐藏选项列表，只展示提示信息
    quickPick.items = [];
    quickPick.placeholder = "请选择：Y(是) / N(否)，回车默认选是";
    quickPick.canSelectMany = false;
    quickPick.show();

    // 监听键盘按键
    const keyListener = quickPick.onDidKeyDown((event) => {
      const key = event.key.toLowerCase();
      if (key === 'y' || event.key === 'Enter') {
        resolve(true);
        cleanUp();
      } else if (key === 'n') {
        resolve(false);
        cleanUp();
      }
    });

    // 用户关闭弹窗时的默认处理
    quickPick.onDidHide(() => {
      resolve(false);
      cleanUp();
    });

    // 清理资源函数
    function cleanUp() {
      quickPick.dispose();
      keyListener.dispose();
    }
  });
}

// 调用示例
async function executePrompt() {
  const choice = await showYesNoPrompt();
  vscode.window.showInformationMessage(choice ? "已选择Yes" : "已选择No");
}

方案优势 #

• 完全适配VS Code原生UI风格，比模态对话框更美观自然
• 原生支持单键响应，无需额外依赖
• 轻量无侵入，代码实现简洁
• 可灵活自定义提示文本、组件样式

注意事项 #

• 务必在交互结束后调用dispose()销毁组件和事件监听，避免内存泄漏
• 可根据需求调整提示文本的表述，比如高亮标注可用按键
• 如果需要更复杂的自定义UI，也可以结合Webview实现，但QuickInput已能满足基础需求

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