public

Hide .map and .js files in VS Code when doing TypeScript

> Visual Studio Code [https://code.visualstudio.com/] is an open source code editor developed by Microsoft for Windows, Linux and OS X. It includes support for debugging, embedded Git

9 years ago

Latest Post Deferring decisions in Evolutionary Architecture by Tim Sommer public

Visual Studio Code is an open source code editor developed by Microsoft for Windows, Linux and OS X. It includes support for debugging, embedded Git control, intelligent code completion (also known as IntelliSense), and other features. It is also customizable, so users can change the editor's theme, change the editor's keyboard shortcuts, change the editor's preferences, and others.

Ok, so much for the Microsoft marketing speech :).
I replaced sublime with VSCode a while back and I must say I am really impressed by it thus far. It is blazing fast. Not just fast, blazing fast. It has tons of cool features and it  is completely customizable.
VSCode is a small Visual Studio if you will; an IDE that behaves, looks and loads (!) like a source code editor!
If you haven't checked it out yet I strongly advise you to do so now! -don't worry I'll wait a bit before continuing ;)-

Typescript

One of the things I tend to do with VSCode is TypeScript. As you may know, when you're doing TypeScript each '.ts' file gets 'transpiled' into two other files. So you'll have a '.map' file, a '.ts' file and a '.js' file. When you're programming you are only interested in the '.ts' file though, the others just clutter up your workspace.
Here's how you make VSCode hide these file:

Edit the user (or workspace) settings by clicking File > Preferences.

VS Code Preferences

You should get two views. The left (read-only) view contains the default settings while the right contains settings that override the default ones. So you change settings by copying them from the left to the right.

Paste the following json configuration in the right view:

"files.exclude": {
   "**/.git": true,
   "**/.DS_Store": true,
   "**/*.js.map": true,
   "**/*.js": {"when": "$(basename).ts"}
}

This will hide '.js.map' files all-together (don't need them) and hide '.js' files that have corresponding '.ts' files.

Tim Sommer

Published 9 years ago

Comments?

Leave us your opinion.