How to Hide/Exclude Certain Files from Sidebar in Visual Studio Code?


Currently I'm learning Angular2 and building a test project using Visual Studio Code.  VSCode is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, OS X and Linux.
So what happens while working on Angular2 Project is that we write TypeScript codes. The tsc: typescript compiler generates respective JavaScript Code for our typescript codes. For this single process there are 3 files created which are listed below:

For a typescript file: event-details.component.ts, typescript compiler creates event-details.component.js.map and event-details.component.js. This is two additional files for a single components. Imagine an application with 20 components and 10 services, your side bar will be full of files. Because of similar names you cannot locate your required files easily. 

So in Visual Studio Code, here is how you Hide/Exclude certain files from your sidebar:
  1. Goto File
  2. Click Preferences
  3. Click Settings
    You will see the user Settings and Workspace Settings in your Visual Studio Code Text Editor.
  4. In your text editor add following code:
    "files.exclude": { "**/**.js.**" : true, "**/**.js": true, "**/**-lock.**": true
Above code listed every file with extension .js , js.** (example: *.js.map), *-lock.*(example:config-lock.json) will be hidden from sidepanel.

This small tips will help us refine our sidepanel and also vase much time in finding the right file we want

Related Article: