Arbeiten mit JavaScript

Dieses Thema beschreibt einige der erweiterten JavaScript-Funktionen, die von Visual Studio Code unterstützt werden. Mithilfe des TypeScript-Sprachdienstes kann VS Code intelligente Vervollständigungen (IntelliSense) sowie Typprüfungen für JavaScript bereitstellen.

IntelliSense

Das JavaScript IntelliSense von Visual Studio Code bietet intelligente Codevervollständigung, Parameterinformationen, Referenzsuche und viele weitere erweiterte Sprachfunktionen. Unser JavaScript-IntelliSense wird vom JavaScript-Sprachdienst des TypeScript-Teams bereitgestellt. Obwohl IntelliSense für die meisten JavaScript-Projekte ohne Konfiguration funktionieren sollte, können Sie IntelliSense mit JSDoc oder durch Konfiguration einer jsconfig.json-Datei noch nützlicher machen.

Details zur Funktionsweise von JavaScript IntelliSense, einschließlich der Typinferenz, JSDoc-Annotationen, TypeScript-Deklarationen und der Mischung von JavaScript- und TypeScript-Projekten, finden Sie in der Dokumentation zum JavaScript-Sprachdienst.

Wenn die Typinferenz nicht die gewünschten Informationen liefert, können Typinformationen explizit mit JSDoc-Annotationen bereitgestellt werden. Dieses Dokument beschreibt die derzeit unterstützten JSDoc-Annotationen.

Zusätzlich zu Objekten, Methoden und Eigenschaften bietet das JavaScript-IntelliSense-Fenster auch eine einfache Wortvervollständigung für Symbole in Ihrer Datei.

Typings und automatische Typenerfassung

IntelliSense für JavaScript-Bibliotheken und Frameworks wird durch TypeScript-Typdeklarationsdateien (Typings) unterstützt. Typdeklarationsdateien sind in TypeScript geschrieben, sodass sie die Datentypen von Parametern und Funktionen ausdrücken können, wodurch VS Code eine reichhaltige IntelliSense-Erfahrung auf performante Weise bieten kann.

Viele beliebte Bibliotheken werden mit Typings-Dateien ausgeliefert, sodass Sie automatisch IntelliSense dafür erhalten. Für Bibliotheken, die keine Typings enthalten, installiert VS Codes Automatische Typenerfassung automatisch Community-gepflegte Typings-Dateien für Sie.

Die automatische Typenerfassung erfordert npmjs, den Node.js-Paketmanager, der mit der Node.js-Laufzeitumgebung geliefert wird. In diesem Bild sehen Sie IntelliSense, einschließlich der Methodensignatur, Parameterinformationen und der Methodendokumentation für die beliebte lodash-Bibliothek.

Typdeklarationsdateien werden von Visual Studio Code automatisch für Pakete heruntergeladen und verwaltet, die in der package.json Ihres Projekts aufgeführt sind oder die Sie in eine JavaScript-Datei importieren.

{
  "dependencies": {
    "lodash": "^4.17.0"
  }
}

Sie können alternativ explizit Pakete auflisten, für die Typdeklarationsdateien in einer jsconfig.json bezogen werden sollen.

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

Die meisten gängigen JavaScript-Bibliotheken werden mit Deklarationsdateien ausgeliefert oder haben verfügbare Typdeklarationsdateien.

Behebung der Warnung "npm nicht installiert" für die automatische Typenerfassung

Automatische Typenerfassung verwendet npm, den Node.js-Paketmanager, zum Installieren und Verwalten von Typdeklarationsdateien (Typings). Stellen Sie sicher, dass Sie npm auf Ihrem Computer installiert haben, damit die automatische Typenerfassung ordnungsgemäß funktioniert.

Führen Sie npm --version in einem Terminal oder einer Eingabeaufforderung aus, um schnell zu überprüfen, ob npm installiert und verfügbar ist.

npm ist mit der Node.js-Laufzeitumgebung installiert, die von Nodejs.org heruntergeladen werden kann. Installieren Sie die aktuelle LTS-Version (Long Term Support), und die npm-Ausführungsdatei wird standardmäßig zu Ihrem Systempfad hinzugefügt.

Wenn npm installiert ist, Sie aber immer noch eine Warnmeldung sehen, können Sie VS Code mit der Einstellung typescript.npm explizit mitteilen, wo npm installiert ist. Diese Einstellung sollte auf den vollständigen Pfad der npm-Ausführungsdatei auf Ihrem Computer gesetzt werden, und dieser muss nicht mit der npm-Version übereinstimmen, die Sie zur Verwaltung von Paketen in Ihrem Arbeitsbereich verwenden. typescript.npm erfordert TypeScript 2.3.4+.

Zum Beispiel würden Sie unter Windows einen Pfad wie diesen zu Ihrer settings.json-Datei hinzufügen

{
  "typescript.npm": "C:\\Program Files\\nodejs\\npm.cmd"
}

JavaScript-Projekte (jsconfig.json)

Das Vorhandensein einer jsconfig.json-Datei in einem Verzeichnis weist darauf hin, dass das Verzeichnis die Wurzel eines JavaScript-Projekts ist. jsconfig.json gibt die Stammdateien und die Optionen für die Sprachfunktionen an, die vom JavaScript-Sprachdienst bereitgestellt werden. Für gängige Setups ist eine jsconfig.json-Datei nicht erforderlich, es gibt jedoch Situationen, in denen Sie eine jsconfig.json hinzufügen möchten.

• Nicht alle Dateien sollten in Ihrem JavaScript-Projekt enthalten sein (z. B. möchten Sie einige Dateien von der IntelliSense-Anzeige ausschließen). Dies ist häufig bei Front-End- und Back-End-Code der Fall.
• Ihr Arbeitsbereich enthält mehr als einen Projektkontext. In dieser Situation sollten Sie am Stammverzeichnis jedes Projekts eine jsconfig.json-Datei hinzufügen.
• Sie verwenden den TypeScript-Compiler, um JavaScript-Quellcode auf eine frühere Version zu kompilieren.

Speicherort von jsconfig.json

Um unseren Code als JavaScript-Projekt zu definieren, erstellen Sie jsconfig.json im Stammverzeichnis Ihres JavaScript-Codes, wie unten gezeigt. Ein JavaScript-Projekt besteht aus den Quelldateien des Projekts und sollte keine abgeleiteten oder verpackten Dateien enthalten (z. B. ein dist-Verzeichnis).

In komplexeren Projekten haben Sie möglicherweise mehr als eine jsconfig.json-Datei innerhalb eines Arbeitsbereichs definiert. Dies sollten Sie tun, damit der Quellcode in einem Projekt nicht in der IntelliSense eines anderen Projekts erscheint.

Unten ist ein Projekt mit einem client- und einem server-Ordner dargestellt, das zwei separate JavaScript-Projekte zeigt.

Schreiben von jsconfig.json

Nachfolgend finden Sie eine einfache Vorlage für eine jsconfig.json-Datei, die das JavaScript-target auf ES6 setzt und das exclude-Attribut den node_modules-Ordner ausschließt. Sie können diesen Code kopieren und in Ihre jsconfig.json-Datei einfügen.

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

Das Attribut exclude teilt dem Sprachdienst mit, welche Dateien nicht Teil Ihres Quellcodes sind. Wenn IntelliSense langsam ist, fügen Sie Ordner zu Ihrer exclude-Liste hinzu (VS Code fordert Sie dazu auf, wenn es langsame Vervollständigungen erkennt). 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.

Sie können die Dateien in Ihrem Projekt explizit mit dem Attribut include festlegen. Wenn kein include-Attribut vorhanden ist, werden standardmäßig alle Dateien im enthaltenden Verzeichnis und dessen Unterverzeichnissen eingeschlossen. Wenn ein include-Attribut angegeben wird, werden nur diese Dateien eingeschlossen.

Hier ist ein Beispiel mit einem expliziten include-Attribut.

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

Die beste und am wenigsten fehleranfällige Methode ist die Verwendung des Attributs include mit einem einzigen src-Ordner. Beachten Sie, dass Dateipfade in exclude und include relativ zum Speicherort von jsconfig.json sind.

Weitere Informationen finden Sie in der vollständigen jsconfig.json-Dokumentation.

Migration zu TypeScript

Es ist möglich, gemischte TypeScript- und JavaScript-Projekte zu haben. Um mit der Migration zu TypeScript zu beginnen, benennen Sie Ihre jsconfig.json-Datei in tsconfig.json um und setzen Sie die Eigenschaft allowJs auf true. Weitere Informationen finden Sie unter Migration von JavaScript.

