Tipps und Tricks für Visual Studio Code

Nutzen Sie die Tipps und Tricks in diesem Artikel, um sofort loszulegen und zu lernen, wie Sie mit Visual Studio Code produktiv arbeiten. Machen Sie sich mit den leistungsstarken Funktionen für die Bearbeitung, Code-Intelligenz und Quellcodeverwaltung vertraut und lernen Sie nützliche Tastenkombinationen. Erkunden Sie auch die anderen ausführlichen Themen in Erste Schritte und im Benutzerhandbuch, um mehr zu erfahren.

Wenn Sie gerade erst anfangen, sehen Sie sich unbedingt das VS Code Tutorial an, um die wichtigsten Funktionen Schritt für Schritt zu entdecken.

Wenn Sie Visual Studio Code noch nicht installiert haben, gehen Sie zur Seite Download. Plattformspezifische Installationsanweisungen finden Sie unter VS Code unter Linux ausführen, macOS und Windows.

Bevorzugen Sie ein Video? Sehen Sie sich die VS Code Day-Vorträge Visual Studio Code Tipps und Tricks oder Verbessern Sie Ihre VS Code-Erfahrung an.

Grundlagen

Erste Schritte

Der beste Weg, VS Code im praktischen Einsatz zu erkunden, ist das Öffnen der Seite Willkommen und die Auswahl eines Walkthroughs für eine geführte Tour durch die Einrichtungsschritte, Funktionen und tiefergehenden Anpassungen, die VS Code bietet. Während Sie entdecken und lernen, verfolgen die Walkthroughs Ihren Fortschritt.

Öffnen Sie die Willkommensseite über das Menü Hilfe > Willkommen oder verwenden Sie den Befehl Hilfe: Willkommen aus der Befehlspalette (⇧⌘P (Windows, Linux Ctrl+Shift+P)).

Erweiterungen können auch Walkthroughs beitragen. Sie können einen Walkthrough auch direkt öffnen, indem Sie den Befehl Hilfe: Walkthrough öffnen... aus der Befehlspalette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) verwenden.

Wenn Sie Ihre Fähigkeiten zur Codebearbeitung verbessern möchten, öffnen Sie den Interaktiven Editor-Spielplatz. Probieren Sie die Codebearbeitungsfunktionen von VS Code aus, wie z. B. Mehrfachcursor-Bearbeitung, IntelliSense, Snippets, Emmet und mehr.

Öffnen Sie die Willkommensseite über das Menü Hilfe > Editor-Spielplatz oder verwenden Sie den Befehl Hilfe: Interaktiver Editor-Spielplatz aus der Befehlspalette (⇧⌘P (Windows, Linux Ctrl+Shift+P)).

Befehlspalette

Greifen Sie auf alle verfügbaren Befehle basierend auf Ihrem aktuellen Kontext zu.

Tastenkombination: ⇧⌘P (Windows, Linux Ctrl+Shift+P)

Standard-Tastenkombinationen

Viele der Befehle in der Befehlspalette haben Standard-Tastenkombinationen. Sie können die Standard-Tastenkombination neben dem Befehl in der Befehlspalette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) sehen.

Tastenkombinations-Referenzblätter

Laden Sie das Tastenkombinations-Referenzblatt für Ihre Plattform herunter (macOS, Windows, Linux).

Schwebende Fenster

Sie können einen Editor, das Terminal oder bestimmte Ansichten in einem schwebenden Fenster öffnen, um beispielsweise den Editor an eine andere Stelle auf Ihrem Monitor oder sogar auf einen anderen Monitor zu verschieben.

Ziehen Sie einen Editor-Tab aus dem aktuellen VS Code-Fenster, um ihn in einem schwebenden Fenster zu öffnen. Alternativ können Sie die Kontextoptionen In neues Fenster verschieben oder In neues Fenster kopieren des Editor-Tabs verwenden.

Integriertes Terminal

Tastenkombination: ⌃` (Windows, Linux Ctrl+`)

Sie können eine andere Terminal-Shell über das Dropdown-Menü auswählen. Je nach Betriebssystem und Systemkonfiguration werden möglicherweise unterschiedliche Shells angezeigt.

Weiterführende Lektüre

• Dokumentation zum integrierten Terminal
• Artikel "Mastering VS Code's Terminal"

Seitenleiste umschalten

Tastenkombination: ⌘B (Windows, Linux Ctrl+B)

Panel umschalten

Tastenkombination: ⌘J (Windows, Linux Ctrl+J)

Zen-Modus

Wechseln Sie in den ablenkungsfreien Zen-Modus.

Tastenkombination: ⌘K Z (Windows, Linux Ctrl+K Z)

Drücken Sie Esc zweimal, um den Zen-Modus zu beenden.

Kommandozeile

VS Code verfügt über eine leistungsstarke Befehlszeilenschnittstelle (CLI), mit der Sie anpassen können, wie der Editor gestartet wird, um verschiedene Szenarien zu unterstützen. Sie können beispielsweise VS Code von der Befehlszeile aus starten, um einen Diff-Editor zum Vergleichen zweier Dateien zu öffnen.

Stellen Sie sicher, dass die VS Code-Binärdatei in Ihrem Pfad enthalten ist, damit Sie einfach 'code' eingeben können, um VS Code zu starten. Informationen zum Hinzufügen von VS Code zu Ihrem Umgebungspfad während der Installation finden Sie in den plattformspezifischen Setup-Themen (VS Code unter Linux ausführen, macOS, Windows).

# open code with current directory
code .

# open the current directory in the most recently used code window
code -r .

# create a new window
code -n

# change the language
code --locale=es

# open diff editor
code --diff <file1> <file2>

# open file at specific line and column <file:line[:character]>
code --goto package.json:10:5

# see help options
code --help

# disable all extensions
code --disable-extensions .

.vscode-Ordner

Arbeitsbereichsspezifische Konfigurationsdateien befinden sich in einem .vscode-Ordner im Stammverzeichnis Ihres Arbeitsbereichs. Zum Beispiel tasks.json für den Task Runner und launch.json für den Debugger.

Statusleiste

Fehler und Warnungen

Tastenkombination: ⇧⌘M (Windows, Linux Ctrl+Shift+M)

Springen Sie schnell zu Fehlern und Warnungen im Projekt.

Springen Sie durch Fehler mit F8 oder ⇧F8 (Windows, Linux Shift+F8)

Sie können die Problemauflistung entweder nach Typ ('info', 'errors', 'warnings') oder nach übereinstimmendem Text filtern.

Sprachmodus ändern

Der Sprachmodus in der Statusleiste zeigt die Sprache (z. B. Markdown, Python und mehr) an, die dem aktiven Editor zugeordnet ist. Sie können den Sprachmodus für den aktuellen Editor ändern, indem Sie auf den Sprachmodus-Indikator in der Statusleiste klicken oder die Tastenkombination verwenden.

Tastenkombination: ⌘K M (Windows, Linux Ctrl+K M)

Wenn Sie den neuen Sprachmodus für einen Dateityp beibehalten möchten, verwenden Sie den Befehl Dateizuordnung konfigurieren für, um die aktuelle Dateierweiterung einer installierten Sprache zuzuordnen.

Anpassung

Es gibt viele Optionen, um VS Code nach Ihren Wünschen anzupassen

• Thema ändern
• Tastenkombinationen ändern
• Einstellungen anpassen
• JSON-Validierung hinzufügen
• Snippets erstellen
• Erweiterungen installieren

Thema ändern

VS Code wird mit einer Reihe von integrierten Farbthemen geliefert. Verwenden Sie den Befehl Einstellungen: Farbthema oder die Tastenkombination.

Tastenkombination: ⌘K ⌘T (Windows, Linux Ctrl+K Ctrl+T)

Sie können weitere Themen aus dem VS Code-Erweiterungs- Marketplace installieren. Wählen Sie den Befehl Einstellungen: Farbthema > Weitere Farbthemen durchsuchen..., um Themen aus dem Marketplace zu suchen.

Zusätzlich können Sie Dateisymbol-Designs installieren und ändern.

Keymaps

Sind Sie Tastenkombinationen aus einem anderen Editor gewohnt? Sie können eine Keymap-Erweiterung installieren, die die Tastenkombinationen Ihres bevorzugten Editors in VS Code bringt. Verwenden Sie den Befehl Einstellungen: Keymaps, um die aktuelle Liste im Visual Studio Marketplace anzuzeigen.

Einige der beliebtesten Keymaps sind

• Vim
• Sublime Text Keymap
• Emacs Keymap
• Atom Keymap
• Brackets Keymap
• Eclipse Keymap
• Visual Studio Keymap

Tastenkombinationen anpassen

Sie können die Tastenkombinationen im Editor Tastenkombinationen anzeigen und anpassen. Verwenden Sie den Befehl Einstellungen: Tastenkombinationen öffnen oder die Tastenkombination, um den Editor zu öffnen.

Tastenkombination: ⌘K ⌘S (Windows, Linux Ctrl+K Ctrl+S)

Wählen Sie das Bleistiftsymbol aus oder drücken Sie Enter bei einem bestimmten Eintrag, um die Tastenkombination zu bearbeiten. Filtern Sie die Liste, indem Sie das Suchfeld verwenden.

Sie können auch nach Tastenkombinationen suchen und eigene Tastenkombinationen zur Datei keybindings.json hinzufügen.

Weitere Informationen finden Sie unter Tastenkombinationen für Visual Studio Code.

Einstellungen anpassen

Standardmäßig zeigt VS Code den Einstellungs-Editor an, um Einstellungen anzuzeigen und zu bearbeiten. Sie können auch die zugrunde liegende Datei settings.json bearbeiten, indem Sie den Befehl Benutzereinstellungen (JSON) öffnen verwenden oder Ihren Standard-Einstellungs-Editor mit der Einstellung workbench.settings.editor ändern.

Benutzereinstellungen settings.json öffnen

Tastenkombination: ⌘, (Windows, Linux Ctrl+,)

Schriftgröße verschiedener UI-Elemente ändern

// Main editor
"editor.fontSize": 18,
// Terminal panel
"terminal.integrated.fontSize": 14,
// Output panel
"[Log]": {
    "editor.fontSize": 15
}

Zoomstufe ändern

"window.zoomLevel": 5

Schriftarten-Ligaturen

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true

Tipp: Sie müssen eine Schriftart installiert haben, die Schriftarten-Ligaturen unterstützt. FiraCode ist eine beliebte Schriftart im VS Code-Team.

Automatisches Speichern

"files.autoSave": "afterDelay"

Sie können das automatische Speichern auch über das Hauptmenü mit Datei > Automatisches Speichern umschalten.

Formatieren beim Speichern

"editor.formatOnSave": true

Formatieren beim Einfügen

"editor.formatOnPaste": true

Größe von Tabulatorzeichen ändern

"editor.tabSize": 4

Leerzeichen oder Tabs

"editor.insertSpaces": true

Leerzeichen darstellen

"editor.renderWhitespace": "all"

Leerzeichen werden standardmäßig bei der Textauswahl dargestellt.

Dateien / Ordner ignorieren

Entfernt diese Dateien / Ordner aus Ihrem Editorfenster.

"files.exclude": {
    "somefolder/": true,
    "somefile": true
}

Entfernt diese Dateien / Ordner aus Suchergebnissen.

"search.exclude": {
    "someFolder/": true,
    "somefile": true
}

Erfahren Sie mehr über die vielen anderen Anpassungsmöglichkeiten.

Sprachspezifische Einstellungen

Sie können Einstellungen für bestimmte Sprachen mithilfe der Sprachkennung einschränken. Eine Liste der häufig verwendeten Sprach-IDs finden Sie im Referenzdokument Sprachbezeichner.

"[languageid]": {

}

Tipp: Sie können auch sprachspezifische Einstellungen mit dem Befehl Sprachspezifische Einstellungen konfigurieren erstellen.

JSON-Validierung hinzufügen

JSON-Validierung ist für viele Dateitypen standardmäßig aktiviert. Erstellen Sie Ihr eigenes Schema und Ihre eigene Validierung in settings.json

"json.schemas": [
    {
        "fileMatch": [
            "bower.json"
        ],
        "url": "https://json.schemastore.org/bower"
    }
]

oder für ein Schema, das in Ihrem Arbeitsbereich definiert ist

"json.schemas": [
    {
        "fileMatch": [
            "**/foo.json"
        ],
        "url": "./myschema.json"
    }
]

oder um ein benutzerdefiniertes Schema zu verwenden

"json.schemas": [
    {
        "fileMatch": [
            "/.myconfig"
        ],
        "schema": {
            "type": "object",
            "properties": {
                "name" : {
                    "type": "string",
                    "description": "The name of the entry"
                }
            }
        }
    }
]

Weitere Informationen finden Sie in der JSON-Dokumentation.

Standardbrowser konfigurieren

In VS Code können Sie mit Strg+Klick (Cmd+Klick auf macOS) auf einen Link klicken, um ihn in Ihrem Standardbrowser zu öffnen. Sie können den Standardbrowser konfigurieren, indem Sie die Einstellung workbench.externalBrowser Einstellung festlegen.

Geben Sie den vollständigen Pfad zur Browser-Executable als Einstellungswert an. Alternativ können Sie, um eine korrekte Funktion über verschiedene Geräte hinweg sicherzustellen, auch Browser-Aliase wie edge, chrome oder firefox verwenden.

"workbench.externalBrowser": "edge"

Mehrere Protokolle in einer Ansicht kombinieren

Das Ausgabe-Panel zeigt die Ausgabe verschiedener Dienste an. Jeder Dienst hat in der Regel sein eigenes Protokoll. Um verwandte Protokollinformationen von mehreren Diensten zu analysieren, können Sie mehrere Protokolle zu einem einzigen verknüpften Protokoll kombinieren.

Wählen Sie Verknüpftes Protokoll erstellen... aus dem Überlaufmenü des Ausgabe-Panels.

Erweiterungen

Tastenkombination: ⇧⌘X (Windows, Linux Ctrl+Shift+X)

Erweiterungen finden

Sie können mehrere Quellen verwenden, um Erweiterungen zu finden

• Im VS Code Marketplace.
• Innerhalb von VS Code in der Ansicht Erweiterungen suchen.
• Empfehlungen für Erweiterungen anzeigen
• Von der Community kuratierte Erweiterungslisten, wie z. B. awesome-vscode.

Beliebte Erweiterungen finden

Wählen Sie in der Ansicht Erweiterungen das Steuerelement Filtern aus und wählen Sie dann Am beliebtesten oder Sortieren nach > Installationsanzahl aus.

Erweiterungsempfehlungen

Wählen Sie in der Ansicht Erweiterungen das Steuerelement Filtern aus und wählen Sie dann Empfohlen, um die Liste der empfohlenen Erweiterungen anzuzeigen.

Eigene Erweiterung erstellen

Sind Sie daran interessiert, Ihre eigene Erweiterung zu erstellen? Sie können im API-Dokumentation erfahren, wie das geht, insbesondere die Dokumentation zu Contribution Points.

• Konfiguration
• Befehle
• Tastenkombinationen
• Sprachen
• Debugger
• Grammatiken
• Designs
• Snippets
• jsonValidation

Dateien und Ordner

Einfaches Dateidialogfeld

Mit dem einfachen Dateidialog können Sie den systemeigenen Standard-Dateidialog zum Öffnen und Speichern von Dateien und Ordnern durch einen einfacheren Quick-Pick-Dialog innerhalb von VS Code ersetzen.

Einstellung: files.simpleDialog

Explorer-Ansicht anzeigen

Tastenkombination: ⇧⌘E (Windows, Linux Ctrl+Shift+E)

Schnell öffnen

Dateien schnell suchen und öffnen.

Tastenkombination: ⌘P (Windows, Linux Ctrl+P)

Tipp: Geben Sie ? ein, um Befehlsvorschläge anzuzeigen.

Das Eingeben von Befehlen wie edt oder term gefolgt von einem Leerzeichen öffnet eine Dropdown-Liste.

Zwischen zuletzt geöffneten Dateien navigieren

Drücken Sie wiederholt die Tastenkombination Schnell öffnen, um schnell zwischen kürzlich geöffneten Dateien zu wechseln.

Mehrere Dateien über Schnell öffnen öffnen

Sie können mehrere Dateien über Schnell öffnen öffnen, indem Sie die Pfeiltaste nach rechts drücken. Dies öffnet die aktuell ausgewählte Datei im Hintergrund, und Sie können weiterhin Dateien über Schnell öffnen auswählen.

Zwischen zuletzt geöffneten Ordnern und Arbeitsbereichen navigieren

Einen kürzlich geöffneten Ordner oder Arbeitsbereich öffnen.

Tastenkombination: ⌃R (Windows, Linux Ctrl+R)

Zeigt ein Dropdown-Menü mit der Liste von Datei > Zuletzt geöffnet mit kürzlich geöffneten Ordnern und Arbeitsbereichen, gefolgt von Dateien, an.

Datei aus einem Link erstellen oder öffnen

Tastenkombination: Strg+Klick (Cmd+Klick auf macOS)

Sie können schnell eine Datei oder ein Bild öffnen oder eine neue Datei erstellen, indem Sie den Cursor auf den Dateilink bewegen und dann Strg+Klick drücken.

Den aktuell geöffneten Ordner schließen

Tastenkombination: ⌘K F (Windows, Linux Ctrl+K F)

Navigationsverlauf

Gesamten Verlauf durchsuchen: ⌃Tab (Windows, Linux Ctrl+Tab)

Zurück navigieren: ⌃- (Windows Alt+Links, Linux Ctrl+Alt+-)

Vorwärts navigieren: ⌃⇧- (Windows Alt+Rechts, Linux Ctrl+Shift+-)

Dateizuordnungen

Erstellen Sie Sprachzuordnungen für Dateien, die nicht korrekt erkannt werden. Zum Beispiel sind viele Konfigurationsdateien mit benutzerdefinierten Dateierweiterungen eigentlich JSON.

"files.associations": {
    ".database": "json"
}

Verhindern von inkonsistenten Speicherungen

VS Code zeigt eine Fehlermeldung an, wenn Sie versuchen, eine Datei zu speichern, die nicht gespeichert werden kann, da sie auf der Festplatte geändert wurde. VS Code blockiert das Speichern der Datei, um Überschreibungen von Änderungen zu verhindern, die außerhalb des Editors vorgenommen wurden.

Um den Speicherkonflikt zu lösen, wählen Sie die Aktion Vergleichen im Benachrichtigungs-Popup aus, um einen Diff-Editor zu öffnen, der Ihnen den Inhalt der Datei auf der Festplatte (links) im Vergleich zum Inhalt in VS Code (rechts) anzeigt.

Verwenden Sie die Aktionen in der Werkzeugleiste des Editors, um den Speicherkonflikt zu lösen. Sie können entweder Ihre Änderungen Akzeptieren und damit alle Änderungen auf der Festplatte überschreiben, oder zur Version auf der Festplatte Zurücksetzen. Zurücksetzen bedeutet, dass Ihre Änderungen verloren gehen.

Hinweis: Die Datei bleibt "dirty" (un gespeichert) und kann nicht gespeichert werden, bis Sie eine der beiden Aktionen auswählen, um den Konflikt zu lösen.

Bearbeitungs-Hacks

Hier ist eine Auswahl gängiger Funktionen zur Codebearbeitung. Wenn Sie mit den Tastenkombinationen eines anderen Editors vertrauter sind, sollten Sie eine Keymap-Erweiterung installieren.

Tipp: Sie können empfohlene Keymap-Erweiterungen in der Ansicht Erweiterungen anzeigen, indem Sie die Suche nach @recommended:keymaps filtern.

Nebeneinander liegende Bearbeitung

Tastenkombination: ⌘\ (Windows, Linux Ctrl+\)

Sie können auch Editor-Tabs ziehen und ablegen, um neue Editor-Gruppen zu erstellen und Editor-Tabs zwischen Gruppen zu verschieben.

Zwischen Editoren wechseln

Tastenkombination: ⌘1 (Windows, Linux Ctrl+1), ⌘2 (Windows, Linux Ctrl+2), ⌘3 (Windows, Linux Ctrl+3)

Mehrfachcursor-Auswahl

Um Cursor an beliebigen Positionen hinzuzufügen, wählen Sie eine Position mit der Maus aus und verwenden Sie Alt+Klick (Option+Klick auf macOS).

Um Cursor über oder unter der aktuellen Position zu setzen, verwenden Sie

Tastenkombination: ⌥⌘↑ (Windows Ctrl+Alt+Oben, Linux Shift+Alt+Oben) oder ⌥⌘↓ (Windows Ctrl+Alt+Unten, Linux Shift+Alt+Unten)

Sie können zusätzliche Cursor zu allen Vorkommen der aktuellen Auswahl hinzufügen mit ⇧⌘L (Windows, Linux Ctrl+Shift+L).

Hinweis: Sie können den Modifikator auch auf Strg/Cmd ändern, um mehrere Cursor mit der Einstellung editor.multiCursorModifier anzuwenden. Weitere Informationen finden Sie unter Mehrfachcursor-Modifikator.

Wenn Sie nicht alle Vorkommen der aktuellen Auswahl hinzufügen möchten, können Sie stattdessen ⌘D (Windows, Linux Ctrl+D) verwenden. Dies wählt nur das nächste Vorkommen nach dem von Ihnen ausgewählten aus, sodass Sie Auswahlen einzeln hinzufügen können.

Spalten- (Box-) Auswahl

Sie können Textblöcke auswählen, indem Sie Umschalt+Alt (Umschalt+Option auf macOS) gedrückt halten, während Sie die Maus ziehen. Am Ende jeder ausgewählten Zeile wird ein separater Cursor hinzugefügt.

Sie können auch Tastenkombinationen verwenden, um die Spaltenauswahl auszulösen.

Vertikale Lineale

Sie können vertikale Spaltenlineale zum Editor hinzufügen, indem Sie die Einstellung editor.rulers verwenden, die ein Array von Spaltenzeichenpositionen enthält, an denen Sie vertikale Lineale wünschen.

{
  "editor.rulers": [20, 40, 60]
}

Schnelles Scrollen

Durch Drücken der Alt-Taste wird das schnelle Scrollen im Editor und in den Explorern aktiviert. Standardmäßig verwendet das schnelle Scrollen einen Geschwindigkeitsmultiplikator von 5x, Sie können den Multiplikator jedoch mit der Einstellung Editor: Empfindlichkeit beim schnellen Scrollen (editor.fastScrollSensitivity) steuern.

Gesperrtes Scrollen

Sie können das Scrollen über alle sichtbaren Editoren synchronisieren, indem Sie den Befehl Ansicht: Gesperrtes Scrollen über Editoren umschalten verwenden. Das bedeutet, dass beim Scrollen in einem Editor alle anderen Editoren um den gleichen Betrag scrollen und alles ausgerichtet bleibt.

Sie können wählen, die Scroll-Synchronisierung nur dann zu aktivieren, wenn Sie eine bestimmte Tastenkombination gedrückt halten. Richten Sie eine Tastenkombination für den Befehl workbench.action.holdLockedScrolling ein, um das Scrollen über Editoren vorübergehend zu sperren.

Zeile nach oben / unten kopieren

Tastenkombination: ⇧⌥↑ (Windows Umschalt+Alt+Oben, Linux Strg+Umschalt+Alt+Oben) oder ⇧⌥↓ (Windows Umschalt+Alt+Unten, Linux Strg+Umschalt+Alt+Unten)

Die Befehle Zeile nach oben/unten kopieren sind unter Linux nicht gebunden, da die Standard-Tastenkombinationen von VS Code mit den Ubuntu-Tastenkombinationen kollidieren würden. Sehen Sie Issue #509. Sie können die Befehle editor.action.copyLinesUpAction und editor.action.copyLinesDownAction dennoch auf Ihre eigenen bevorzugten Tastenkombinationen setzen.

Zeile nach oben und unten verschieben

Tastenkombination: ⌥↑ (Windows, Linux Alt+Oben) oder ⌥↓ (Windows, Linux Alt+Unten)

Auswahl verkleinern / erweitern

Tastenkombination: ⌃⇧⌘← (Windows, Linux Umschalt+Alt+Links) oder ⌃⇧⌘→ (Windows, Linux Umschalt+Alt+Rechts)

Weitere Informationen finden Sie in der Dokumentation zu Grundlegende Bearbeitung.

Zu Symbol in Datei wechseln

Tastenkombination: ⇧⌘O (Windows, Linux Ctrl+Shift+O)

Sie können Symbole nach Art gruppieren, indem Sie einen Doppelpunkt hinzufügen, @:.

Zu Symbol im Arbeitsbereich wechseln

Tastenkombination: ⌘T (Windows, Linux Ctrl+T)

Gliederungsansicht

Die Gliederungsansicht im Datei-Explorer (standardmäßig am unteren Rand eingeklappt) zeigt Ihnen die Symbole der aktuell geöffneten Datei.

Sie können nach Symbolname, Kategorie und Position in der Datei sortieren und eine schnelle Navigation zu Symbolpositionen ermöglichen.

Zu bestimmter Zeile navigieren

Tastenkombination: ⌃G (Windows, Linux Ctrl+G)

Cursorposition rückgängig machen

Tastenkombination: ⌘U (Windows, Linux Ctrl+U)

Nachgestellte Leerzeichen abschneiden

Tastenkombination: ⌘K ⌘X (Windows, Linux Ctrl+K Ctrl+X)

Texttransformationsbefehle

Sie können ausgewählten Text mit den Befehlen Transformieren aus der Befehlspalette in Großbuchstaben, Kleinbuchstaben und Titelkonvertierung umwandeln.

Codeformatierung

Aktuell ausgewählter Quellcode: ⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F)

Ganzes Dokument formatieren: ⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I)

Code-Faltung

Tastenkombination: ⌥⌘[ (Windows, Linux Ctrl+Shift+[), ⌥⌘] (Windows, Linux Ctrl+Shift+]) und ⌘K ⌘L (Windows, Linux Ctrl+K Ctrl+L)

Sie können auch alle Regionen im Editor mit Alle falten (⌘K ⌘0 (Windows, Linux Ctrl+K Ctrl+0)) und Alle entfalten (⌘K ⌘J (Windows, Linux Ctrl+K Ctrl+J)) falten/entfalten.

Sie können alle Blockkommentare mit Alle Blockkommentare falten (⌘K ⌘/ (Windows, Linux Ctrl+K Ctrl+/)) falten.

Aktuelle Zeile auswählen

Tastenkombination: ⌘L (Windows, Linux Ctrl+L)

Zum Anfang und Ende der Datei navigieren

Tastenkombination: ⌘↑ (Windows, Linux Ctrl+Home) und ⌘↓ (Windows, Linux Ctrl+End)

Markdown-Vorschau öffnen

Verwenden Sie in einer Markdown-Datei

Tastenkombination: ⇧⌘V (Windows, Linux Ctrl+Shift+V)

Markdown-Bearbeitung und Vorschau nebeneinander

Verwenden Sie in einer Markdown-Datei

Tastenkombination: ⌘K V (Windows, Linux Ctrl+K V)

Die Vorschau und der Editor synchronisieren sich mit Ihrem Scrollen in beiden Ansichten.

IntelliSense

⌃Space (Windows, Linux Ctrl+Space), um das Vorschlagsfenster zu aktivieren.

Sie können verfügbare Methoden, Parameterhinweise, kurze Dokumentationen usw. anzeigen.

Einblenden

Wählen Sie ein Symbol aus, und geben Sie dann ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10) ein. Alternativ können Sie das Kontextmenü verwenden.

Zur Definition springen

Wählen Sie ein Symbol aus, und geben Sie dann F12 ein. Alternativ können Sie das Kontextmenü oder Strg+Klick (Cmd+Klick unter macOS) verwenden.

Sie können mit dem Befehl Gehe zu > Zurück oder ⌃- (Windows Alt+Links, Linux Ctrl+Alt+-) zu Ihrer vorherigen Position zurückkehren.

Sie können auch die Typdefinition anzeigen, indem Sie bei der Typüberprüfung Strg (Cmd unter macOS) gedrückt halten.

Zu Referenzen springen

Wählen Sie ein Symbol aus, und geben Sie dann ⇧F12 (Windows, Linux Shift+F12) ein. Alternativ können Sie das Kontextmenü verwenden.

Alle Referenzen anzeigen

Wählen Sie ein Symbol aus, und geben Sie dann ⇧⌥F12 (Windows, Linux Shift+Alt+F12) ein, um die Ansicht "Referenzen" zu öffnen, die alle Symbole Ihrer Datei in einer eigenen Ansicht anzeigt.

Symbol umbenennen

Wählen Sie ein Symbol aus, und geben Sie dann F2 ein. Alternativ können Sie das Kontextmenü verwenden.

Suchen und ändern

Neben dem Suchen und Ersetzen von Ausdrücken können Sie auch Teile des Übereinstimmenden suchen und wiederverwenden, indem Sie reguläre Ausdrücke mit Erfassungsgruppen verwenden. Aktivieren Sie reguläre Ausdrücke im Suchfeld, indem Sie auf die Schaltfläche Regulären Ausdruck verwenden .* (⌥⌘R (Windows, Linux Alt+R)) klicken und dann einen regulären Ausdruck schreiben und Klammern verwenden, um Gruppen zu definieren. Sie können den Inhalt jeder Gruppe dann mit $1, $2 usw. im Feld "Ersetzen" wiederverwenden.

.eslintrc.json

Installieren Sie die ESLint-Erweiterung. Konfigurieren Sie Ihren Linter nach Belieben. Konsultieren Sie die ESLint-Spezifikation, um Details zu den Linting-Regeln und Optionen zu erfahren.

Hier ist eine Konfiguration zur Verwendung von ES6.

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "classes": true,
      "defaultParams": true
    }
  },
  "rules": {
    "no-const-assign": 1,
    "no-extra-semi": 0,
    "semi": 0,
    "no-fallthrough": 0,
    "no-empty": 0,
    "no-mixed-spaces-and-tabs": 0,
    "no-redeclare": 0,
    "no-this-before-super": 1,
    "no-undef": 1,
    "no-unreachable": 1,
    "no-use-before-define": 0,
    "constructor-super": 1,
    "curly": 0,
    "eqeqeq": 0,
    "func-names": 0,
    "valid-typeof": 1
  }
}

package.json

Sehen Sie IntelliSense für Ihre package.json-Datei.

Emmet-Syntax

Unterstützung für Emmet-Syntax.

Snippets

Eigene Snippets erstellen

Datei > Einstellungen > Snippets konfigurieren, wählen Sie die Sprache aus und erstellen Sie ein Snippet.

"create component": {
    "prefix": "component",
    "body": [
        "class $1 extends React.Component {",
        "",
        "\trender() {",
        "\t\treturn ($2);",
        "\t}",
        "",
        "}"
    ]
},

Weitere Details finden Sie unter Eigene Snippets erstellen.

Git-Integration

Tastenkombination: ⌃⇧G (Windows, Linux Ctrl+Shift+G)

Die Git-Integration ist bei VS Code sofort einsatzbereit. Sie können andere Quellcodeverwaltungsanbieter (SCM) aus dem VS Code Extension Marketplace installieren. Dieser Abschnitt beschreibt die Git-Integration, aber ein Großteil der Benutzeroberfläche und Gesten sind auch für andere SCM-Anbieter üblich.

Git Blame

VS Code zeigt Git-Blame-Informationen inline im Editor und in der Statusleiste an. Bewegen Sie den Mauszeiger über das Element in der Statusleiste oder den Inline-Hinweis, um detaillierte Git-Blame-Informationen anzuzeigen.

Um Git-Blame-Informationen zu aktivieren oder zu deaktivieren, verwenden Sie die Befehle Git: Git Blame Editor-Dekorationen umschalten und Git: Git Blame Statusleisten-Element umschalten, oder konfigurieren Sie diese Einstellungen

• git.blame.statusBarItem.enabled (standardmäßig aktiviert)
• git.blame.editorDecoration.enabled

Erfahren Sie mehr über die Git-Blame-Unterstützung in VS Code und wie Sie das Layout anpassen.

Diffs

Wählen Sie in der Ansicht Quellcodeverwaltung eine Datei aus, um den Diff-Editor zu öffnen. Alternativ können Sie die Schaltfläche Änderungen öffnen in der oberen rechten Ecke auswählen, um die aktuell geöffnete Datei zu diffen.

Ansichten

Die Standardansicht für Diffs ist die Seitenansicht.

Schalten Sie die Inline-Ansicht um, indem Sie die Schaltfläche Weitere Aktionen (...) oben rechts auswählen und dann Inline-Ansicht auswählen.

Wenn Sie die Inline-Ansicht als Standard bevorzugen, konfigurieren Sie die Einstellung "diffEditor.renderSideBySide": false.

Zugänglicher Diff-Viewer

Navigieren Sie durch Diffs mit F7 und ⇧F7 (Windows, Linux Shift+F7). Dies präsentiert Änderungen im Unified-Patch-Format. Zeilen können mit den Pfeiltasten navigiert werden, und das Drücken von Enter springt im Diff-Editor zur ausgewählten Zeile zurück.

Ausstehende Änderungen bearbeiten

Während Sie Änderungen im Diff-Editor anzeigen, können Sie direkt auf der Seite mit den ausstehenden Änderungen des Diff-Editors Bearbeitungen vornehmen.

Branches

Wechseln Sie einfach zwischen Git-Branches über die Statusleiste.

Staging

Dateänderungen stagen

Fahren Sie mit der Maus über die Anzahl der Dateien und wählen Sie das Pluszeichen aus, um eine Datei zu stagen.

Wählen Sie das Minuszeichen aus, um Änderungen zu unstagen.

Auswahl stagen

Sie können einen Teil einer Datei stagen, indem Sie eine Textauswahl in einer Datei treffen und dann Ausgewählte Bereiche stagen aus der Befehlspalette oder aus dem Kontextmenü des Diff-Editors (Rechtsklick) auswählen.

Letzten Commit rückgängig machen

Wählen Sie die Schaltfläche (...) und dann Commit > Letzten Commit rückgängig machen, um den vorherigen Commit rückgängig zu machen. Die Änderungen werden zum Abschnitt "Gestagte Änderungen" hinzugefügt.

Git-Ausgabe anzeigen

VS Code macht es einfach zu sehen, welche Git-Befehle tatsächlich ausgeführt werden. Dies kann hilfreich sein, wenn Sie Git noch lernen oder ein schwieriges Quellcodeverwaltungsproblem beheben.

Um die Git-Ausgabe anzuzeigen, wählen Sie die Schaltfläche (...) in der Ansicht "Quellcodeverwaltung" und dann Git-Ausgabe anzeigen, verwenden Sie den Befehl Git: Git-Ausgabe anzeigen oder verwenden Sie den Befehl Ausgabe umschalten (⇧⌘U (Windows Ctrl+Shift+U, Linux Ctrl+K Ctrl+H)) und wählen Sie dann Git aus der Dropdown-Liste aus.

Gutter-Indikatoren

Der Editor bietet visuelle Hinweise in der Spalte darüber, wo und welche Änderungen (hinzugefügte, geänderte oder entfernte Zeilen) vorgenommen wurden. Siehe die Dokumentation zur Quellcodeverwaltung für weitere Details.

Merge-Konflikte auflösen

Während eines Merges gehen Sie zur Ansicht Quellcodeverwaltung (⌃⇧G (Windows, Linux Ctrl+Shift+G)) und nehmen Sie Änderungen in der Diff-Ansicht vor.

Sie können Merge-Konflikte mit dem Inline-CodeLens lösen, mit dem Sie Aktuelle Änderung übernehmen, Eingehende Änderung übernehmen, Beide Änderungen übernehmen und Änderungen vergleichen können.

Erfahren Sie mehr über das Auflösen von Merge-Konflikten in der Dokumentation zur Quellcodeverwaltung.

VS Code als Standard-Merge-Tool festlegen

git config --global merge.tool vscode
git config --global mergetool.vscode.cmd 'code --wait $MERGED'

VS Code als Standard-Diff-Tool festlegen

git config --global diff.tool vscode
git config --global difftool.vscode.cmd 'code --wait --diff $LOCAL $REMOTE'

Datei mit der Zwischenablage vergleichen

Tastenkombination: ⌘K C (Windows, Linux Ctrl+K C)

Vergleichen Sie die aktive Datei schnell mit dem Inhalt der Zwischenablage mit dem Befehl Datei: Aktive Datei mit Zwischenablage vergleichen in der Befehlspalette (⇧⌘P (Windows, Linux Ctrl+Shift+P)).

Debugging

Debugger konfigurieren

Wählen Sie in der Ansicht "Ausführen und Debuggen" (⇧⌘D (Windows, Linux Ctrl+Shift+D)) die Option launch.json-Datei erstellen. Dies fordert Sie auf, die Umgebung auszuwählen, die zu Ihrem Projekt passt (Node.js, Python, C++ und mehr). Dadurch wird eine launch.json-Datei in Ihrem Arbeitsbereich generiert, die die Debugger-Konfiguration enthält.

Node.js-Unterstützung ist integriert, und für andere Umgebungen müssen die entsprechenden Sprachspezifischen Erweiterungen installiert werden. Weitere Details finden Sie in der Debug-Dokumentation.

Haltepunkte und Schrittweise Ausführung

Schalten Sie einen Haltepunkt um, indem Sie den Editorrand auswählen oder F9 in der aktuellen Zeile verwenden. Haltepunkte im Editorrand werden normalerweise als rote ausgefüllte Kreise angezeigt.

