jsconfig.json

Was ist jsconfig.json?

Das Vorhandensein einer jsconfig.json-Datei in einem Verzeichnis zeigt an, dass das Verzeichnis die Wurzel eines JavaScript-Projekts ist. Die jsconfig.json-Datei gibt die Stammdateien und die Optionen für die vom JavaScript Language Service bereitgestellten Funktionen an.

Tipp: Wenn Sie kein JavaScript verwenden, müssen Sie sich keine Gedanken über jsconfig.json machen.

Tipp: jsconfig.json ist ein Nachkomme von tsconfig.json, einer Konfigurationsdatei für TypeScript. jsconfig.json ist tsconfig.json mit dem auf true gesetzten Attribut "allowJs".

Warum benötige ich eine jsconfig.json-Datei?

Die JavaScript-Unterstützung von Visual Studio Code kann in zwei verschiedenen Modi ausgeführt werden

• Dateibereich – keine jsconfig.json: In diesem Modus werden in Visual Studio Code geöffnete JavaScript-Dateien als unabhängige Einheiten behandelt. Solange eine Datei a.js nicht explizit auf eine Datei b.ts verweist (entweder über import oder CommonJS Module), besteht kein gemeinsamer Projektkontext zwischen den beiden Dateien.

• Explizites Projekt – mit jsconfig.json: Ein JavaScript-Projekt wird über eine jsconfig.json-Datei definiert. Das Vorhandensein einer solchen Datei in einem Verzeichnis zeigt an, dass das Verzeichnis die Wurzel eines JavaScript-Projekts ist. Die Datei selbst kann optional die dem Projekt angehörigen Dateien, die aus dem Projekt auszuschließenden Dateien sowie Compiler-Optionen (siehe unten) auflisten.

Das JavaScript-Erlebnis wird verbessert, wenn Sie eine jsconfig.json-Datei in Ihrem Arbeitsbereich haben, die den Projektkontext definiert. Aus diesem Grund bieten wir einen Hinweis zum Erstellen einer jsconfig.json-Datei, wenn Sie eine JavaScript-Datei in einem neuen Arbeitsbereich öffnen.

Speicherort von jsconfig.json

Wir definieren diesen Teil unseres Codes, die Client-Seite unserer Website, als JavaScript-Projekt, indem wir eine jsconfig.json-Datei erstellen. Platzieren Sie die Datei wie unten gezeigt am Stammverzeichnis Ihres JavaScript-Codes.

In komplexeren Projekten können Sie mehr als eine jsconfig.json-Datei innerhalb eines Arbeitsbereichs definieren. Dies sollten Sie tun, damit der Code in einem Projekt nicht als IntelliSense für den Code in einem anderen Projekt vorgeschlagen wird. Unten ist ein Projekt mit einem client- und einem server-Ordner dargestellt, die zwei separate JavaScript-Projekte zeigen.

Beispiele

Standardmäßig analysiert der JavaScript Language Service alle Dateien in Ihrem JavaScript-Projekt und bietet IntelliSense dafür an. Sie möchten angeben, welche Dateien ausgeschlossen oder eingeschlossen werden sollen, um das richtige IntelliSense bereitzustellen.

Verwendung der "exclude"-Eigenschaft

Das Attribut exclude (ein Glob-Muster) teilt dem Sprachdienst mit, welche Dateien nicht Teil Ihres Quellcodes sind. Dies hält die Leistung auf einem hohen Niveau. Wenn IntelliSense langsam ist, fügen Sie Ordner zu Ihrer exclude-Liste hinzu (VS Code wird Sie dazu auffordern, wenn es eine Verlangsamung erkennt).

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6"
  },
  "exclude": ["node_modules"]
}

Tipp: Sie sollten Dateien ausschließen, die von einem Build-Prozess generiert wurden (z. B. ein dist-Verzeichnis). Diese Dateien führen dazu, dass Vorschläge zweimal angezeigt werden und IntelliSense verlangsamen.

Verwendung der "include"-Eigenschaft

Alternativ können Sie die Dateien in Ihrem Projekt explizit mit dem Attribut include (ein Glob-Muster) festlegen. Wenn kein include-Attribut vorhanden ist, werden standardmäßig alle Dateien im übergeordneten Verzeichnis und dessen Unterverzeichnissen einbezogen. Wenn ein include-Attribut angegeben ist, werden nur diese Dateien einbezogen. Hier ist ein Beispiel mit einem expliziten include-Attribut.

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6"
  },
  "include": ["src/**/*"]
}

Tipp: Die Dateipfade in exclude und include beziehen sich auf den Speicherort von jsconfig.json.

jsconfig-Optionen

Unten sind jsconfig "compilerOptions" aufgeführt, um die JavaScript-Sprachunterstützung zu konfigurieren.

Tipp: Lassen Sie sich nicht von compilerOptions verwirren, da für JavaScript keine tatsächliche Kompilierung erforderlich ist. Dieses Attribut existiert, da jsconfig.json ein Nachkomme von tsconfig.json ist, das zum Kompilieren von TypeScript verwendet wird.

Sie können mehr über die verfügbaren compilerOptions in der TypeScript compilerOptions-Dokumentation lesen.

Verwendung von webpack-Aliassen

Damit IntelliSense mit webpack-Aliassen funktioniert, müssen Sie die paths-Schlüssel mit einem Glob-Muster angeben.

Zum Beispiel für den Alias 'ClientApp'

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "ClientApp/*": ["./ClientApp/*"]
    }
  }
}

und dann, um den Alias zu verwenden

import Something from 'ClientApp/foo';

Best Practices

Schließen Sie, wann immer möglich, Ordner mit JavaScript-Dateien aus, die nicht Teil des Quellcodes Ihres Projekts sind.

Tipp: Wenn Sie keine jsconfig.json in Ihrem Arbeitsbereich haben, schließt VS Code standardmäßig den node_modules-Ordner aus.

Unten ist eine Tabelle, die gängige Projektkomponenten ihren Installationsordnern zuordnet, die zum Ausschließen empfohlen werden

Wenn Ihr JavaScript-Projekt zu groß wird und die Leistung nachlässt, liegt das oft an Bibliotheksordnern wie node_modules. Wenn VS Code erkennt, dass Ihr Projekt zu groß wird, werden Sie aufgefordert, die exclude-Liste zu bearbeiten.