Visual Studio Code - hide *.js.map files

In this short article we would like to show how to configure VS Code to hide *.js.map files.

VS Code provies two modes for settings view: UI and JSON. Below steps show how to use JSON mode.

Do following steps:

1. open setting:
   File -> Preferences -> Settings,
   or shortcut: ctrl+,
2. in top right corner click Open Settings (JSON) icon,
3. paste following configuration line inside "files.exclude" property:

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

Full configuration example (settings.json file):

{
    "window.zoomLevel": 0,
    "workbench.iconTheme": "vscode-great-icons",
    "files.exclude": {
        "**/*.js.map": true
    }
}

TypeScript map files

This section contains configuration examples for both UI and JSON modes. 

When TypeScript files are used (*.ts or *.tsx) we need to ignore 2 type of files: *.js and *.js.map.

Using Settings in JSON mode example

Use following fonfiguration to ignore complied files in Settings in JSON mode:

{
    "window.zoomLevel": 0,
    "workbench.iconTheme": "vscode-great-icons",
    "files.exclude": {
        "**/*.js.map": true,
        "**/*.js": {"when": "$(basename).ts"}
    }
}

or

{
    "window.zoomLevel": 0,
    "workbench.iconTheme": "vscode-great-icons",
    "files.exclude": {
        "**/*.js.map": true,
        "**/*.js": {"when": "$(basename).tsx"}
    }
}

Using Settings in UI mode example

Hint: use exclude keyword in Search settings field to go to Files: Exclude section.

Screenshot from Settings in UI mode: