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 file explorer.

Is it possible to display only the .ts files in the file explorer?

Answer 1

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 2

I found this, If you have standard JS files then these will be hidden too which may not always be what you want. Perhaps this is better as it only hides JS files that match TS files...

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

Answer 3

I really don't know how this is implemented but for hiding .js files works:

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

For hiding .js.map files works:

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

Answer 4

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

Answer 5

John Papa Twitter LINK says use the following:

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

Answer 6

From the official doc:

to exclude JavaScript files generated from both .ts and .tsx source files, use this expression:

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

This is a bit of a trick. The search glob pattern is used as a key. The settings above use two different glob patterns to provide two unique keys but the search will still match the same files.

UPDATE 10/3/2017: with this trick we have a problem with "search in folder". Please see the issue

Answer 7

1. Go to preferences > settings

2. Click on "Edit on settings.json" (It's on the bottom of the image)

3. Update the object json as you can see in the image. Then save your changes Ctrl + S and that's all.

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

Answer 8

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 9

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 10

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 11

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 12

There is still no official solution for excluding a file glob based on two different conditions. See this issue.

There is a workaround though, to define two different glob patterns which target the same files:

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