microsoft
file icons for QuickPickItem
It would be great if the QuickPickItem also can specify an icon as well as a file icon from the file icon themes.
+1 for this.
I am aware this is an old and stale feature request but what happened to this? I see it's still open and no further comments have been posted.
We allow a custom TreeView to define a resourceUri for the TreeItem. It that's set the item will get the icon that matches that the given resource.
We should add a similar API for QuickPickItem
I would love to see this feature added. To elaborate on my use-case: I'm working on QuickPick component to open files for a custom FileSystemProvider. The QuickPick component for my file systems is very difficult to use compared to the native Go to file... command because the file extension icons are missing. I have implemented a tree view via TreeDataProvider and it looks and feels almost native thanks to resourceUri.
+1, I've been waiting for this feature for a long time. My use-case, I'm working on a ScratchPads extension that allows you to open a scratchpad file outside your code keeping your code clean. When the user wants to open a scratchpad he can select the file type of the file and I'd really like to show the file type icon as well.
Would love to see this as well, just hit this as part of a QuickPick extension I'm writing.
I can see GitHub Copilot extension already do that. How can we do like this?
This is not the Copilot extension, but VS Code core (for all AI extensions)
Copilot does use VSCode core API. But this dialog is not Copilot, but part of VS Code (core) (to be used by any 'Chat' extension)
Thanks, @aeschli. I would like to do what Copilot do and arrived here. I don't know how Copilot is doing that but is this issue targeting like that for all extensions?
PR: https://github.com/microsoft/vscode/pull/271243
Proposed API: src/vscode-dts/vscode.proposed.quickPickItemResource.d.ts
declare module 'vscode' {
// https://github.com/microsoft/vscode/issues/59826
export interface QuickPickItem {
/**
* The {@link Uri} of the resource representing this item.
*
* Will be used to derive the {@link label}, when it is not provided (falsy or empty).
* Will be used to derive the icon from current file icon theme, when {@link iconPath} has {@link ThemeIcon.File} value.
*/
resourceUri?: Uri;
}
}
This enables extensions to supply resources as quick pick items. It follows the same pattern and semantics as resourceUri in TreeItem - i.e. iconPath/label/description of items with specified resourceUri will be derived from the resource (unless those properties are set to non-falsy values).
One difference from TreeItem is that label property on the QuickPickItem cannot be made optional without introducing breaking changes to extension code which inspects said values. This will lead to user having to specify an empty label (label: '') even when resourceUri is also present. The alternative is to introduce entirely new interface (e.g. QuickPickItemWithResource) which will duplicate all properties from QuickPickItem and make label optional. The new type will have to be propagated throughout existing quick pick API leading to rather cumbersome situation. It will also add maintenance cost as every property on QuickPickItem will now have to be supported in both interfaces. I suggest we do not follow this approach.
Example usage:
await window.showQuickPick(
[
{
label: '',
iconPath: ThemeIcon.File,
resourceUri: vscode.Uri.parse('file:///usr/home/help.md')
},
{
label: '',
iconPath: ThemeIcon.File,
resourceUri: vscode.Uri.parse('file:///usr/home/script.sh')
}
],
{ placeHolder: 'Pick a file' }
);
