Blenden Sie .js.map-Dateien in Visual Studio Code aus

320

Ich arbeite an einem Typoskript-Projekt in Visual Studio-Code und möchte das ausblenden .js.map (und möglicherweise sogar die .js) Dateien vor dem Erscheinen im Datei-Explorer .

Ist es möglich, nur die .tsDateien im Datei-Explorer anzuzeigen ?

Tyler
quelle

Antworten:

641

In Ihren Einstellungen (entweder Benutzer oder Arbeitsbereich) gibt es eine Einstellung, die Sie anpassen können, um alles auszublenden, was Sie möchten:

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

So können Sie im Folgenden Ausblenden .jsund .js.mapDateien hinzufügen

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

Wie diese andere Antwort erklärt , möchten die meisten Benutzer .jsDateien wahrscheinlich nur dann ausblenden , wenn eine übereinstimmende .tsDatei vorhanden ist.

Also anstatt zu tun:

"**/*.js": true

Vielleicht möchten Sie Folgendes tun:

"**/*.js": {"when": "$(basename).ts"}
Brocco
quelle
10
Perfekte Lösung. Ich vermute, dass viele Benutzer, die daran interessiert sind, auch daran interessiert sind, das Verzeichnis node_modules auszublenden. Das kann so gemacht werden:"**/node_modules/": true
Josh1billion
Gibt es eine Verknüpfung zum Deaktivieren / Aktivieren der Konfigurationsoption files.exclude? irgendwann möchte ich etwas verstecktes überprüfen
aaalsubaie
103
"**/*.js": {"when": "$(basename).ts"},"**/*.map": {"when": "$(basename).map"}
Iuristona
1
@aaalsubaie Zum Aktivieren / Deaktivieren der Datei ausschließen Filter, gibt eine Erweiterung in Marketplace finden Sie unter marketplace.visualstudio.com/items?itemName=nwallace.peep
AJ Qarshi
2
Ist "**/*.map": {"when": "$(basename).map"}das gleiche wie "**/*.map": true?
GDBJ
190

Ich habe Folgendes gefunden: Wenn Sie Standard-JS-Dateien haben, werden diese ebenfalls ausgeblendet, was möglicherweise nicht immer das ist, was Sie wollen. Vielleicht ist dies besser, da nur JS-Dateien ausgeblendet werden, die mit TS-Dateien übereinstimmen ...

{
    "files.exclude": {
        "**/.git": true,
        "**/.DS_Store": true,
        "**/*.js.map": true,
        "**/*.js": {"when": "$(basename).ts"}
    }
}
Immer lernen
quelle
5
Können Sie einen Link veröffentlichen, wo dies dokumentiert ist? Ich möchte komplexere Formen des "Wann" verwenden, kann aber nicht finden, wo es dokumentiert ist.
Masimplo
1
Das Ausblenden abgeleiteter JS-Dateien ist hier dokumentiert: code.visualstudio.com/docs/languages/…
Stuart Hallows
4
Wie machen Sie den gleichen "Wann" -Musterabgleich für die .js.map-Dateien oder ".min.css" nach dem Kompilieren und Minimieren von scss? Sie werden nicht mit $ (Basisname)
Nickspoon
Dies ist klug, funktioniert aber nicht mit so etwas wie Winkel 2. Alles heißt file.component.ts oder file.module.ts
BentOnCoding
Was ist, wenn sich die ts-Dateien in einem anderen Ordner befinden?
Th3B0Y
98

Ich weiß wirklich nicht, wie dies implementiert wird, aber das Ausblenden von .jsDateien funktioniert:

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

Zum Ausblenden von .js.mapDateien funktioniert:

"**/*.js.map": {"when": "$(basename)"}
Luka
quelle
6
Diese Lösung funktioniert auch .js.map, da Visual Studio Code anscheinend $(basename)alles vor dem Finale interpretiert .. Könnte vereinfacht werden "**/*.map: {"when": "$(basename)"}, aber dies würde alle .map Dateien ausschließen , die eine entsprechende Nicht- .mapDatei haben.
Njål Nordmark
44

