How to hide JavaScript and map files when working with TypeScript in VS Code

So I began looking at Angular and TypeScript the other week and decided to use the most excellent editor Visual Studio Code for my work. Very quickly though the explorer in the sidebar started to fill up with all these extra files that I really didn’t need to see. All I was interested in was the source files – the .ts files, but when TypeScript is compiled you get both a .js and a .js.map file as well. Even though the compiled files can be very interesting to look at they don’t really serve a purpose for development, so let’s hide them!

Go to the settings in VS Code:

Mac: Code > Preferences > Settings or Cmd + ,

Windows: File > Preferences > Settings

This lands us in a split pane view for the settings.json file. On the left you will see a huge JSON object with hundreds of default settings, and on the right an empty object (unless you’ve already configured some custom settings). If you want to override the default settings in the left view you simply copy them to the right view and change them to whatever you fancy. If you make you edits in the “user settings” document the changes will apply globally to any instance of VS Code you open. If you edit the “workspace settings” document the settings will be stored in a hidden folder in the workspace you are currently in, and override any global settings.

In order to hide files in the explorer, we’re going to look at the property "files.exclude". If you can’t find it, use the search box at the top of the window.

The default settings for "files.exclude" are:

"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true
},

This hides a bunch of system files, and files related to version control. Each row is an object property where the name is a pattern and the value indicates whether files matched by the pattern should be hidden or not. For example, the first row says “In any folder, if you find a file or folder named ‘.git’ exclude that from the explorer”.

Copy all of this to the right side, and let’s add some additional patterns in order to hide the files we want. Start with an easy one:

"**/*.js.map": true,

This will hide any file ending in .js.map in any folder. I can’t think of an instance where you would ever want to edit a map file in an editor, so I choose to hide all of these files all the time. Now for the JavaScript files, you could add the following line to the configuration:

"**/*.js": true

But hold the flippin’ phone! Hiding all js files in all folders all the time? That’s crazy, I edit js files all the time, you say, I can’t hide them away! Not even if I do it in the workspace settings, because I might want to use both ts and js files in the same project!

Indeed, you are correct. If only there was a way to hide js files, but only if there are ts files in the same folder with the same names…

There is, of course, a solution. Instead of setting the value of the property to true, VS Code allows us to set it as an expression. They really thought of everything, didn’t they? So, set the last row of the config to this instead:

"**/*.js": { "when": "$(basename).ts"}

Save the settings file, and voila, no more messy clutter in the file explorer, and you are free to work on your TypeScript projects to your heart’s extent.

Here’s the final configuration:

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

Sources:

Leave a Reply

Your email address will not be published. Required fields are marked *