115

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

Reference: Filter files shown in folder

Improve this question
2
  • 1
    I was looking for something like Xcode's filter feature in the file navigator. Is this not possible in VSCode ? Commented Feb 4, 2020 at 22:14
  • 1
    This question was confusing for me. I expected to see a reference to how to enable a search box or something to filter files displayed in the explorer, as I type :) Commented Oct 9, 2020 at 16:29

6 Answers 6

Reset to default
109

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)

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

In case anyone coming across this is as confused as I was, this is a Visual Studio Code user setting, not a project setting.
"when" is really usefull - unfortunately it doesn't work for my map files like "*/.js.map": { "when": "$(basename).ts"}
@Gerfried, FWIW, if you use {"when": "$(basename)"}, then your .js.map will not show. (notice I did not set an extension...)
@EricLiprandi Why is that? I don't see any explanation of what exactly basename does, and the $(basename) gives the impression it's the command, but clearly it's not.
@pborenstein, I don't know where this is documented. I just tried. The logic is that $(basename) is the name of the file without the extension. The extension of file.js.map is .map, so its basename is file.js.
|
91
+250

In version after VScode 1.70 (July 2022) all you need to do is

  1. Click on explorer pane to get it in focus
  2. Press Ctrl+Alt+F to search.
  3. Type the text you want to search
  4. Optionally you can click filter icon to just see filtered results instead of highlighted.
Improve this answer

10 Comments

how do i filter by ending? i only want to see .tex files, but the directory also contains files ending in .synctex.gz. these are matched by .tex because the letters matched don't even have to be consecutive in the filename. how can I refine that?
@user313032, I don't think there is any way to avoid this. It just matches characters even if they are apart. Here is official documentation. code.visualstudio.com/docs/getstarted/userinterface#_explorer
I like VS Code. But this is the most badly designed feature I've used in it. e.g. 1. typing with the Explorer view highlighted - who thought this was a good idea?! 2. I can filter by directory name but then can't see any of the files in that directory making the feature pretty useless.
if you use vscode >= v1.7 (after July 2022) Please check the answer stackoverflow.com/a/73039128/10655742 -> Use F3 or Ctrl + F
This only works for files you can see. My workaround, I search a regex matching the beginning of a file. Ex: I want to see all readme files from my projects: CTRL + SHIFT + F => ALT + R => paste regex ^(?<!\n) => files to include README.MD
|
28

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 } } }
Improve this answer

6 Comments

with this solution, does it mean when open a folder for editing (i.e., project) that I would need to manually perform a "Open Workspace" action then select the {project name}.code-workspace file?
@lordhog, only if the file hasn't been created yet
can the @settings section be at the level of each individual folder?
@AlexGordon, in case, you're opening that folder from VSCode, otherwise would be ignored.
@lordhog alternatively you can just open the code-workspace file directly
|
23

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
Improve this answer

6 Comments

I was excited, but then I realized it will only filter down to files I have in view in expanded folders. If the folders are collapsed it doesn't show those files.... Sad....
@RyanMann True, there are still improvements left to be implemented for this feature.
The hint Initiating a search operation requires pressing Ctrl-F or F3, like the editor. made my day - I was just navigating but not filtering just by typing. MANY THANKS
It's what i was looking for in recent update of vscode
@MohamedAllal Thank you. I have edited the answer to include your link.
|
11

"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

Improve this answer

1 Comment

This looks like it could be great, but if folders aren't expanded, then they aren't included when I tested this.
3

This doesn't exactly answer your question as it is stated, because there just isn't a way to do that afaik.

However, if you want to locate a particular file within the opened folder, given a partial name or its extension: the best way to do that is to use Ctrl+P and start typing.

Example: note it is showing .xml files with the string faction in its name enter image description here

I have tried several times to make use of the explorer panel, and always come to the conclusion id rather use windows explorer (which you can quickly get to by via right click and open folder on an open document tab).

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.