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: 

1. Why Visual Studio Code?
2. Microsoft and Open Source Technologies
3. How to run any chrome app as Desktop App in Windows10

 Free. Open source. Runs everywhere.

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, OS X and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Python, PHP) and runtime. Visual Studio Code is one of the greatest committed open source project on Github by Microsoft. 

Owner: Microsoft

Github: vscode

Why Visual Studio Code?

VS CODE provides development environment for most of the programming languages which follow Open Specification (technical standard) known as Common Language Insfastructure(CLI) 

VSCode is lightweight. Comparing it with the Visual Studio it has many pros which promises developers to dive into it.

Visual Studio	2015(V14.0)	CODE
Software Size	1.9GB	54MB

Visual studio Code consists of three components:

1. Side Panel
   Here we can see the tree structure of your project. We see a search icon where we can perform advance search in files as well as folders. Visual Studio has integrated Git where we see the change in file immediately. We can perform every git operation that can be done from other git application. We can browse extensions and download from side panel too.
2. Text Editor
   This is where you do all the coding stuffs. The color customization and Theme Selection from VSCode is pretty straight forward. You can split the screen and see multiple text editors.
3. Terminal
   Here we build and run the project. Once we run the program from terminal it fetches and downloads all the necessary referenced library online while building the project.

You can perform all other activities that you do from Visual Studio 2013, 15, 17 and other IDEs.

This can be a major alternative of Visual Studio IDEs where you need to buy the licence key and also need ore space and memory to execute it. VS CODE mimics the Command Line Interface implementation of developing and deploying a project. So this could be a good tool for software development.  

Because it's free   . Free as in you can view and customize the source code. Do you believe that Microsoft launched a software for free? Means it's worth it.

I use visual studio code for web app development in ASP.NET MVC Framework, Angular2. 

Explore more about Visual Studio Code.

Related Articles:

1. Why Visual Studio Code?
2. Microsoft and Open Source Technologies
3. How to run any chrome app as Desktop App in Windows10