VS Code: Hide Specific Files/Folders from the Left SIdebar

Last updated on September 7, 2021 A Goodman Loading... Post a comment

This article shows you 2 ways to hide some specific files/folders from the left-hand file explorer in VS Code (Visual Studio Code). The first approach is to use the GUI (graphic user interface) and the second one to create a file named settings.json.

Using GUI

1. Go to the “Settings” page:

  • Windows: File > Preferences > Settings (hotkeys: Ctrl + ,)
  • Mac: Code > Preferences > Settings (shortcuts: Command + ,)

2. Type “files:exclude” into the search field then head to the “Files: Exclude” section that appears as the search result. (If you want to make changes for just a single project, select the “Workspace” tab instead of the “User” tab).

3. Click on the “Add Pattern” button and declare the file types or folders you want to hide. For example: **.lock, **.txt, node_modules, etc.

Live demo:

Manually create a settings.json file

Create a folder named .vscode and in the root directory of your project then create a file named settings.json inside that folder (the names are mandatory).

List the patterns of files and folders you want to hide. For example:

{
  "files.exclude": {
    "**/*.tsx": true, 
    "**/*.css": true,
    "**/*.json": true,
    "node_modules": true
  }
}

Screenshot:

Final Words

We’ve gone through a couple of different ways to dismiss some files/folders from the left file-explorer in VS Code. If you want to discover more things in VS Code, take a look at the following articles:

If you have any questions, feel free to leave a comment. I will do my best to help.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles