Hide .js.map files in Visual Studio Code

Question

I am working on a typescript project in Visual Studio code and would like to hide the .js.map (and maybe even the .js) files from appearing in the

Answer 1

Maybe it's better to hide .map and .js files when they match their corresponding .ts file.
You can do that by copying the following lines in VS User Settings (Preferences > User Settings):

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

Answer 2

In your settings (either user or workspace) there is a setting that you can tweak to hide anything you'd like:

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

So you can add in the following to hide .js and .js.map files

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

As this other answer explains, most people probably only want to hide .js files when there is a matching .ts file.

So instead of doing:

"**/*.js": true

you might want to do:

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

Answer 3

In VS Code go to Code (or File for Windows users) > Preferences > Workspace Settings and add this code snippet:

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

Answer 4

Please add the following lines in "User Settings" panel in order to override "Default Settings". You can hide files {basename}.js and {basename}.js.map when you create file as {basename}.ts.

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

Answer 5

Add these settings to your settings.json in your .vscode folder

// Place your settings in this file to overwrite default and user settings.
{
    "files.exclude" :{
    "**/.git":true,
    "**/.DS_Store":true,
    "**/*.map":true,
    "**/app/**/*.js":true

    }
}

If the settings.json is not available click on File ---> Preferences --> Workspace Settings.

Answer 6

When you are working with TypeScript, you often don’t want to see generated JavaScript files in the explorer or in search results. VS Code offers filtering capabilities with a files.exclude setting (File > Preferences > Workspace Settings) and you can easily create an expression to hide those derived files:

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

Similarly hide generated .map files by:

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

So you will have a configuration like in:

settings.json

// Place your settings in this file to overwrite default and user settings.
{
    "files.exclude": {
        "**/*.js": { "when": "$(basename).ts"},
        "**/*.js.map": { "when": "$(basename)"}
    }
}

Link: https://code.visualstudio.com/docs/languages/typescript#_hiding-derived-javascript-files