Visual Studio Code: Hiding .js and .map files in a TypeScript project

Currently I am working in an Angular  project and I am using Visual Studio code as my IDE. Also, I am using TypeScript for JavaScript scripting. While working with TypeScript in Visual Studio Code, you often don’t want to see generated JavaScript files and source maps in the explorer or in search results. And as the project grows it really gets messy and it really becomes very tedious to handle.

Luckily, there is a way to hide derived Javascript files in VS Code out of the box. Using a filter expression, we can use the files.exclude setting to hide these derived files.

Navigate to: File-->Preferences-->Workspace Settings

Next in the right pane add the below code:

This will match on any JavaScript file (**/*.js), but only if a sibling TypeScript file with the same name is present. Of course the exclude of *.js.map will hide all appropriate map files. With a result that the file explorer will no longer show derived resources for JavaScript if they are compiled to the same location.