VSCode 使用带有描述的快速选择列表项答案

【问题标题】：VSCode use quickpick list items with descriptionVSCode 使用带有描述的快速选择列表项
【发布时间】：2020-09-30 10:06:57
【问题描述】：

我创建了带有 quickpick 的 vscode 扩展，快速选择显示项目列表

const pick = await input.showQuickPick({
            title,
            step: 1,
            totalSteps: 3,
            placeholder: 'Choose runtime',
            items: Runtimes,
            activeItem: typeof state.resourceGroup !== 'string' ? state.resourceGroup : undefined,
            // buttons: [createResourceGroupButton],
            shouldResume: shouldResume
        });

现在我可以显示用户可以选择的数据列表

aaaa
bbbb
cccc

我的问题是否有办法显示带有名称和描述的数据？

喜欢

aaaa            desc for aaaa  
bbbb            desc for bbbb
cccc            desc for cccc

我的意思是在列表中添加其他信息？可能是关键值 https://code.visualstudio.com/api/references/vscode-api#QuickPick

如果不能，请告诉我

例如 test1/2 是我要添加到每个条目的值

【问题讨论】：

标签： javascript node.js typescript visual-studio-code vscode-extensions

【解决方案1】：

VSCode showQuickPick 可以将string[]（字符串数组）或QuickPickItem 数组作为项目。我想你正在寻找QuickPickItem。

检查VSCode examples，其中显示了QuickPickItem 的用法。

结果如下所示：

地点：

最左边的字符串是label
最右边的字符串是description
左下角的字符串是detail

提供的默认快速选择的外观不允许向左或向右浮动标签，它们都是左对齐并遵循 LTR 布局。

附：您可以尝试window.createQuickPick，但它再次让您可以更好地控制弹出窗口，而不是弹出窗口的样式。

【讨论】：