求助：如何在VS Code Extension中创建带输入的弹出提示框

核心方案：使用VS Code原生API vscode.window.showInputBox #

VS Code提供了专门的原生API实现带输入的弹窗，完全适配扩展环境，不会出现调试页面打开的问题。

基础实现代码 #

在你的扩展激活函数中添加以下逻辑：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	let inputCommand = vscode.commands.registerCommand('your-extension-id.showInputPrompt', async () => {
		// 配置弹窗参数
		const inputConfig: vscode.InputBoxOptions = {
			prompt: '请输入内容',
			placeHolder: '例如：项目版本号',
			value: '',
			// 可选：输入验证逻辑
			validateInput: (input) => {
				if (input.trim().length === 0) {
					return '输入不能为空';
				}
				return null; // 验证通过返回null
			}
		};

		// 弹出输入框并获取结果
		const inputResult = await vscode.window.showInputBox(inputConfig);
		if (inputResult) {
			// 用户确认输入，处理结果
			vscode.window.showInformationMessage(`你输入的内容：${inputResult}`);
		} else {
			// 用户取消输入
			vscode.window.showInformationMessage('已取消输入');
		}
	});

	context.subscriptions.push(inputCommand);
}

必要配置补充 #

在package.json的contributes字段中注册对应命令，确保能在VS Code命令面板中调用：

{
	"contributes": {
		"commands": [
			{
				"command": "your-extension-id.showInputPrompt",
				"title": "显示输入弹窗"
			}
		]
	}
}

关键注意点 #

• 禁止使用浏览器的prompt()方法：VS Code扩展运行在Electron环境中，直接调用浏览器DOM API只会在Webview调试页面生效，无法触发VS Code原生弹窗。
• showInputBox是异步方法，需通过async/await或Promise链式调用处理返回值。
• 若需要多输入项、下拉选择等复杂交互，可使用vscode.window.showQuickPick或自定义Webview，但单输入场景下showInputBox是最优选择。

内容的提问来源于stack exchange，提问作者2020pgcaca65 Priyanshu_kumar_k