93

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

Reference: Filter files shown in folder

Gino Mempin
  • 25,369
  • 29
  • 96
  • 135
Matija Grcic
  • 12,963
  • 6
  • 62
  • 90
  • possible duplicate of [Hide .js.map files in Visual Studio Code](http://stackoverflow.com/questions/31587949/hide-js-map-files-in-visual-studio-code) – Brocco Jul 27 '15 at 14:24
  • 1
    Your reference no longer points to anything useful – Chris Nevill Jun 19 '17 at 18:33
  • This has a GUI now! [See my answer.](https://stackoverflow.com/a/55556206/1494454) – totymedli Apr 07 '19 at 06:42
  • 1
    I was looking for something like Xcode's filter feature in the file navigator. Is this not possible in VSCode ? – gprasant Feb 04 '20 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 09 '20 at 16:29

6 Answers6

98

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)

Ruskin
  • 5,721
  • 4
  • 45
  • 62
Matija Grcic
  • 12,963
  • 6
  • 62
  • 90
  • 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. – Rotsiser Mho Dec 13 '15 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 01 '16 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...) – Eric Liprandi Sep 09 '16 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. – pborenstein Sep 19 '16 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`. – Eric Liprandi Sep 19 '16 at 20:11
  • 1
    Although `*/.js.map": {"when":"$(basename).ts"}` won't work since the basename is file.js, this will hide the maps since each map has a corresponding sibling js file: `*/.js.map": {"when":"$(basename).js"}` – John Hamm Dec 27 '16 at 17:21
  • 1
    Simply adding `"**/*.map": true ` in the user settings will hide all map files. Here's my files.exclude setting to exclude javascript and map files for a given TypeScript file `"files.exclude": { "**/*.js": { "when": "$(basename).ts"}, "**/*.map": { "when": "$(basename)"} }` – M.A.Naseer Feb 01 '17 at 16:33
  • What would be the pattern to hide **all** subfolders? – Danijel Dec 05 '18 at 10:49
61

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
PAS
  • 1,791
  • 16
  • 20
  • 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 '21 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. https://code.visualstudio.com/docs/getstarted/userinterface#_explorer – PAS Oct 28 '21 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 01 '22 at 14:09
  • @Snowcrash, you could just use filter mode to narrow the files shown and then click on what you want and switch back to highlight mode or just remove the filter. It would be more intuitive to have input fix for search but that would take some space. – PAS Jun 01 '22 at 14:27
  • 5
    if you use vscode >= v1.7 (after July 2022) Please check the answer https://stackoverflow.com/a/73039128/10655742 -> Use `F3` or `Ctrl + F` – KargWare Aug 10 '22 at 08:45
  • That change drove me crazy! I thought that feature got removed! – yacaFx Aug 10 '22 at 17:30
  • @yacaFx, me too. I think new way is more intuitive. – PAS Aug 11 '22 at 11:46
  • 1
    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 '22 at 02: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
        }
    }
}
Filippos Zofakis
  • 561
  • 6
  • 12
FieryCat
  • 1,875
  • 18
  • 28
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
VonC
  • 1,262,500
  • 529
  • 4,410
  • 5,250
  • 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 '22 at 00:56
  • @RyanMann True, there are still improvements left to be implemented for this feature. – VonC Aug 10 '22 at 04: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 '22 at 08:43
  • It's what i was looking for in recent update of vscode – v1d3rm3 Aug 23 '22 at 13:08
  • doc ref: https://code.visualstudio.com/updates/v1_70#_tree-find-control – Mohamed Allal Aug 23 '22 at 13:12
  • 1
    @MohamedAllal Thank you. I have edited the answer to include your link. – VonC Aug 23 '22 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

Botond Vajna
  • 1,295
  • 1
  • 10
  • 22
-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).

James
  • 1,973
  • 1
  • 18
  • 32