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

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:

vscode-settings-exclude-js-and-map-files

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.