How to filter files shown in Visual Studio Code?

How would you filter the files shown in the folder view in Visual Studio Code?

Reference: Filter files shown in folder

54998 次浏览

Hiding files and folders

The files.exclude setting lets you define patterns to hide files and folders from several places in VS Code like the explorer and search. Once defined, files and folders matching any of the patterns will be hidden.

{
"files.exclude": {
"**/*.js": true
}
}

Hide derived resources

If you use a language that compiles to another file at the same location of the source file, like TypeScript does to JavaScript, you can easily set an expression to hide those derived files:

"**/*.js": { "when": "$(basename).ts"}

Such a pattern will match on any JavaScript file (**/*.js), but only if a sibling file with the same name and extension, *.ts in this example, is present. The same technique can be used for other transpiled languages, like Coffee Script or Less/Sass, too.

Source: VS Code v0.5.0 (July 2015)

If you only want to change the setting for this project, then do the following:

File > Save Workspace As > ... enter your {project name}

Then open file: {project name}.code-workspace And update section settings.

Sample:

{
"folders": [
{
"path": "."
}
],
"settings": {
"files.exclude": {
"**/*.log": true
}
}
}

"With the focus on the File Explorer start to type part of the file name you want to match.You will see a filter box in the top-right of the File Explorer showing what you have typed so far and matching file names will be highlighted."

"Hovering over the filter box and selecting Enable Filter on Type will show only matching files/folders."

documentation: https://code.visualstudio.com/docs/getstarted/userinterface#_filtering-the-document-tree

In version after VScode 1.70 (July 2022) all you need to do is press Ctrl+F or F3 to search.

Please refer following post Searching in Explorer panel after VSCode 1.70

Only applicable for v1.69 and below.

Step #1

Click on Explorer window. This is critical as without focus on Explorer it will not work.

enter image description here

Step #2

Start Typing name you want to filter. It's weird that there is no textbox to take input but... take a leap of faith and type. You will see your typed text in top-right corner in brown background. Now hover on that text.

enter image description here

Step #3

Click on 3 stacked lines to filter..

enter image description here

They look like hamburger menu but they are not. They are saying if it's filtered or not. They are toggled between filtered and just highlight. So, make sure they are like inverted pyramid.

enter image description here

That's it. It should be filtered now.

VScode 1.70 (July 2022) should improve on this "tree filter" feature.
(Available today in Code insiders)

See issue 70646 and PR 152481:

Support find widget in lists/trees

This PR replaces the existing list/tree type filter:

old

with an bona fide find widget:

new -- https://user-images.githubusercontent.com/22350/179354305-66d6a9cf-c74d-4f79-903e-ee501a6f41fc.png

While a seemingly simple change, this has some (desired) consequences when searching/filtering in trees. Namely:

  • We will restore simple keyboard navigation by default.
    That is: pressing the letter A will focus the next element which starts with A.
  • Initiating a search operation requires pressing Ctrl-F or F3, like the editor.
  • While searching, focus is in the find input box as opposed to the list itself.
    Pressing DownArrow will focus the first list element which was found.
  • We'll preserve all custom behavior of context keys, eg. used by the VIM extension).
    In VIM, the pre-existing / command will trigger simple keyboard navigation, as opposed to opening the find widget.
    The VIM extension has the option to change this behavior themselves.

And:

In general:

  • Keyboard navigation is now called type navigation
  • Filter on type is now called find mode, aligned with a new find concept

Settings

  • workbench.list.keyboardNavigation has been renamed to workbench.list.defaultFindMode
  • workbench.list.automaticKeyboardNavigation has been deleted

Commands

  • list.toggleKeyboardNavigation has been renamed to list.triggerTypeNavigation
  • list.find has been added
  • list.closeFind has been added
  • list.toggleFilterOnType has been renamed to list.toggleFindMode

Context Keys

Mainly used by the vim extension:

  • listSupportsKeyboardNavigation has been renamed to listSupportsTypeNavigation
  • listAutomaticKeyboardNavigation has been renamed to listTypeNavigationMode