VSCode扩展中如何让QuickPick支持用户输入新值？

当然可以实现！不用让用户进行两步操作——我们可以直接通过VS Code API的QuickPick实例（而非封装好的showQuickPick快捷方法），打造一个既能选择预设选项、又能直接输入自定义内容的界面，完美解决你遇到的问题。

核心思路 #

放弃使用封装程度较高的showQuickPick，直接创建QuickPick实例，这样我们可以：

• 监听用户的输入变化，动态将用户输入的内容添加为可选选项
• 让用户在同一个界面里完成「选预设」或「输入自定义内容并确认」的操作，无需额外弹窗

完整代码示例 #

import { window, QuickPickItem } from 'vscode';

async function showCustomizableQuickPick(): Promise<string | undefined> {
    // 预设选项列表
    const presetOptions = ['Option 1', 'Option 2', 'Option 3'];
    const quickPick = window.createQuickPick<QuickPickItem>();

    // 初始化界面配置
    quickPick.items = presetOptions.map(label => ({ label }));
    quickPick.placeholder = "选择预设选项或输入自定义内容";
    quickPick.matchOnDescription = true;
    quickPick.matchOnDetail = true;

    // 监听输入变化，动态更新选项列表
    quickPick.onDidChangeValue(inputValue => {
        const updatedItems: QuickPickItem[] = presetOptions.map(l => ({ label: l }));
        
        // 若输入内容非空且不在预设列表中，添加自定义选项
        if (inputValue && !presetOptions.includes(inputValue)) {
            updatedItems.push({
                label: inputValue,
                description: "(自定义内容)",
                detail: "选择此项确认你的自定义输入"
            });
        }

        quickPick.items = updatedItems;
    });

    // 处理用户选择/取消操作
    return new Promise((resolve) => {
        // 用户确认选择
        quickPick.onDidAccept(() => {
            const selected = quickPick.selectedItems[0];
            resolve(selected?.label);
            quickPick.dispose();
        });

        // 用户取消操作
        quickPick.onDidHide(() => {
            resolve(undefined);
            quickPick.dispose();
        });

        quickPick.show();
    });
}

// 使用示例
async function testCustomPick() {
    const result = await showCustomizableQuickPick();
    if (result) {
        window.showInformationMessage(`你选择/输入了: ${result}`);
    }
}

代码说明 #

1. 动态选项更新：当用户输入内容时，我们会检查输入是否属于预设选项，如果不是，就把它作为一个带标记的自定义选项加入列表，用户能直观看到自己的输入并选择。
2. 单步操作：用户不需要先选「新建」再输入，直接输入内容后按回车就能确认自定义值，和选择预设选项的操作流程完全一致。
3. 可扩展性：你可以根据需求自定义自定义选项的样式，比如添加图标、调整描述文字，或者对输入内容做合法性校验。

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