Filtering a Treeview

Question

I'm new to TypeScript and the VS Code API. I'm looking to learn and am creating an extension that I've wanted a long time in order to do so. I managed to create the functionality I needed (basically a filename filter) using a WebView but I'd prefer using treeview. Here's what I've got:

Unfiltered file list

Filtered file list

Ideally, I'd like to create this:

Is this currently possible and what keywords do I need to research to make it happen?

Thanks

[Document tree filtering](https://code.visualstudio.com/docs/getstarted/userinterface#_filtering-the-document-tree) seems to work with other TreeViews... would that work? — waldente, Jul 05 '21 at 01:25
Mayyybe! Maybe I can use my own Search to send values to that filter! Thank you, I'll take a look. — Chrissy LeMaire, Jul 05 '21 at 10:35
Would [VSCode 1.70 (July 2022)](https://stackoverflow.com/a/73039128/6309) help? — VonC, Jul 19 '22 at 14:55

score 1 · Answer 1 · answered Jul 19 '22 at 16:12

See the demo at https://stackoverflow.com/a/73039858/836330 of filtering in a TreeView. It is not part of the extension-available api though. You could trigger it in an extension with

await vscode.commands.executeCommand('workbench.files.action.focusFilesExplorer');
await vscode.commands.executeCommand('list.find');

but looking at the commit for this functionality I don't think there is any way to populate that find input from an extension - I don't think the command list.find takes any arguments. I tried a couple of ways like

await vscode.commands.executeCommand('list.find', {text: 'findMe'});
await vscode.commands.executeCommand('list.find', {query: 'findMe'});

Other find functionality in vscode can take arguments, but this filtering a treeView is brand new and will probably need a feature request if you want to populate the find input programmatically.

Filtering a Treeview

1 Answers1