Show hidden files in VSCode

by

Do you want to view hidden files and directories in VSCode?

VSCode is a lightweight yet complete code editor which runs on all major platforms. It is bundled with stellar support for many programming languages (such as C++, C#, Java, Python, PHP, Go). In addition to that, VSCode is extendable through its huge extensions library.

Like many other code editors, VS Code adopts a common user interface of a sidebar on the left showing all of the files and folders you have access to, and tabbed editor space on the right, showing the files content.

By default, VSCode hides a few folders/directories that people don’t edit manually, such as .git or .DS_Store.

Sometimes, we need to inspect the contents of .git directory, or change something in .git/config, doing so right inside VSCode would be more convenient. This article is a step by step tutorial on how to show hidden files in VSCode sidebar, as well as tricks to improve productivity.

Contents hide
1 Show hidden files/directories in VSCode sidebar
2 Toggle hidden files on/off in VSCode

Show hidden files/directories in VSCode sidebar

VSCode uses the files.exclude in settings.json to control the list of files and directories that should be hidden. In order to change that, follow the steps below.

  1. Open up VSCode and press Ctrl + Shift + P to open Command Palette.
  2. Type in "settings" and select Preferences: Open Settings (UI).image-20210525093426271
  3. Search for "files.exclude". Files: Exclude will show up with a list of hidden by default folders. The default list includes .git, .svn, .hg, CVS, .DS_Store directories. In this example, we want to show .git, so you need to click into its name, then select its X button.image-20210525093358735
  4. Now you can see .git is already show up in the sidebar.image-20210525101344662

Toggle hidden files on/off in VSCode

If you constantly need to show/hide files every once in a while, removing directories from VSCode Settings simply takes too many steps to be productive.

In that case, Toggle Excluded Files is the extension that you need. As its name implies, the extension adds a button in VSCode status bar as well as a command in the Command Palette which allows you to quickly enable/disable files.exclude flag.

To be able to use the extension, you need to specifically set up files.exclude in your settings.json. Please read our blog post about settings.json for more information.

  1. First, install the extension from VSCode Marketplace. Click the Marketplace button in the sidebar, search for "Toggle Excluded Files" and install it. The extension works out of the box without needing VSCode to reload/restart.image-20210525103924104

  2. Open up Settings in JSON mode using the Command Palette. Add the following lines inside the brackets. This is the default settings for files.exclude flag. The extensions only have access to user settings, so what we do here is putting default settings into the user settings, enabling the Toggle Excluded Files extension to quickly switch it to true and false at will.

       "files.exclude": {
       "**/.DS_Store": false,
       "**/CVS": false,
       "**/.git": true
   }

    The settings.json file should look something like this (notice the last element does not have a comma in the end)

    image-20210525104510740

  3. Now the extension is enabled. You can use the "eye" button in VSCode status bar to enable/disable files.exclude. Alternatively, running Toggle Excluded Files from the Command Palette achieves the same effect.bJrgULRs5A-min

If you find the article above interesting, here’s a few other tutorials for VSCode written by us:

Leave a Comment