Sometimes, We want to hide the files or folders in a source code application opened in the Visual Studio code sidebar.

For example, the following are different types of folders or files that you want to hide.

  • node_modules folder in Node Applications such as Angular, React, and Vuejs
  • dist in Single page applications
  • target in maven applications
  • .gitignore for git ignore files.
  • .git files

Visual Studio code hides files and folders from the sidebar

  • Open Visual Studio Code
  • Go to File > Preferences > Settings
  • Opened the settings page
  • type “files:exclude” in search settings
  • In Files:Exclude Section, Click on the Add Pattern button
  • It enables the input box and types folder or file name inside it. Click OK to save it.
  • Inside the text box, you can add folders, files, or regular expressions to point to the path of the file.

Similarly, You can directly add using settings.file

  • Open File> Preferences > Settings> select workspace tab
  • open the workspace settings file, that was created in your project opened in VSCode
  • It opens .vscode/settings.json file
  • update the below things To hide the node_modules folder
"files.exclude": {
    "node_modules/": true
}

To hide the .git folder recursively

"files.exclude": {
    "**/.git*": true
}