JavaScript in Visual Studio Code

Visual Studio Code bietet integrierte JavaScript-IntelliSense-, Debugging-, Formatierungs-, Code-Navigations-, Refactoring- und viele weitere erweiterte Sprachfunktionen.

Die meisten dieser Funktionen funktionieren sofort, während einige für die beste Erfahrung möglicherweise eine grundlegende Konfiguration erfordern. Diese Seite fasst die JavaScript-Funktionen zusammen, die VS Code mitbringt. Erweiterungen aus dem VS Code Marketplace können die meisten dieser integrierten Funktionen erweitern oder ändern. Eine detailliertere Anleitung, wie diese Funktionen funktionieren und konfiguriert werden können, finden Sie unter Arbeiten mit JavaScript.

IntelliSense

IntelliSense zeigt Ihnen intelligente Code-Vervollständigung, Hover-Informationen und Signaturinformationen, damit Sie Code schneller und korrekter schreiben können.

VS Code bietet IntelliSense innerhalb Ihrer JavaScript-Projekte; für viele npm-Bibliotheken wie React, lodash und express; und für andere Plattformen wie node, Serverless oder IoT.

Siehe Arbeiten mit JavaScript für Informationen über VS Codes JavaScript-IntelliSense, wie Sie es konfigurieren und häufige IntelliSense-Probleme beheben.

JavaScript-Projekte (jsconfig.json)

Eine Datei jsconfig.json definiert ein JavaScript-Projekt in VS Code. Obwohl jsconfig.json-Dateien nicht erforderlich sind, möchten Sie möglicherweise eine erstellen in Fällen wie

• Wenn nicht alle JavaScript-Dateien in Ihrem Arbeitsbereich als Teil eines einzelnen JavaScript-Projekts betrachtet werden sollen. jsconfig.json-Dateien ermöglichen es Ihnen, einige Dateien von der IntelliSense-Anzeige auszuschließen.
• Um sicherzustellen, dass eine Teilmenge von JavaScript-Dateien in Ihrem Arbeitsbereich als ein einziges Projekt behandelt wird. Dies ist nützlich, wenn Sie mit älterem Code arbeiten, der implizite globale Abhängigkeiten anstelle von import für Abhängigkeiten verwendet.
• Wenn Ihr Arbeitsbereich mehr als einen Projektkontext enthält, z. B. Front-End- und Back-End-JavaScript-Code. Für Arbeitsbereiche mit mehreren Projekten erstellen Sie eine jsconfig.json im Stammverzeichnis jedes Projekts.
• Sie verwenden den TypeScript-Compiler, um JavaScript-Quellcode zu kompilieren.

Um ein einfaches JavaScript-Projekt zu definieren, fügen Sie eine jsconfig.json im Stammverzeichnis Ihres Arbeitsbereichs hinzu

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

Siehe Arbeiten mit JavaScript für fortgeschrittenere jsconfig.json-Konfigurationen.

Snippets

VS Code enthält grundlegende JavaScript-Snippets, die während der Eingabe vorgeschlagen werden.

Es gibt viele Erweiterungen, die zusätzliche Snippets anbieten, einschließlich Snippets für beliebte Frameworks wie Redux oder Angular. Sie können sogar eigene Snippets definieren.

JSDoc-Unterstützung

VS Code versteht viele Standard-JSDoc-Annotationen und verwendet diese Annotationen, um reichhaltiges IntelliSense bereitzustellen. Sie können optional sogar die Typinformationen aus JSDoc-Kommentaren verwenden, um Ihr JavaScript auf Typfehler zu prüfen.

Erstellen Sie schnell JSDoc-Kommentare für Funktionen, indem Sie /** vor der Funktionsdeklaration eingeben und den Snippet-Vorschlag JSDoc-Kommentar auswählen.

Um Vorschläge für JSDoc-Kommentare zu deaktivieren, setzen Sie "javascript.suggest.completeJSDocs": false.

Hover-Informationen

Fahren Sie mit der Maus über ein JavaScript-Symbol, um schnell dessen Typinformationen und relevante Dokumentation anzuzeigen.

Die Tastenkombination ⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I) zeigt diese Hover-Informationen an der aktuellen Cursorposition an.

Signaturhilfe

Während Sie JavaScript-Funktionsaufrufe schreiben, zeigt VS Code Informationen über die Funktionssignatur an und hebt den Parameter hervor, den Sie gerade vervollständigen.

Die Signaturhilfe wird automatisch angezeigt, wenn Sie in einem Funktionsaufruf ein ( oder , eingeben. Drücken Sie ⇧⌘Space (Windows, Linux Ctrl+Shift+Space), um die Signaturhilfe manuell auszulösen.

Automatische Importe

Automatische Importe beschleunigen das Codieren, indem sie verfügbare Variablen in Ihrem Projekt und dessen Abhängigkeiten vorschlagen. Wenn Sie einen dieser Vorschläge auswählen, fügt VS Code automatisch einen Import dafür am Anfang der Datei hinzu.

Geben Sie einfach Text ein, um Vorschläge für alle verfügbaren JavaScript-Symbole in Ihrem aktuellen Projekt zu sehen. Auto-Import-Vorschläge zeigen an, woher sie importiert werden.

Wenn Sie einen dieser Auto-Import-Vorschläge auswählen, fügt VS Code einen Import dafür hinzu.

In diesem Beispiel fügt VS Code einen Import für Button aus material-ui am Anfang der Datei hinzu.

Um automatische Importe zu deaktivieren, setzen Sie "javascript.suggest.autoImports" auf false.

Importe beim Einfügen hinzufügen

Wenn Sie Code zwischen Editoren kopieren und einfügen, kann VS Code automatisch Importe hinzufügen, wenn der Code eingefügt wird. Wenn Sie Code einfügen, der ein undefiniertes Symbol enthält, wird eine Einfüge-Steuerung angezeigt, mit der Sie zwischen dem Einfügen als einfacher Text oder dem Hinzufügen von Importen wählen können.

Diese Funktion ist standardmäßig aktiviert, aber Sie können sie deaktivieren, indem Sie die Einstellung javascript.updateImportsOnPaste.enabled umschalten.

Sie können das Einfügen mit Importen zum Standardverhalten machen, ohne die Einfüge-Steuerung anzuzeigen, indem Sie die Einstellung editor.pasteAs.preferences konfigurieren. Fügen Sie text.updateImports.jsts oder text.updateImports hinzu, um beim Einfügen immer Importe hinzuzufügen.

Importe organisieren

Die Aktion Importe organisieren sortiert die Importe in einer JavaScript-Datei und entfernt alle nicht verwendeten Importe.

Sie können Importe organisieren über das Kontextmenü Quellaktion oder mit der Tastenkombination ⇧⌥O (Windows, Linux Shift+Alt+O) ausführen.

Importe organisieren kann auch automatisch erfolgen, wenn Sie eine JavaScript-Datei speichern, indem Sie

"editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
}

Importe nach Dateiverschiebung aktualisieren

Wenn Sie eine Datei verschieben oder umbenennen, die von anderen Dateien in Ihrem JavaScript-Projekt importiert wird, kann VS Code automatisch alle Importpfade aktualisieren, die auf die verschobene Datei verweisen.

Die Einstellung javascript.updateImportsOnFileMove.enabled steuert dieses Verhalten. Gültige Einstellungswerte sind:

• "prompt" - Der Standard. Fragt, ob Pfade für jede Dateiverschiebung aktualisiert werden sollen.
• "always" - Pfade immer automatisch aktualisieren.
• "never" - Pfade nicht automatisch aktualisieren und nicht nachfragen.

Formatierung

VS Codes integrierter JavaScript-Formatierer bietet grundlegende Codeformatierung mit vernünftigen Standardeinstellungen.

Die Einstellungen javascript.format.* in den Einstellungen konfigurieren den integrierten Formatierer. Oder, wenn der integrierte Formatierer stört, setzen Sie "javascript.format.enable" auf false, um ihn zu deaktivieren.

Für spezialisiertere Code-Formatierungsstile können Sie versuchen, eine der JavaScript-Formatierungs-Erweiterungen aus dem Marketplace zu installieren.

JSX und automatisch schließende Tags

Alle JavaScript-Funktionen von VS Code funktionieren auch mit JSX.

Sie können JSX-Syntax sowohl in normalen *.js-Dateien als auch in *.jsx-Dateien verwenden.

VS Code enthält auch JSX-spezifische Funktionen wie das automatische Schließen von JSX-Tags.

Setzen Sie "javascript.autoClosingTags" auf false, um das Schließen von JSX-Tags zu deaktivieren.

Code-Navigation

Code-Navigation ermöglicht es Ihnen, schnell durch JavaScript-Projekte zu navigieren.

• Definition aufrufen F12 - Gehen Sie zum Quellcode der Definition eines Symbols.
• Definition anzeigen ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10) - Öffnet ein Vorschaufenster, das die Definition eines Symbols anzeigt.
• Referenzen aufrufen ⇧F12 (Windows, Linux Shift+F12) - Zeigt alle Referenzen auf ein Symbol an.
• Typdefinition aufrufen - Gehen Sie zum Typ, der ein Symbol definiert. Für eine Instanz einer Klasse wird hierdurch die Klasse selbst angezeigt, anstatt wo die Instanz definiert ist.

Sie können über die Symbolsuche navigieren, indem Sie die Befehle Symbol aufrufen aus der Befehlspalette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) verwenden.

• Symbol in Datei aufrufen ⇧⌘O (Windows, Linux Ctrl+Shift+O)
• Symbol im Arbeitsbereich aufrufen ⌘T (Windows, Linux Ctrl+T)

Umbenennen

Drücken Sie F2, um das Symbol unter dem Cursor in Ihrem JavaScript-Projekt umzubenennen.

Refactoring

VS Code enthält einige praktische Refactorings für JavaScript wie Funktion extrahieren und Konstante extrahieren. Wählen Sie einfach den Quellcode aus, den Sie extrahieren möchten, und klicken Sie dann auf die Glühbirne in der Randleiste oder drücken Sie (⌘. (Windows, Linux Ctrl+.)), um verfügbare Refactorings anzuzeigen.

Verfügbare Refactorings umfassen:

• In Methode oder Funktion extrahieren.
• In Konstante extrahieren.
• Konvertieren zwischen benannten und Namespace-Importen.
• In neue Datei verschieben.

Siehe Refactorings für weitere Informationen zu Refactorings und wie Sie Tastenkombinationen für einzelne Refactorings konfigurieren können.

Zusätzlich ist die Einstellung Code Action Widget: Nearby Quick Fixes einbeziehen (editor.codeActionWidget.includeNearbyQuickFixes) standardmäßig aktiviert, was den nächstgelegenen Quick Fix in einer Zeile von ⌘. (Windows, Linux Ctrl+.) (Befehls-ID editor.action.quickFix) aktiviert, unabhängig davon, wo sich Ihr Cursor in dieser Zeile befindet.

Der Befehl hebt den Quellcode hervor, der mit Quick Fixes refactored oder behoben wird. Normale Codeaktionen und nicht-fixierende Refactorings können weiterhin an der Cursorposition aktiviert werden.

Nicht verwendete Variablen und nicht erreichbarer Code

Nicht verwendeter JavaScript-Code, wie z. B. der else-Block einer if-Anweisung, die immer wahr ist, oder ein nicht referenzierter Import, wird im Editor ausgegraut.

Sie können diesen nicht verwendeten Code schnell entfernen, indem Sie den Cursor darauf platzieren und den Befehl Quick Fix (⌘. (Windows, Linux Ctrl+.)) auslösen oder auf die Glühbirne klicken.

Um das Ausgrauen von nicht verwendetem Code zu deaktivieren, setzen Sie "editor.showUnused" auf false. Sie können das Ausgrauen von nicht verwendetem Code auch nur in JavaScript deaktivieren, indem Sie

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

Codeaktionen beim Speichern

Die Einstellung editor.codeActionsOnSave ermöglicht es Ihnen, eine Reihe von Codeaktionen zu konfigurieren, die beim Speichern einer Datei ausgeführt werden. Sie können beispielsweise das Organisieren von Importen beim Speichern aktivieren, indem Sie

// On explicit save, run fixAll source action. On auto save (window or focus change), run organizeImports source action.
"editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.organizeImports": "always",
}

Derzeit werden die folgenden Enums unterstützt:

• explicit (Standard): Löst Codeaktionen beim expliziten Speichern aus. Gleiche Funktionalität wie true.
• always: Löst Codeaktionen beim expliziten Speichern und bei Autosaves aufgrund von Fenster- oder Fokuswechseln aus.
• never: Löst niemals Codeaktionen beim Speichern aus. Gleiche Funktionalität wie false.

Sie können editor.codeActionsOnSave auch auf ein Array von Codeaktionen setzen, die in Reihenfolge ausgeführt werden sollen.

Hier sind einige Quellaktionen:

• "organizeImports" - Aktiviert das Organisieren von Importen beim Speichern.
• "fixAll" - Auto Fix beim Speichern berechnet alle möglichen Korrekturen in einem Durchlauf (für alle Anbieter, einschließlich ESLint).
• "fixAll.eslint" - Auto Fix nur für ESLint.
• "addMissingImports" - Fügt alle fehlenden Importe beim Speichern hinzu.

Siehe Node.js/JavaScript für weitere Informationen.

Code-Vorschläge

VS Code schlägt automatisch einige gängige Codevereinfachungen vor, wie z. B. das Umwandeln einer Kette von .then-Aufrufen eines Promises in die Verwendung von async und await.

Setzen Sie "javascript.suggestionActions.enabled" auf false, um Vorschläge zu deaktivieren.

Vervollständigen von Code mit KI verbessern

GitHub Copilot ist ein KI-gestütztes Code-Vervollständigungstool, das Ihnen hilft, Code schneller und intelligenter zu schreiben. Sie können die GitHub Copilot-Erweiterung in VS Code verwenden, um Code zu generieren oder aus dem generierten Code zu lernen.

GitHub Copilot bietet Vorschläge für zahlreiche Sprachen und eine breite Palette von Frameworks und funktioniert besonders gut für Python, JavaScript, TypeScript, Ruby, Go, C# und C++.

Sie können mehr darüber erfahren, wie Sie mit Copilot beginnen können, in der Copilot-Dokumentation.

Sobald Sie die Copilot-Erweiterung installiert und aktiviert haben, können Sie sie für Ihre JavaScript-Projekte ausprobieren.

Erstellen Sie eine neue Datei – Sie können den Befehl Datei: Neue Datei in der Befehlspalette (F1) verwenden.

Geben Sie in der JavaScript-Datei den folgenden Funktionsheader ein:

function calculateDaysBetweenDates(begin, end) {

Copilot liefert einen Vorschlag wie den folgenden – verwenden Sie Tab, um den Vorschlag zu akzeptieren.

Inline-Hinweise

Inline-Hinweise fügen zusätzliche Inline-Informationen zum Quellcode hinzu, um Ihnen das Verständnis des Codes zu erleichtern.

Inline-Hinweise für Parameternamen zeigen die Namen von Parametern in Funktionsaufrufen an.

Dies kann Ihnen helfen, die Bedeutung jedes Arguments auf einen Blick zu verstehen, was besonders hilfreich für Funktionen ist, die boolesche Flags annehmen oder Parameter haben, die leicht verwechselt werden können.

Um Parameternamen-Hinweise zu aktivieren, setzen Sie javascript.inlayHints.parameterNames. Es gibt drei mögliche Werte:

• none — Parameter-Inline-Hinweise deaktivieren.
• literals — Nur Inline-Hinweise für Literale (Zeichenkette, Zahl, Boolean) anzeigen.
• all — Inline-Hinweise für alle Argumente anzeigen.

Inline-Hinweise für Variablentypen zeigen die Typen von Variablen an, die keine expliziten Typannotationen haben.

Einstellung: javascript.inlayHints.variableTypes.enabled

Inline-Hinweise für Eigenschaftstypen zeigen den Typ von Klasseneigenschaften an, die keine explizite Typannotation haben.

Einstellung: javascript.inlayHints.propertyDeclarationTypes.enabled

Parametertyp-Hinweise zeigen die Typen von implizit typisierten Parametern an.

Einstellung: javascript.inlayHints.parameterTypes.enabled

Rückgabetyp-Inline-Hinweise zeigen die Rückgabetypen von Funktionen an, die keine explizite Typannotation haben.

Einstellung: javascript.inlayHints.functionLikeReturnTypes.enabled

Referenzen CodeLens

Der JavaScript-Referenzen CodeLens zeigt eine Inline-Anzahl von Referenzen für Klassen, Methoden, Eigenschaften und exportierte Objekte.

Um den Referenzen CodeLens zu aktivieren, setzen Sie "javascript.referencesCodeLens.enabled" auf true.

Klicken Sie auf die Referenzanzahl, um schnell eine Liste von Referenzen zu durchsuchen.

Linter

Linter bieten Warnungen für verdächtigen Code. Obwohl VS Code keinen integrierten JavaScript-Linter enthält, sind viele JavaScript-Linter-Erweiterungen im Marktplatz verfügbar.

Typprüfung

Sie können einige der erweiterten Typüberprüfungs- und Fehlerberichterstattungsfunktionen von TypeScript auch in regulären JavaScript-Dateien 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, darunter Fehlenden Import hinzufügen und Fehlende Eigenschaft hinzufügen.

TypeScript versucht, Typen in .js-Dateien genauso abzuleiten wie in .ts-Dateien. Wenn Typen nicht abgeleitet werden können, können sie mit JSDoc-Kommentaren explizit angegeben werden. Sie können mehr darüber lesen, wie TypeScript JSDoc für die JavaScript-Typprüfung verwendet, in Arbeiten mit JavaScript.

Die Typprüfung von JavaScript ist optional und muss aktiviert werden. Vorhandene JavaScript-Validierungstools wie ESLint können neben den integrierten Typprüfungsfunktionen verwendet werden.

Debugging

VS Code bietet eine hervorragende Debugging-Unterstützung für JavaScript. Setzen Sie Breakpoints, inspizieren Sie Objekte, navigieren Sie im Aufrufstapel und führen Sie Code in der Debug-Konsole aus. Weitere Informationen finden Sie im Debugging-Thema.

Clientseitiges Debuggen

Sie können Ihren clientseitigen Code mit einem Browser-Debugger debuggen, z. B. mit unserem integrierten Debugger für Edge und Chrome oder dem Debugger für Firefox.

Serverseitiges Debuggen

Debuggen Sie Node.js in VS Code mit dem integrierten Debugger. Die Einrichtung ist einfach und es gibt ein Node.js Debugging-Tutorial, das Ihnen helfen wird.

Beliebte Erweiterungen

VS Code bietet eine hervorragende Unterstützung für JavaScript, aber Sie können zusätzlich Debugger, Snippets, Linter und andere JavaScript-Tools über Erweiterungen installieren.

Nächste Schritte

Lesen Sie weiter, um mehr über Folgendes zu erfahren:

• Arbeiten mit JavaScript - Detailliertere Informationen zur JavaScript-Unterstützung von VS Code und zur Fehlerbehebung bei häufigen Problemen.
• jsconfig.json - Detaillierte Beschreibung der Projektdatei jsconfig.json.
• IntelliSense - Erfahren Sie mehr über IntelliSense und wie Sie es effektiv für Ihre Sprache nutzen.
• Debugging - Erfahren Sie, wie Sie das Debugging für Ihre Anwendung einrichten.
• Node.js - Eine Schritt-für-Schritt-Anleitung zur Erstellung einer Express-Node.js-Anwendung.
• TypeScript - VS Code bietet hervorragende Unterstützung für TypeScript, das Struktur und starke Typisierung in Ihren JavaScript-Code bringt.

Häufig gestellte Fragen

Unterstützt VS Code JSX und React Native?

VS Code unterstützt JSX und React Native. Sie erhalten IntelliSense für React/JSX und React Native aus automatisch heruntergeladenen Typdeklarationsdateien (Typings) aus dem npmjs Typdeklarationsdateien-Repository. Zusätzlich können Sie die beliebte React Native-Erweiterung aus dem Marketplace installieren.

Um ES6-Importanweisungen für React Native zu aktivieren, müssen Sie die Compiler-Option allowSyntheticDefaultImports auf true setzen. Dies teilt dem Compiler mit, synthetische Standardelemente zu erstellen, und Sie erhalten IntelliSense. React Native verwendet im Hintergrund Babel, um den richtigen Laufzeitcode mit Standardelementen zu erstellen. Wenn Sie auch das Debugging von React Native-Code durchführen möchten, können Sie die React Native Extension installieren.

Unterstützt VS Code die Dart-Programmiersprache und das Flutter-Framework?

Ja, es gibt VS Code-Erweiterungen für die Entwicklung von Dart und Flutter. Weitere Informationen finden Sie in der Flutter.dev-Dokumentation.

IntelliSense funktioniert nicht für externe Bibliotheken.

Automatic Type Acquisition funktioniert für Abhängigkeiten, die von npm (in package.json angegeben), Bower (in bower.json angegeben) heruntergeladen wurden, und für viele der gängigsten Bibliotheken, die in Ihrer Ordnerstruktur aufgeführt sind (z. B. jquery-3.1.1.min.js).

ES6-Stil-Importe funktionieren nicht.

Wenn Sie ES6-Stil-Importe verwenden möchten, aber einige Typdeklarationsdateien (Typings) noch keine ES6-Stil-Exporte verwenden, setzen Sie die TypeScript-Compileroption allowSyntheticDefaultImports auf true.

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6",
    // This is the line you want to add
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

Kann ich minimierten/verfälschten JavaScript debuggen?

Ja, das können Sie. Dies können Sie mithilfe von JavaScript-Source-Maps im Thema Node.js-Debugging sehen.

Wie deaktiviere ich die Syntaxvalidierung bei Verwendung von Nicht-ES6-Konstrukten?

Einige Benutzer möchten Syntaxkonstrukte wie den vorgeschlagenen Pipeline-Operator (|>) verwenden. Diese werden jedoch derzeit vom JavaScript-Sprachdienst von VS Code nicht unterstützt und als Fehler markiert. Für Benutzer, die diese zukünftigen Funktionen weiterhin nutzen möchten, stellen wir die Einstellung javascript.validate.enable in den Einstellungen bereit.

Mit javascript.validate.enable: false deaktivieren Sie die gesamte integrierte Syntaxprüfung. Wenn Sie dies tun, empfehlen wir die Verwendung eines Linters wie ESLint zur Validierung Ihres Quellcodes.

Kann ich andere JavaScript-Tools wie Flow verwenden?

Ja, aber einige von Flows Sprachfunktionen wie Typ- und Fehlerprüfung können mit der integrierten JavaScript-Unterstützung von VS Code in Konflikt geraten. Informationen zum Deaktivieren der integrierten JavaScript-Unterstützung von VS Code finden Sie unter JavaScript-Unterstützung deaktivieren.