When you are 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. I mean, this can get messy:
Look at all those bloated .js and .js.map files which clutter my otherwise perfectly clean file explorer. Yuck!
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.
Simply start by navigating to: Code > Preferences > Workspace Settings
Next, in the right pane you’ll see the settings.json override file, where you can add the following:
// place your settings in this file to overwrite default and user settings.
{
"files.exclude": {
// include the defaults from VS Code
"**/.git": true,
"**/.DS_Store": true,
// exclude .js and .js.map files, when in a TypeScript project
"**/*.js": { "when": "$(basename).ts"},
"**/*.js.map": true
}
}
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.