Hinweis: jsconfig.json ist dasselbe wie eine tsconfig.json-Datei, nur mit allowJs auf true gesetzt. Sehen Sie sich die Dokumentation für tsconfig.json hier an, um andere verfügbare Optionen zu sehen.

JavaScript-Typprüfung

VS Code ermöglicht es Ihnen, einige der erweiterten Typprüfungs- und Fehlerberichtfunktionen von TypeScript in regulären JavaScript-Dateien zu nutzen. Dies ist eine hervorragende Möglichkeit, häufige Programmierfehler zu erkennen. Diese Typprüfungen ermöglichen auch einige spannende Quick Fixes für JavaScript, einschließlich Fehlende Importanweisung hinzufügen und Fehlende Eigenschaft hinzufügen.

TypeScript kann Typen in .js-Dateien genauso ableiten wie in .ts-Dateien. Wenn Typen nicht abgeleitet werden können, können sie mithilfe von JSDoc-Kommentaren angegeben werden. Sie können mehr darüber lesen, wie TypeScript JSDoc zur JavaScript-Typprüfung verwendet, unter Type Checking JavaScript Files.

Die Typprüfung von JavaScript ist optional und wird per Opt-in aktiviert. Bestehende JavaScript-Validierungstools wie ESLint können neben der neuen integrierten Typprüfungsfunktionalität verwendet werden.

Sie können je nach Bedarf auf verschiedene Arten mit der Typprüfung beginnen.

Pro Datei

Der einfachste Weg, die Typprüfung in einer JavaScript-Datei zu aktivieren, ist das Hinzufügen von // @ts-check am Anfang der Datei.

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

Die Verwendung von // @ts-check ist ein guter Ansatz, wenn Sie die Typprüfung nur in einigen Dateien ausprobieren möchten, aber noch nicht für eine ganze Codebasis aktivieren möchten.

Verwendung einer Einstellung

Um die Typprüfung für alle JavaScript-Dateien zu aktivieren, ohne Code zu ändern, fügen Sie einfach "js/ts.implicitProjectConfig.checkJs": true zu Ihren Arbeitsbereichs- oder Benutzereinstellungen hinzu. Dies aktiviert die Typprüfung für jede JavaScript-Datei, die nicht Teil eines jsconfig.json- oder tsconfig.json-Projekts ist.

Sie können einzelne Dateien von der Typprüfung ausschließen, indem Sie am Anfang der Datei einen // @ts-nocheck-Kommentar hinzufügen.

// @ts-nocheck
let easy = 'abc';
easy = 123; // no error

Sie können einzelne Fehler auch in einer JavaScript-Datei deaktivieren, indem Sie einen // @ts-ignore-Kommentar über der Zeile mit dem Fehler hinzufügen.

let easy = 'abc';
// @ts-ignore
easy = 123; // no error

Verwendung von jsconfig oder tsconfig

Um die Typprüfung für JavaScript-Dateien zu aktivieren, die Teil einer jsconfig.json- oder tsconfig.json-Datei sind, fügen Sie "checkJs": true zu den Compileroptionen des Projekts hinzu.

jsconfig.json:

{
  "compilerOptions": {
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

tsconfig.json:

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

Dies aktiviert die Typprüfung für alle JavaScript-Dateien im Projekt. Sie können // @ts-nocheck verwenden, um die Typprüfung pro Datei zu deaktivieren.

JavaScript-Typprüfung erfordert TypeScript 2.3. Wenn Sie unsicher sind, welche TypeScript-Version gerade in Ihrem Arbeitsbereich aktiv ist, führen Sie den Befehl TypeScript: Select TypeScript Version aus, um dies zu überprüfen. Sie müssen eine .js/.ts-Datei im Editor geöffnet haben, um diesen Befehl auszuführen. Wenn Sie eine TypeScript-Datei öffnen, wird die Version in der unteren rechten Ecke angezeigt.

Globale Variablen und Typprüfung

Angenommen, Sie arbeiten mit älterem JavaScript-Code, der globale Variablen oder nicht standardmäßige DOM-APIs verwendet.

window.onload = function() {
  if (window.webkitNotifications.requestPermission() === CAN_NOTIFY) {
    window.webkitNotifications.createNotification(null, 'Woof!', '🐶').show();
  } else {
    alert('Could not notify');
  }
};

Wenn Sie versuchen, // @ts-check mit dem obigen Code zu verwenden, sehen Sie eine Reihe von Fehlern bezüglich der Verwendung globaler Variablen.

1. Zeile 2 - Property 'webkitNotifications' does not exist on type 'Window'.
2. Zeile 2 - Cannot find name 'CAN_NOTIFY'.
3. Zeile 3 - Property 'webkitNotifications' does not exist on type 'Window'.

Wenn Sie // @ts-check weiterhin verwenden möchten, aber sicher sind, dass dies keine tatsächlichen Probleme mit Ihrer Anwendung sind, müssen Sie TypeScript über diese globalen Variablen informieren.

Erstellen Sie zunächst eine jsconfig.json im Stammverzeichnis Ihres Projekts.

{
  "compilerOptions": {},
  "exclude": ["node_modules", "**/node_modules/*"]
}

Laden Sie dann VS Code neu, um sicherzustellen, dass die Änderung angewendet wird. Das Vorhandensein einer jsconfig.json-Datei informiert TypeScript darüber, dass Ihre JavaScript-Dateien Teil eines größeren Projekts sind.

Erstellen Sie nun irgendwo in Ihrem Arbeitsbereich eine Datei globals.d.ts.

interface Window {
  webkitNotifications: any;
}

declare var CAN_NOTIFY: number;

d.ts-Dateien sind Typdeklarationen. In diesem Fall teilt globals.d.ts TypeScript mit, dass ein globales CAN_NOTIFY existiert und dass eine Eigenschaft webkitNotifications auf window existiert. Sie können mehr über das Schreiben von d.ts in der TypeScript-Dokumentation lesen. d.ts-Dateien ändern nicht, wie JavaScript ausgewertet wird; sie werden nur zur besseren JavaScript-Sprachunterstützung verwendet.

Verwendung von Aufgaben

Verwendung des TypeScript-Compilers

Eine der Hauptfunktionen von TypeScript ist die Möglichkeit, die neuesten JavaScript-Sprachfeatures zu verwenden und Code auszugeben, der in JavaScript-Laufzeitumgebungen ausgeführt werden kann, die diese neueren Features noch nicht verstehen. Da JavaScript denselben Sprachdienst verwendet, kann es nun auch von diesem Feature profitieren.

Der TypeScript-Compiler tsc kann JavaScript-Dateien von ES6 auf ein anderes Sprachniveau kompilieren. Konfigurieren Sie jsconfig.json mit den gewünschten Optionen und verwenden Sie dann das Argument –p, damit tsc Ihre jsconfig.json-Datei verwendet, z. B. tsc -p jsconfig.json zum Kompilieren auf eine frühere Version.

Lesen Sie mehr über die Compileroptionen für die Kompilierung auf eine frühere Version in der jsconfig-Dokumentation.

Babel ausführen

Der Babel-Transpiler wandelt ES6-Dateien mit Source Maps in lesbares ES5-JavaScript um. Sie können Babel einfach in Ihren Workflow integrieren, indem Sie die untenstehende Konfiguration zu Ihrer tasks.json-Datei (im .vscode-Ordner Ihres Arbeitsbereichs) hinzufügen. Die Einstellung group macht diese Aufgabe zur Standardgeste Task: Run Build Task. isBackground weist VS Code an, diese Aufgabe im Hintergrund weiter auszuführen. Weitere Informationen finden Sie unter Tasks.

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "watch",
      "command": "${workspaceFolder}/node_modules/.bin/babel",
      "args": ["src", "--out-dir", "lib", "-w", "--source-maps"],
      "type": "shell",
      "group": { "kind": "build", "isDefault": true },
      "isBackground": true
    }
  ]
}

Nachdem Sie dies hinzugefügt haben, können Sie Babel mit dem Befehl ⇧⌘B (Windows, Linux Ctrl+Shift+B) (Run Build Task) starten, und es werden alle Dateien aus dem src-Verzeichnis in das lib-Verzeichnis kompiliert.

Tipp: Hilfe zur Babel-CLI finden Sie in den Anweisungen unter Using Babel. Das obige Beispiel verwendet die CLI-Option.

JavaScript-Unterstützung deaktivieren

Wenn Sie stattdessen JavaScript-Sprachfeatures verwenden möchten, die von anderen JavaScript-Sprach-Tools wie Flow unterstützt werden, können Sie die integrierte JavaScript-Unterstützung von VS Code deaktivieren. Dies tun Sie, indem Sie die integrierte TypeScript-Sprach Erweiterung TypeScript and JavaScript Language Features (vscode.typescript-language-features) deaktivieren, die auch die JavaScript-Sprachunterstützung bietet.

Um die JavaScript/TypeScript-Unterstützung zu deaktivieren, wechseln Sie zur Erweiterungsansicht (⇧⌘X (Windows, Linux Ctrl+Shift+X)) und filtern Sie nach integrierten Erweiterungen (Show Built-in Extensions im Dropdown-Menü ... More Actions), geben Sie dann 'typescript' ein. Wählen Sie die Erweiterung TypeScript and JavaScript Language Features aus und drücken Sie die Schaltfläche Disable. VS Code-Erweiterungen können nicht deinstalliert, nur deaktiviert werden und können jederzeit wieder aktiviert werden.

Teilweiser IntelliSense-Modus

VS Code versucht, projektweiten IntelliSense für JavaScript und TypeScript bereitzustellen, was Funktionen wie automatische Importe und Go to Definition ermöglicht. Es gibt jedoch Fälle, in denen VS Code auf die Arbeit mit Ihren aktuell geöffneten Dateien beschränkt ist und die anderen Dateien, aus denen Ihr JavaScript- oder TypeScript-Projekt besteht, nicht laden kann.

Dies kann in einigen Fällen vorkommen

• Sie arbeiten mit JavaScript- oder TypeScript-Code auf vscode.dev oder github.dev und VS Code läuft im Browser.
• Sie öffnen eine Datei aus einem virtuellen Dateisystem (z. B. bei Verwendung der GitHub Repositories-Erweiterung).
• Das Projekt wird gerade geladen. Sobald der Ladevorgang abgeschlossen ist, erhalten Sie dafür projektweiten IntelliSense.

In diesen Fällen arbeitet VS Codes IntelliSense im partiellen Modus. Der partielle Modus versucht sein Bestes, IntelliSense für alle geöffneten JavaScript- oder TypeScript-Dateien bereitzustellen, ist aber eingeschränkt und kann keine Cross-File-IntelliSense-Funktionen anbieten.

Welche Funktionen sind betroffen?

Hier ist eine unvollständige Liste der Funktionen, die im partiellen Modus deaktiviert sind oder eine eingeschränktere Funktionalität aufweisen.

• Alle geöffneten Dateien werden als Teil eines einzigen Projekts behandelt.
• Konfigurationsoptionen aus Ihrer jsconfig oder tsconfig (z. B. target) werden nicht beachtet.
• Nur Syntaxfehler werden gemeldet. Semantische Fehler – wie der Zugriff auf eine unbekannte Eigenschaft oder die Übergabe des falschen Typs an eine Funktion – werden nicht gemeldet.
• Quick Fixes für semantische Fehler sind deaktiviert.
• Symbole können nur innerhalb der aktuellen Datei aufgelöst werden. Alle Symbole, die aus anderen Dateien importiert werden, werden als Typ any behandelt.
• Befehle wie Go to Definition und Find All References funktionieren nur für geöffnete Dateien und nicht für das gesamte Projekt. Dies bedeutet auch, dass Symbole aus Paketen, die Sie unter node_module installieren, nicht aufgelöst werden.
• Die Suche nach Arbeitsbereichssymbolen umfasst nur Symbole aus aktuell geöffneten Dateien.
• Automatische Importe sind deaktiviert.
• Umbenennung ist deaktiviert.
• Viele Refactorings sind deaktiviert.

Einige zusätzliche Funktionen sind auf vscode.dev und github.dev deaktiviert.

• Automatische Typenerfassung wird derzeit nicht unterstützt.

Überprüfung, ob Sie sich im partiellen Modus befinden

Um zu überprüfen, ob die aktuelle Datei partiellen IntelliSense anstelle von projektweitem IntelliSense verwendet, fahren Sie mit dem Statusfeld JavaScript oder TypeScript in der Statusleiste fort.

Das Statusfeld zeigt Partial mode an, wenn sich die aktuelle Datei im partiellen Modus befindet.