93

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

Reference: Filter files shown in folder

5
  • possible duplicate of Hide .js.map files in Visual Studio Code
    – Brocco
    Jul 27, 2015 at 14:24
  • 1
    Your reference no longer points to anything useful Jun 19, 2017 at 18:33
  • This has a GUI now! See my answer.
    – totymedli
    Apr 7, 2019 at 6:42
  • 1
    I was looking for something like Xcode's filter feature in the file navigator. Is this not possible in VSCode ?
    – gprasant
    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 :)
    – Mladen B.
    Oct 9, 2020 at 16:29

6 Answers 6

99

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)

9
  • 11
    In case anyone coming across this is as confused as I was, this is a Visual Studio Code user setting, not a project setting. Dec 13, 2015 at 15:55
  • 3
    "when" is really usefull - unfortunately it doesn't work for my map files like "*/.js.map": { "when": "$(basename).ts"}
    – ESP32
    Jun 1, 2016 at 15:04
  • 5
    @Gerfried, FWIW, if you use {"when": "$(basename)"}, then your .js.map will not show. (notice I did not set an extension...) Sep 9, 2016 at 22:27
  • 1
    @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. Sep 19, 2016 at 19:52
  • 3
    @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. Sep 19, 2016 at 20:11
63
+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+F or F3 to search.
  3. Type the text you want to search
8
  • 1
    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
    Oct 27, 2021 at 20:22
  • 2
    @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
    – PAS
    Oct 28, 2021 at 17:42
  • 5
    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.
    – Snowcrash
    Jun 1, 2022 at 14:09
  • 5
    if you use vscode >= v1.7 (after July 2022) Please check the answer stackoverflow.com/a/73039128/10655742 -> Use F3 or Ctrl + F
    – KargWare
    Aug 10, 2022 at 8:45
  • 2
    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
    – icetbr
    Aug 15, 2022 at 2:05
26

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
        }
    }
}
4
  • 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
    Apr 27, 2018 at 1:08
  • @lordhog, only if the file hasn't been created yet
    – FieryCat
    Apr 27, 2018 at 13:54
  • can the @settings section be at the level of each individual folder? Jul 8, 2021 at 13:04
  • @AlexGordon, in case, you're opening that folder from VSCode, otherwise would be ignored.
    – FieryCat
    Jul 9, 2021 at 14:55
18

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
6
  • 6
    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....
    – Ryan Mann
    Aug 10, 2022 at 0:56
  • @RyanMann True, there are still improvements left to be implemented for this feature.
    – VonC
    Aug 10, 2022 at 4:57
  • 2
    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
    – KargWare
    Aug 10, 2022 at 8:43
  • It's what i was looking for in recent update of vscode
    – v1d3rm3
    Aug 23, 2022 at 13:08
  • 1
    @MohamedAllal Thank you. I have edited the answer to include your link.
    – VonC
    Aug 23, 2022 at 19:16
12

"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

1
  • 14
    This looks like it could be great, but if folders aren't expanded, then they aren't included when I tested this. Mar 21, 2021 at 3:15
-1

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).

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.