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 Application 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 hide 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 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 files path.

Similarly, You can directly add using settings.file

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

To hide .git folder recursively

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