Masquer les fichiers .js.map dans Visual Studio Code


320

Je travaille sur un projet dactylographié dans le code Visual Studio et je voudrais masquer les fichiers .js.map(et peut-être même les .js) d'apparaître dans l'explorateur de fichiers.

Est-il possible d'afficher uniquement les .tsfichiers dans l'explorateur de fichiers?

Réponses:


641

Dans vos paramètres (utilisateur ou espace de travail), il existe un paramètre que vous pouvez modifier pour masquer tout ce que vous souhaitez:

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

Vous pouvez donc ajouter ce qui suit pour masquer .jset .js.mapfichiers

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

Comme l' explique cette autre réponse , la plupart des gens ne veulent probablement masquer des .jsfichiers que lorsqu'il existe un .tsfichier correspondant .

Donc au lieu de faire:

"**/*.js": true

vous voudrez peut-être faire:

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

10
Solution parfaite. Pour ajouter, je pense que de nombreux utilisateurs intéressés par cela seront également intéressés à cacher le répertoire node_modules. Cela peut être fait comme ça:"**/node_modules/": true
Josh1billion

existe-t-il un raccourci pour désactiver / activer l'option de configuration files.exclude? je veux vérifier quelque chose de caché
aaalsubaie

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

1
@aaalsubaie Pour activer / désactiver le filtre d'exclusion de fichiers, une extension est disponible dans MarketPlace à marketplace.visualstudio.com/items?itemName=nwallace.peep
AJ Qarshi

2
Est-ce "**/*.map": {"when": "$(basename).map"}la même chose que "**/*.map": true?
gdbj

190

J'ai trouvé cela, si vous avez des fichiers JS standard, ils seront également masqués, ce qui n'est pas toujours ce que vous voulez. C'est peut-être mieux car il ne cache que les fichiers JS qui correspondent aux fichiers TS ...

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

5
Pouvez-vous publier un lien vers où cela est documenté? Je voudrais utiliser des formes plus complexes de «quand», mais je ne trouve pas où cela est documenté.
masimplo

1
Le masquage des fichiers JS dérivés est documenté ici: code.visualstudio.com/docs/languages/…
Stuart Hallows

4
Comment faites-vous la même correspondance de modèle «quand» pour les fichiers .js.map ou «.min.css» après avoir compilé et réduit le scss? Ils ne sont pas égalés par $ (nom de base)
nickspoon

C'est intelligent, mais ne fonctionne pas avec quelque chose comme angulaire 2. Tout est nommé file.component.ts ou file.module.ts
BentOnCoding

qu'en est-il lorsque les fichiers ts sont dans un dossier différent?
Th3B0Y

98

Je ne sais vraiment pas comment cela est mis en œuvre, mais pour masquer les .jsfichiers, cela fonctionne:

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

Pour masquer les .js.mapfichiers fonctionne:

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

6
Cette solution gère également .js.map, comme Visual Studio Code semble interpréter $(basename)comme étant tout avant la finale .. Pourrait être simplifié "**/*.map: {"when": "$(basename)"}, mais cela exclurait tous les .map fichiers qui ont un non- .mapfichier correspondant .
Njål Nordmark

44

Lorsque vous travaillez avec TypeScript, vous ne voulez souvent pas voir les fichiers JavaScript générés dans l'explorateur ou dans les résultats de recherche. VS Code offre des capacités de filtrage avec un files.excludeparamètre ( Fichier> Préférences> Paramètres de l' espace de travail ) et vous pouvez facilement créer une expression pour masquer ces fichiers dérivés:

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

De même, masquez les .mapfichiers générés par:

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

Vous aurez donc une configuration comme dans:

settings.json

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

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


22

John Papa Twitter LINK dit d'utiliser les éléments suivants:

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

15

Du document officiel :

pour exclure les fichiers JavaScript générés à partir des fichiers source .ts et .tsx, utilisez cette expression:

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

C'est un peu une astuce. Le modèle de glob de recherche est utilisé comme clé. Les paramètres ci-dessus utilisent deux modèles glob différents pour fournir deux clés uniques, mais la recherche correspondra toujours aux mêmes fichiers.

MISE À JOUR 10/3/2017: avec cette astuce, nous avons un problème avec "recherche dans le dossier". Veuillez voir le problème


1
Il existe une autre solution pour cela. Je l'ai posté comme réponse ci-dessous.
Zach Posten

8

1. Allez dans préférences> paramètres

entrez la description de l'image ici

2. Cliquez sur "Modifier sur settings.json" (c'est en bas de l'image)

entrez la description de l'image ici

3. Mettez à jour l'objet json comme vous pouvez le voir sur l'image. Enregistrez ensuite vos modifications Ctrl + Set c'est tout.

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

entrez la description de l'image ici


6

Ajoutez ces paramètres à votre settings.json dans votre dossier .vscode

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

    }
}

Si le fichier settings.json n'est pas disponible, cliquez sur Fichier ---> Préférences -> Paramètres de l'espace de travail.


Où est ce fichier ---> Préférences -> Paramètres de l'espace de travail? Lorsque je vais dans Fichier, je n'ai rien lié aux préférences et aux espaces de travail, je dois donc être au mauvais endroit. Pour votre information, j'utilise Visual Studio 2017 Enterprise.
MHOOS

5

Veuillez ajouter les lignes suivantes dans le panneau "Paramètres utilisateur" afin de remplacer les "Paramètres par défaut". Vous pouvez masquer les fichiers {basename} .js et {basename} .js.map lorsque vous créez un fichier en tant que {basename} .ts.

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

Celui-ci a fonctionné pour moi pour les fichiers sourcemap. Merci @mutlugokhan. Sagolasin.
Seregwethrin

4

Il est peut-être préférable de masquer .mapet de classer les .jsfichiers lorsqu'ils correspondent à leur .tsfichier correspondant .
Vous pouvez le faire en copiant les lignes suivantes dans VS User Settings (Préférences> User Settings):

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

Cela masquera tous les fichiers dont le nom se termine par .map.
Roy Tinker

3

Dans VS Code, accédez à Code (ou Fichier pour les utilisateurs de Windows)> Préférences> Paramètres de l'espace de travail et ajoutez cet extrait de code:

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

0

Il n'y a toujours pas de solution officielle pour exclure un glob de fichier basé sur deux conditions différentes. Voir ce numéro .

Il existe cependant une solution de contournement pour définir deux modèles glob différents qui ciblent les mêmes fichiers:

{
    "files.exclude": {
        "**/*.js": { "when": "$(basename).ts"},
        "**/*?.js": { "when": "$(basename).tsx"}
    }
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.