Sobald eine Debug-Sitzung startet, erscheint die Debug-Symbolleiste oben im Editor und ermöglicht Ihnen, den Code während des Debuggens schrittweise oder schrittweise durch den Code zu durchlaufen. Erfahren Sie mehr über Debug-Aktionen in der Debug-Dokumentation.

Datainspektion

Variablen können im Abschnitt VARIABLEN der Ansicht Ausführen und Debuggen, durch Hovern über ihre Quelle im Editor oder durch Verwenden der Debug-Konsole inspiziert werden.

Log-Haltepunkte

Log-Haltepunkte funktionieren ähnlich wie Haltepunkte, aber anstatt den Debugger anzuhalten, wenn sie getroffen werden, protokollieren sie eine Nachricht in der Konsole. Log-Haltepunkte sind besonders nützlich, um beim Debuggen von Produktionsservern, die nicht modifiziert oder angehalten werden können, Protokollierung einzufügen.

Fügen Sie mit dem Befehl Log-Haltepunkt hinzufügen in der linken Editor-Spalte einen Log-Haltepunkt hinzu. Er wird als "rautenförmiges" Symbol angezeigt. Log-Nachrichten sind reiner Text, können aber Ausdrücke enthalten, die in geschweiften Klammern ('{}') ausgewertet werden.

Ausgelöste Haltepunkte

Ein ausgelöster Haltepunkt ist ein Haltepunkt, der automatisch aktiviert wird, sobald ein anderer Haltepunkt getroffen wird. Sie können sehr nützlich sein, um Fehlerfälle im Code zu diagnostizieren, die nur nach einer bestimmten Vorbedingung auftreten.

Ausgelöste Haltepunkte können durch Rechtsklick auf den Glyph-Rand gesetzt werden, indem Ausgelösten Haltepunkt hinzufügen ausgewählt und dann gewählt wird, welcher andere Haltepunkt den Haltepunkt aktiviert.

Task-Runner

Aufgaben in VS Code können so konfiguriert werden, dass Skripte ausgeführt und Prozesse gestartet werden, damit diese Werkzeuge von innerhalb VS Code aus verwendet werden können, ohne eine Kommandozeile eingeben oder neuen Code schreiben zu müssen.

Aufgaben automatisch erkennen

Wählen Sie Terminal im Menü der obersten Ebene aus, führen Sie den Befehl Aufgaben konfigurieren aus und wählen Sie dann den Aufgabentyp aus, den Sie ausführen möchten. Dies generiert eine tasks.json-Datei mit folgendem Inhalt. Weitere Details finden Sie in der Aufgaben-Dokumentation.

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "install",
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

Es gibt gelegentlich Probleme mit der automatischen Generierung. Schauen Sie in der Dokumentation nach, um die Dinge richtig zum Laufen zu bringen.

Aufgaben über das Terminal-Menü ausführen

Wählen Sie Terminal im Menü der obersten Ebene aus, führen Sie den Befehl Aufgabe ausführen aus und wählen Sie die Aufgabe aus, die Sie ausführen möchten. Beenden Sie die laufende Aufgabe, indem Sie den Befehl Aufgabe beenden ausführen.

Tastenkombinationen für Aufgaben definieren

Sie können eine Tastenkombination für jede Aufgabe definieren. Wählen Sie in der Befehlspalette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) Einstellungen: Tastenkombinationen-Datei öffnen, binden Sie die gewünschte Tastenkombination an den Befehl workbench.action.tasks.runTask und definieren Sie die Aufgabe als args.

Um beispielsweise Strg+H an die Aufgabe Tests ausführen zu binden, fügen Sie Folgendes hinzu:

{
  "key": "ctrl+h",
  "command": "workbench.action.tasks.runTask",
  "args": "Run tests"
}

NPM-Skripte als Aufgaben aus dem Explorer ausführen

Im Explorer können Sie ein Skript im Editor öffnen, als Aufgabe ausführen und mit dem Node-Debugger starten (wenn das Skript eine Debug-Option wie --inspect-brk definiert). Die Standardaktion bei einem Klick ist das Öffnen des Skripts. Um ein Skript mit einem einzelnen Klick auszuführen, setzen Sie npm.scriptExplorerAction auf run. Verwenden Sie die Einstellung npm.exclude, um Skripte in package.json-Dateien auszuschließen, die sich in bestimmten Ordnern befinden.

Mit der Einstellung npm.enableRunFromFolder können Sie NPM-Skripte über das Kontextmenü der Ordneransicht ausführen. Die Einstellung aktiviert den Befehl NPM-Skript im Ordner ausführen..., wenn ein Ordner ausgewählt ist. Der Befehl zeigt eine Quick Pick-Liste der NPM-Skripte an, die in diesem Ordner enthalten sind, und Sie können das Skript auswählen, das als Aufgabe ausgeführt werden soll.

Portabler Modus

VS Code verfügt über einen Portablen Modus, mit dem Sie Einstellungen und Daten am selben Ort wie Ihre Installation speichern können, z. B. auf einem USB-Laufwerk.

Insiders Builds

Das Visual Studio Code-Team verwendet die Insiders-Version, um die neuesten Funktionen und Fehlerbehebungen von VS Code zu testen. Sie können die Insiders-Version auch verwenden, indem Sie sie hier herunterladen.

• Für Early Adopters – Insiders enthält die neuesten Code-Änderungen, die Benutzer und Erweiterungsautoren ausprobieren können.
• Häufige Builds – Tägliche neue Builds mit den neuesten Fehlerbehebungen und Funktionen.
• Nebenläufige Installation – Insiders wird neben der Stable-Version installiert, sodass Sie beide unabhängig voneinander verwenden können.