Wenn Sie mit TypeScript arbeiten, möchten Sie generierte JavaScript-Dateien häufig nicht im Explorer oder in den Suchergebnissen sehen. VS Code bietet Filterfunktionen mit einer files.excludeEinstellung ( Datei> Einstellungen> Arbeitsbereichseinstellungen ) und Sie können einfach einen Ausdruck erstellen, um diese abgeleiteten Dateien auszublenden:

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

Verstecken Sie generierte .mapDateien auf ähnliche Weise durch:

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

Sie haben also eine Konfiguration wie 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

Asim KT
quelle
22

John Papa Twitter LINK sagt, verwenden Sie Folgendes:

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

Aus dem offiziellen Dokument :

Verwenden Sie diesen Ausdruck, um JavaScript-Dateien auszuschließen, die sowohl aus .ts- als auch aus .tsx-Quelldateien generiert wurden:

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

Das ist ein kleiner Trick. Das Suchkugelmuster wird als Schlüssel verwendet. In den obigen Einstellungen werden zwei verschiedene Glob-Muster verwendet, um zwei eindeutige Schlüssel bereitzustellen. Die Suche stimmt jedoch weiterhin mit denselben Dateien überein.

UPDATE 03.10.2017: Mit diesem Trick haben wir ein Problem mit "Suche im Ordner". Bitte beachten Sie das Problem

duodvk
quelle
1
Hierfür gibt es eine andere Problemumgehung . Ich habe es unten als Antwort gepostet.
Zach Posten
8

1. Gehen Sie zu Einstellungen> Einstellungen

Geben Sie hier die Bildbeschreibung ein

2. Klicken Sie auf "Auf settings.json bearbeiten" (befindet sich unten im Bild)

Geben Sie hier die Bildbeschreibung ein

3. Aktualisieren Sie das Objekt json, wie Sie im Bild sehen können. Speichern Sie dann Ihre Änderungen Ctrl + Sund das ist alles.

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

Geben Sie hier die Bildbeschreibung ein

Daniel Eduardo Delgado Diaz
quelle
6

Fügen Sie diese Einstellungen zu Ihrer settings.json in Ihrem .vscode- Ordner hinzu

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

    }
}

Wenn die Datei settings.json nicht verfügbar ist, klicken Sie auf Datei ---> Einstellungen -> Arbeitsbereichseinstellungen.

Aravind
quelle
Wo ist diese Datei ---> Einstellungen -> Arbeitsbereichseinstellungen? Wenn ich zu Datei gehe, habe ich nichts mit den Einstellungen und Arbeitsbereichen zu tun, daher muss ich am falschen Ort sein. Zu Ihrer Information verwende ich Visual Studio 2017 Enterprise.
MHOOS
5

Bitte fügen Sie die folgenden Zeilen im Bereich "Benutzereinstellungen" hinzu, um "Standardeinstellungen" zu überschreiben. Sie können die Dateien {basename} .js und {basename} .js.map ausblenden, wenn Sie eine Datei als {basename} .ts erstellen.

"files.exclude": {
        "**/*.js": {
            "when": "$(basename).ts"
        },
        "**/*.js.map": {
            "when": "$(basename)"
        }        
    }
mutlugokhan
quelle
Dieser arbeitete für mich für die Sourcemap-Dateien. Vielen Dank an @mutlugokhan. Sagolasin.
Seregwethrin
4

Vielleicht ist es besser , sich zu verstecken .mapund .jsDateien , wenn sie ihre entsprechenden übereinstimmen .tsDatei.
Sie können dies tun, indem Sie die folgenden Zeilen in den VS-Benutzereinstellungen (Einstellungen> Benutzereinstellungen) kopieren:

// Workspace settings
"files.exclude": {
        "**/*.js":  {"when": "$(basename).ts"},
        "**/*.map": true
 }
mvecchione
quelle
Dadurch werden alle Dateien mit Namen ausgeblendet, die auf enden .map.
Roy Tinker
3

Gehen Sie in VS Code zu Code (oder Datei für Windows-Benutzer)> Einstellungen> Arbeitsbereichseinstellungen und fügen Sie dieses Code-Snippet hinzu:

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

Es gibt noch keine offizielle Lösung zum Ausschließen eines Dateiglob, das auf zwei verschiedenen Bedingungen basiert. Siehe dieses Problem .

Es gibt jedoch eine Problemumgehung , um zwei verschiedene Glob-Muster zu definieren, die auf dieselben Dateien abzielen:

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