在 Visual Studio Code 中隐藏 .js.map 文件答案

【问题标题】：Hide .js.map files in Visual Studio Code在 Visual Studio Code 中隐藏 .js.map 文件
【发布时间】：2015-10-13 19:02:28
【问题描述】：

我正在使用 Visual Studio 代码编写一个打字稿项目，并希望隐藏文件资源管理器中出现的 .js.map（甚至可能是 .js）文件。

是否可以在文件资源管理器中只显示.ts 文件？

【问题讨论】：

标签： typescript visual-studio-code vscode-settings

【解决方案1】：

在您的设置（用户或工作区）中有一个设置，您可以调整它以隐藏您想要的任何内容：

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

因此您可以添加以下内容以隐藏 .js 和 .js.map 文件

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

作为this other answer explains，大多数人可能只想在有匹配的.ts 文件时隐藏.js 文件。

所以不要这样做：

"**/*.js": true

你可能想这样做：

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

【讨论】：

完美解决方案。另外，我怀疑许多对此感兴趣的用户也会对隐藏 node_modules 目录感兴趣。可以这样做："**/node_modules/": true
是否有停用/激活 files.exclude 配置选项的快捷方式？有时我想检查隐藏的东西
"**/*.js": {"when": "$(basename).ts"},"**/*.map": {"when": "$(basename).map"}
@aaalsubaie 要激活/停用文件排除过滤器，MarketPlace 中有一个扩展可用，地址为 marketplace.visualstudio.com/items?itemName=nwallace.peep
"**/*.map": {"when": "$(basename).map"}和"**/*.map": true一样吗？

【解决方案2】：

我发现了这个，如果你有标准的 JS 文件，那么这些文件也会被隐藏，这可能并不总是你想要的。也许这更好，因为它只隐藏与 TS 文件匹配的 JS 文件...

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

【讨论】：

你能发布一个链接到记录的地方吗？我想使用更复杂的“何时”形式，但找不到它的记录位置。
隐藏派生的 JS 文件记录在这里：code.visualstudio.com/docs/languages/…
如何在编译和缩小 scss 后对 .js.map 文件或“.min.css”进行相同的“何时”模式匹配？他们没有被 $(basename) 匹配
这很聪明，但不适用于 angular 2 之类的东西。所有东西都被命名为 file.component.ts 或 file.module.ts
ts文件在不同的文件夹怎么办？

【解决方案3】：

我真的不知道这是如何实现的，但隐藏 .js 文件有效：

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

对于隐藏.js.map 文件有效：

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

【讨论】：

此解决方案还处理.js.map，因为Visual Studio Code 似乎将$(basename) 解释为在最终. 之前的所有内容。可以简化为 "**/*.map: {"when": "$(basename)"}，但这将排除 any .map 具有相应非.map 文件的文件。

【解决方案4】：

使用 TypeScript 时，您通常不希望在资源管理器或搜索结果中看到生成的 JavaScript 文件。 VS Code 通过files.exclude 设置（File > Preferences > Workspace Settings）提供过滤功能，您可以轻松创建表达式来隐藏这些派生文件：

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

同样隐藏生成的.map 文件：

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

所以你会有这样的配置：

settings.json

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

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

【讨论】：

【解决方案5】：

John Papa Twitter LINK 说使用以下内容：

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

【讨论】：

【解决方案6】：

来自official doc：

排除从 .ts 和 .tsx 源生成的 JavaScript 文件文件，使用这个表达式：

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

这有点小技巧。搜索 glob 模式用作键。上面的设置使用两个不同的 glob 模式来提供两个唯一键，但搜索仍会匹配相同的文件。

2017 年 10 月 3 日更新：使用这个技巧，我们遇到了“在文件夹中搜索”的问题。请看issue

【讨论】：

这里有another workaround。我在下面发布了它作为答案。

【解决方案7】：

1.转到首选项 > 设置

2。点击“Edit on settings.json”（在图片底部）

3.如您在图像中看到的那样更新对象 json。然后保存您的更改Ctrl + S，仅此而已。

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

【讨论】：

【解决方案8】：

请在“用户设置”面板中添加以下行以覆盖“默认设置”。当您将文件创建为 {basename}.ts 时，您可以隐藏文件 {basename}.js 和 {basename}.js.map。

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

【讨论】：

这个对我来说适用于源映射文件。谢谢@mutlugokhan。萨戈拉辛。

【解决方案9】：

将这些设置添加到 .vscode 文件夹中的 settings.json 中

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

    }
}

如果 settings.json 不可用，请单击文件 ---> 首选项 --> 工作区设置。

【讨论】：

这个文件在哪里 ---> 首选项 --> 工作区设置？当我转到文件时，我没有与首选项和工作空间相关的任何内容，所以我一定是在错误的地方。供您参考，我正在使用 Visual Studio 2017 Enterprise。

【解决方案10】：

当.map 和.js 文件与它们对应的.ts 文件匹配时，也许最好隐藏它们。
您可以通过在 VS 用户设置（首选项 > 用户设置）中复制以下行来做到这一点：

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

【讨论】：

这将隐藏所有个名称以 .map 结尾的文件。

【解决方案11】：

在 VS Code 中，转到代码（或 Windows 用户的文件）> 首选项 > 工作区设置并添加此代码 sn-p：

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

【讨论】：

【解决方案12】：

Insiders Build v1.64 中有一个新的、目前处于试验阶段的功能，称为文件嵌套，虽然它不会隐藏自动生成的文件，但它会嵌套如果您希望在生成相关文件的父文件下，它们处于折叠状态。如果可能，您现在应该在 Insiders Build 中测试您的案例。

因此，通过对File Nesting: Patterns 的此修改：

"*.ts": "$(capture).js, $(capture).d.ts, $(capture).js.map" 你可以轻松实现 OP 的要求。演示：

文件嵌套不会从搜索中隐藏这些嵌套文件。

【讨论】：

【解决方案13】：

目前还没有官方解决方案可以根据两种不同的条件排除文件 glob。见this issue。

不过有a workaround 来定义两种不同的glob 模式，它们针对相同的文件：

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

【讨论】：