Hide .js.map files in Visual Studio Code: File Nesting

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

In v1.67 (see https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_67.md):

Explorer File Nesting

The explorer now supports nesting related files based on their names. There are several settings to control this behaviour:

• explorer.fileNesting.enabled: Controls whether file nesting is enabled at-large. It can be set either globally or for a specific workspace.
• explorer.fileNesting.expand: Controls whether nested files are expanded by default.
• explorer.fileNesting.patterns: Controls how files are nested. The default configuration provides nesting intelligence for TypeScript and JavaScript projects, but you're encouraged to modify this to fit your own project's structure. Some examples:

Default configuration:

Nesting under index.ts when a file matches the directory's name ("index.ts": "${dirname}.ts"):

Nesting files that have the same name as a different file but with an added segment ("*": "${basename}.*.${dirname}"):

Those following closely my recall this has been an experimental setting for several iterations. The behavior now is mostly unchanged, with the expeption of file operations. The experimental setting explorer.experimental.fileNesting.operateAsGroup has been removed in favor of treating nests as a group when collapsed, but as single entities otherwise. This means that if you want to copy, cut, drag, or delete an entire nested stack of files, you can collapse the nest then operate on it as a single entity. When non collapsed, selections will behave as normal.

---

Previous answer:

There is a new, currently experimental, feature in the Insiders Build v1.64 called File Nesting which although it will not hide auto-generated files, it will nest them in a collapsed state if you wish under the parent file from which the related files were generated. If possible, you should test your case in the Insiders Build now.

So with this modification to the File Nesting: Patterns :

"*.ts": "$(capture).js, $(capture).d.ts, $(capture).js.map" you can achieve what the OP requested easily. Demo:

File Nesting will not hide those nested files from searches.

Answer 13

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"}
    }
}