Benutzeroberfläche

Im Kern ist Visual Studio Code ein Code-Editor. Wie viele andere Code-Editoren übernimmt VS Code eine gängige Benutzeroberfläche und ein Layout mit einem Explorer auf der linken Seite, der alle Ihre verfügbaren Dateien und Ordner anzeigt, und einem Editor auf der rechten Seite, der den Inhalt der von Ihnen geöffneten Dateien anzeigt.

Grundlegendes Layout

VS Code verfügt über ein einfaches und intuitives Layout, das den für den Editor verfügbaren Platz maximiert und gleichzeitig ausreichend Raum lässt, um den vollständigen Kontext Ihres Ordners oder Projekts zu durchsuchen und darauf zuzugreifen. Die Benutzeroberfläche ist in sechs Hauptbereiche unterteilt

• Editor – Der Hauptbereich zum Bearbeiten Ihrer Dateien. Sie können so viele Editoren nebeneinander vertikal und horizontal öffnen, wie Sie möchten.
• Primäre Seitenleiste – Enthält verschiedene Ansichten wie den Explorer, die Sie bei der Arbeit an Ihrem Projekt unterstützen.
• Sekundäre Seitenleiste – Gegenüber der primären Seitenleiste. Enthält standardmäßig die Chat-Ansicht. Ziehen Sie Ansichten aus der primären Seitenleiste per Drag-and-Drop in die sekundäre Seitenleiste, um sie zu verschieben.
• Statusleiste – Informationen über das geöffnete Projekt und die bearbeiteten Dateien.
• Aktivitätsleiste – Befindet sich ganz links. Ermöglicht Ihnen das Wechseln zwischen Ansichten und liefert zusätzliche kontextspezifische Indikatoren, wie die Anzahl ausgehender Änderungen, wenn Git aktiviert ist. Sie können die Position der Aktivitätsleiste ändern.
• Panel – Ein zusätzlicher Bereich für Ansichten unterhalb des Editorbereichs. Enthält standardmäßig Ausgabe-, Debugging-Informationen, Fehler und Warnungen sowie ein integriertes Terminal. Das Panel kann auch nach links oder rechts verschoben werden, um mehr vertikalen Platz zu schaffen.

Jedes Mal, wenn Sie VS Code starten, öffnet es sich im gleichen Zustand wie beim letzten Schließen. Der Ordner, das Layout und die geöffneten Dateien bleiben erhalten.

Geöffnete Dateien in jedem Editor werden mit Tab-Überschriften (Tabs) am oberen Rand des Editorbereichs angezeigt. Weitere Informationen zu Tab-Überschriften finden Sie im Abschnitt Tabs.

Erfahren Sie mehr über die Verwendung der primären und sekundären Seitenleiste.

Nebeneinander bearbeiten

Sie können beliebig viele Editoren nebeneinander vertikal und horizontal öffnen. Wenn Sie bereits einen Editor geöffnet haben, gibt es mehrere Möglichkeiten, einen weiteren Editor daneben zu öffnen

• Alt und eine Datei in der Explorer-Ansicht auswählen.
• ⌘\ (Windows, Linux Strg+\), um den aktiven Editor in zwei zu teilen.
• Links öffnen (⌃Enter (Windows, Linux Strg+Enter)) aus dem Kontextmenü des Explorers für eine Datei.
• Wählen Sie die Schaltfläche Editor teilen oben rechts in einem Editor aus.
• Ziehen Sie eine Datei per Drag-and-Drop auf eine beliebige Seite des Editorbereichs. Halten Sie Strg (Option unter macOS) gedrückt, während Sie ziehen, um den Tab stattdessen zu kopieren.
• Drücken Sie ⌃Enter (Windows, Linux Strg+Enter) in der Dateiliste von Schnell öffnen (⌘P (Windows, Linux Strg+P)).

Wenn Sie eine andere Datei öffnen, zeigt der aktive Editor den Inhalt dieser Datei an. Wenn Sie zwei Editoren nebeneinander haben und die Datei „foo.cs“ im rechten Editor öffnen möchten, stellen Sie sicher, dass dieser Editor aktiv ist (indem Sie hineinklicken), bevor Sie die Datei „foo.cs“ öffnen.

Standardmäßig werden Editoren auf der rechten Seite des aktiven Editors geöffnet. Sie können dieses Verhalten mit der Einstellung workbench.editor.openSideBySideDirection ändern, um neue Editoren stattdessen unterhalb des aktiven zu öffnen.

Wenn Sie mehr als einen Editor geöffnet haben, können Sie schnell zwischen ihnen wechseln, indem Sie die Strg-Taste (Cmd unter macOS) gedrückt halten und 1, 2 oder 3 drücken.

Editorgruppen

Wenn Sie einen Editor teilen (mit den Befehlen Editor teilen oder Links öffnen), wird ein neuer Editorbereich (Editorgruppe) erstellt, der eine Gruppe von Elementen aufnehmen kann. Sie können beliebig viele Editorgruppen nebeneinander vertikal und horizontal öffnen.

Sie können diese deutlich im Abschnitt Geöffnete Editoren oben in der Explorer-Ansicht sehen (schalten Sie ... > Geöffnete Editoren in der Explorer-Ansicht um).

Sie können Editorgruppen per Drag-and-Drop auf der Benutzeroberfläche verschieben, einzelne Tabs zwischen Gruppen verschieben und ganze Gruppen schnell schließen (Alle schließen).

In Gruppe teilen

Sie können den aktuellen Editor teilen, ohne eine neue Editorgruppe zu erstellen, mit dem Befehl Ansicht: Editor in Gruppe teilen (⌘K ⇧⌘\ (Windows, Linux Strg+K Strg+Umschalt+\)). Um mehr über diesen Editor-Modus und spezifische Befehle zur Navigation zwischen den beiden Seiten zu erfahren, lesen Sie den Abschnitt im Artikel Benutzerdefiniertes Layout.

Schwebende Fenster

Sie können Editoren, das Terminal oder bestimmte Ansichten in ihre eigenen schwebenden Fenster verschieben. Dies ist nützlich, wenn Sie eine Multi-Monitor-Einrichtung haben und eine Datei auf einem anderen Monitor geöffnet halten möchten.

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.

Um ein schwebendes Fenster oben auf dem Bildschirm anzuheften, wählen Sie die Option Immer im Vordergrund anzeigen (Pin-Symbol) in der Titelleiste aus.

Um mehr über schwebende Fenster zu erfahren, lesen Sie den Abschnitt im Artikel Benutzerdefiniertes Layout.

Minimap

Eine Minimap (Code-Übersicht) gibt Ihnen einen Überblick über Ihren Quellcode, was für die schnelle Navigation und das Verständnis des Codes nützlich ist. Die Minimap einer Datei wird auf der rechten Seite des Editors angezeigt. Sie können den schattierten Bereich auswählen oder ziehen, um schnell zu verschiedenen Abschnitten in Ihrer Datei zu springen.

Wenn Sie Faltungsmarkierungen im Editor haben, wie z.B. //#region-Kommentare, dann zeigt die Minimap die Namen der Faltungsmarkierungen an. Faltungsmarkierungen sind sprachspezifisch, prüfen Sie also, welche Markierungen für Ihre Sprache gelten.

Sticky Scroll

Sticky Scroll zeigt die Startzeilen der aktuell sichtbaren verschachtelten Gültigkeitsbereiche am oberen Rand des Editors an. Es erleichtert die Navigation, indem es anzeigt, wo Sie sich in einer Datei befinden, und es ermöglicht Ihnen, schnell zum Anfang des aktuellen Gültigkeitsbereichs zurückzuspringen.

Sticky Scroll verwendet verschiedene Inhaltmodelle, um seine Überschriften zu erstellen. Es ist möglich, zwischen dem Modell des Outline-Providers, dem Modell des Folding-Providers und dem Einrückungsmodell zu wählen, um zu bestimmen, welche Zeilen im Sticky Scroll-Bereich angezeigt werden sollen. Wenn ein Modell für die aktuelle Sprache nicht verfügbar ist, greift VS Code auf das nächste Modell in der oben angegebenen Reihenfolge zurück. Das standardmäßig verwendete Modell stammt aus der Einstellung editor.stickyScroll.defaultModel.

Einrückungsführer

Der Editor zeigt Einrückungsführer (vertikale Linien) an, die Ihnen helfen, übereinstimmende Einrückungsebenen schnell zu erkennen. Wenn Sie Einrückungsführer deaktivieren möchten, können Sie editor.guides.indentation in Ihren Benutzer- oder Arbeitsbereichseinstellungen auf false setzen.

Brotkrümelnavigation

Der Editor verfügt über eine Navigationsleiste oben, auch Brotkrümelnavigation genannt. Brotkrümel zeigen immer den Dateipfad und, wenn der aktuelle Dateityp über eine Sprachunterstützung für Symbole verfügt, den Symbolpfad bis zur Cursorposition an. Die Brotkrümel ermöglichen Ihnen eine schnelle Navigation zwischen Ordnern, Dateien und Symbolen.

Sie können die Brotkrümelnavigation mit dem Menüeintrag Ansicht > Darstellung > Brotkrümelnavigation umschalten oder dem Befehl Ansicht: Brotkrümelnavigation umschalten deaktivieren. Weitere Informationen zur Brotkrümelnavigation und wie Sie deren Darstellung anpassen können, finden Sie im Abschnitt Brotkrümelnavigation des Artikels Code-Navigation.

Explorer-Ansicht

Die Explorer-Ansicht dient zum Durchsuchen, Öffnen und Verwalten von Dateien und Ordnern in Ihrem Projekt. VS Code basiert auf Dateien und Ordnern, und Sie können sofort loslegen, indem Sie eine Datei oder einen Ordner in VS Code öffnen.

Nachdem Sie einen Ordner in VS Code geöffnet haben, werden die Inhalte des Ordners in der Explorer-Ansicht angezeigt. Sie können hier viele Dinge tun

• Dateien und Ordner erstellen, löschen und umbenennen.
• Dateien und Ordner per Drag-and-Drop verschieben.
• Das Kontextmenü verwenden, um alle Optionen zu erkunden.

VS Code funktioniert gut mit anderen Tools, die Sie möglicherweise verwenden, insbesondere mit Befehlszeilentools. Wenn Sie ein Befehlszeilentool im Kontext des Ordners ausführen möchten, der gerade in VS Code geöffnet ist, klicken Sie mit der rechten Maustaste auf den Ordner und wählen Sie Im integrierten Terminal öffnen.

Sie können auch zum Speicherort einer Datei oder eines Ordners im nativen Dateiexplorer des Betriebssystems navigieren, indem Sie mit der rechten Maustaste auf eine Datei oder einen Ordner klicken und unter Windows Im Datei-Explorer anzeigen, unter macOS Im Finder anzeigen oder unter Linux Übergeordneten Ordner öffnen auswählen.

Standardmäßig schließt VS Code einige Ordner von der Anzeige in der Explorer-Ansicht aus, z.B. .git. Verwenden Sie die Einstellung files.exclude, um Regeln für das Ausblenden von Dateien und Ordnern aus der Explorer-Ansicht zu konfigurieren.

Mehrfachauswahl

Sie können mehrere Dateien in der Explorer-Ansicht und im Bereich „Geöffnete Editoren“ auswählen, um Aktionen (löschen, per Drag-and-Drop verschieben oder links öffnen) auf mehreren Elementen auszuführen. Halten Sie Strg (Cmd unter macOS) gedrückt und wählen Sie einzelne Dateien aus, oder halten Sie Umschalt gedrückt, um einen Bereich von Dateien auszuwählen. Wenn Sie zwei Elemente auswählen, können Sie jetzt auch den Befehl Ausgewählt vergleichen im Kontextmenü verwenden, um schnell zwei Dateien zu vergleichen.

"workbench.list.multiSelectModifier": "alt"

Erweiterte Baum-Navigation

Sie können Dateien und Ordner in der Explorer-Ansicht filtern. Wenn der Fokus auf der Explorer-Ansicht liegt, drücken Sie ⌥⌘F (Windows, Linux Strg+Alt+F), um das Suchfeld zu öffnen und einen Teil des Datei- oder Ordnernamens einzugeben, den Sie abgleichen möchten. Dieses Navigationsfeature ist für alle Baumansichten in VS Code verfügbar.

Das Drücken der Schaltfläche Filtern schaltet zwischen den beiden Modi um: Hervorheben und Filtern. Das Drücken der Pfeil nach unten-Taste ermöglicht es Ihnen, sich auf das erste übereinstimmende Element zu konzentrieren und zu nachfolgenden übereinstimmenden Elementen zu navigieren. Im Hervorhebungsmodus wird auf Ordnern eine Markierung angezeigt, die darauf hinweist, dass sie übereinstimmende Dateien enthalten.

Das Drücken der Schaltfläche Fuzzy-Übereinstimmung schaltet zwischen exakter und Fuzzy-Übereinstimmung um, bei der Sie eine Zeichenfolge eingeben können, um beliebige Teile des Datei- oder Ordnernamens abzugleichen.

Gliederungsansicht

Die Outline-Ansicht ist ein separater Bereich am unteren Rand der Explorer-Ansicht. Wenn sie erweitert ist, zeigt sie den Symbolbaum des aktuell aktiven Editors.

Die Outline-Ansicht verfügt über verschiedene Sortieren nach-Modi, optionale Cursor-Verfolgung und unterstützt die üblichen Öffnungsgesten. Sie enthält auch ein Eingabefeld zum Finden oder Filtern. Fehler und Warnungen werden ebenfalls in der Outline-Ansicht angezeigt, sodass Sie auf einen Blick den Speicherort eines Problems sehen können.

Für Symbole stützt sich die Ansicht auf Informationen, die von Ihren installierten Erweiterungen für verschiedene Dateitypen berechnet werden. Beispielsweise gibt die integrierte Markdown-Unterstützung die Markdown-Header-Hierarchie für die Symbole einer Markdown-Datei zurück.

Es gibt verschiedene Outline-Ansichts-Einstellungen. Suchen Sie nach Einstellungen, die mit outline. beginnen, und konfigurieren Sie, welche Informationen in der Outline-Ansicht angezeigt werden sollen.

Timeline-Ansicht

Die Timeline-Ansicht, die am unteren Rand des Datei-Explorers zugänglich ist, ist eine einheitliche Ansicht zur Visualisierung der Ereignishistorie einer Datei. Sie können beispielsweise Git-Commits oder lokale Dateispeichervorgänge in einer Timeline-Ansicht anzeigen.

Eine Filteraktion in der Symbolleiste der Timeline-Ansicht ermöglicht es Ihnen, zwischen Quellcodeverwaltungsereignissen und lokalen Dateieignissen zu filtern.

Lokale Dateihistorie

Abhängig von Ihren Einstellungen wird jedes Mal, wenn Sie einen Editor speichern, ein neuer Eintrag zur Liste hinzugefügt. Jeder lokale Verlaufseintrag enthält den vollständigen Inhalt der Datei zum Zeitpunkt der Erstellung des Eintrags und kann in bestimmten Fällen semantischere Informationen liefern (z. B. eine Refaktorierung anzeigen).

Aus einem Eintrag können Sie

• die Änderungen mit der lokalen Datei oder dem vorherigen Eintrag vergleichen.
• den Inhalt wiederherstellen.
• den Eintrag löschen oder umbenennen.

Sie können diese Einstellungen für die Arbeit mit der lokalen Historie konfigurieren

• workbench.localHistory.enabled – Lokale Historie aktivieren oder deaktivieren (Standard: true)
• workbench.localHistory.maxFileSize – Dateigrößenbeschränkung beim Erstellen eines lokalen Verlaufseintrags (Standard: 256 KB)
• workbench.localHistory.maxFileEntries – Limit für lokale Verlaufseinträge pro Datei (Standard: 50)
• workbench.localHistory.exclude – Glob-Muster zum Ausschließen bestimmter Dateien aus der lokalen Historie
• workbench.localHistory.mergeWindow – Intervall in Sekunden, während dessen weitere Änderungen dem letzten Eintrag in der lokalen Dateihistorie hinzugefügt werden (Standard 10s)

Commit-Historie

Die integrierte Git-Unterstützung von VS Code zeigt die Git-Commit-Historie der angegebenen Datei an. Durch Auswahl eines Commits wird eine Diff-Ansicht der von diesem Commit eingeführten Änderungen geöffnet. Wenn Sie mit der rechten Maustaste auf einen Commit klicken, erhalten Sie Optionen zum Commit-ID kopieren und Commit-Nachricht kopieren.

Wenn Sie mit der rechten Maustaste auf einen Commit in der Historie klicken, können Sie

• Änderungen öffnen – Öffnet eine Diff-Ansicht der Änderungen in der Datei.
• Commit anzeigen – Öffnet eine Diff-Ansicht für mehrere Dateien, um die Änderungen aller Dateien im Commit anzuzeigen.
• Zum Vergleichen auswählen – Wählt einen Eintrag zum Vergleich mit einem anderen Eintrag aus.
• Commit-ID kopieren – Kopiert die Commit-ID in die Zwischenablage.
• Commit-Nachricht kopieren – Kopiert die Commit-Nachricht in die Zwischenablage.

Sie können diese Einstellung für die Arbeit mit der Git-Historie konfigurieren

• git.timeline.date – Zeigt das Commit-Datum oder das Autor-Datum eines Dateicommits an

Ansichten

Die Explorer-Ansicht ist nur eine der in VS Code verfügbaren Ansichten. Es gibt auch Ansichten für

• Suchen – Ermöglicht globale Suche und Ersetzung im geöffneten Ordner.
• Quellcodeverwaltung – VS Code enthält standardmäßig die Git-Quellcodeverwaltung.
• Ausführen – Die Ausführen- und Debugging-Ansicht von VS Code zeigt Variablen, Aufrufstapel und Haltepunkte an.
• Erweiterungen – Installieren und verwalten Sie Ihre Erweiterungen innerhalb von VS Code.
• Benutzerdefinierte Ansichten – Ansichten, die von Erweiterungen beigesteuert werden.

Sie können Ansichten durch Rechtsklick auf die Aktivitätsleiste ein- oder ausblenden und sie per Drag-and-Drop neu anordnen. Innerhalb der Explorer-Ansicht können Sie Abschnitte über das Menü „...“ ein- oder ausblenden oder Abschnitte per Drag-and-Drop neu anordnen.

Befehlspalette

VS Code ist gleichermaßen über die Tastatur zugänglich. Die wichtigste zu merkende Tastenkombination ist ⇧⌘P (Windows, Linux Strg+Umschalt+P), die die Befehlspalette öffnet. Von hier aus haben Sie Zugriff auf alle Funktionen von VS Code, einschließlich Tastenkombinationen für die häufigsten Vorgänge.

Die Befehlspalette bietet Zugriff auf viele Befehle. Sie können Editorbefehle ausführen, Dateien öffnen, nach Symbolen suchen und eine schnelle Übersicht über eine Datei erhalten, alles über dasselbe interaktive Fenster. Hier sind einige Tipps

• ⌘P (Windows, Linux Strg+P) ermöglicht es Ihnen, durch Eingabe des Namens zu jeder beliebigen Datei oder jedem Symbol zu navigieren
• ⌃Tab (Windows, Linux Strg+Tab) wechselt Sie durch die zuletzt geöffneten Dateien
• ⇧⌘P (Windows, Linux Strg+Umschalt+P) bringt Sie direkt zu den Editorbefehlen
• ⇧⌘O (Windows, Linux Strg+Umschalt+O) ermöglicht Ihnen die Navigation zu einem bestimmten Symbol in einer Datei
• ⌃G (Windows, Linux Strg+G) ermöglicht Ihnen die Navigation zu einer bestimmten Zeile in einer Datei

Geben Sie ? in das Eingabefeld ein, um eine Liste der verfügbaren Befehle zu erhalten, die Sie von der Befehlspalette aus ausführen können.

Den Editor konfigurieren

VS Code bietet Ihnen viele Optionen zur Konfiguration des Editors. Über das Menü Ansicht > Darstellung können Sie verschiedene Teile der Benutzeroberfläche ausblenden oder umschalten, wie z.B. die Seitenleiste, die Statusleiste und die Aktivitätsleiste.

Menüleiste ausblenden (Windows, Linux)

Sie können die Menüleiste unter Windows und Linux ausblenden, indem Sie die Einstellung window.menuBarVisibility von classic auf toggle oder hidden ändern. Eine Einstellung von toggle bedeutet, dass ein einziger Druck auf die Alt-Taste die Menüleiste wieder anzeigt.

Sie können die Menüleiste unter Windows und Linux auch mit dem Befehl Ansicht: Menüleiste umschalten ausblenden. Dieser Befehl ändert window.menuBarVisibility von classic auf compact, wodurch die Menüleiste in die Aktivitätsleiste verschoben wird. Um die Menüleiste in die classic-Position zurückzusetzen, können Sie den Befehl Ansicht: Menüleiste umschalten erneut ausführen.

Einstellungen

Die meisten Editor-Konfigurationen werden in Einstellungen verwaltet, die Sie direkt ändern können. Sie können Optionen entweder global über Benutzereinstellungen oder pro Projekt/Ordner über Arbeitsbereichseinstellungen festlegen. Die Einstellungswerte werden in einer settings.json-Datei gespeichert.

Sie können Einstellungen im Einstellungen-Editor anzeigen und bearbeiten (wählen Sie Datei > Einstellungen > Einstellungen, oder drücken Sie ⌘, (Windows, Linux Strg+,)). Verwenden Sie die Registerkarten Benutzer und Arbeitsbereich, um zwischen Benutzer- und Arbeitsbereichseinstellungen zu wechseln. Sie können Einstellungen mithilfe des Suchfelds oben filtern.

Alternativ können Sie die Benutzereinstellungen direkt in der settings.json-Datei bearbeiten. Verwenden Sie den Befehl Einstellungen: Benutzereinstellungen öffnen (JSON), um die settings.json-Datei zu öffnen. Für Arbeitsbereichseinstellungen öffnen Sie die settings.json-Datei im .vscode-Ordner Ihres Arbeitsbereichs.

Zen-Modus

Der Zen-Modus ermöglicht es Ihnen, sich auf Ihren Code zu konzentrieren, indem alle Benutzeroberflächenelemente außer dem Editor ausgeblendet werden, VS Code im Vollbildmodus gestartet wird und der Editor zentriert wird. Der Zen-Modus kann über das Menü Ansicht > Darstellung > Zen-Modus, Ansicht: Zen-Modus umschalten in der Befehlspalette oder mit der Tastenkombination ⌘K Z (Windows, Linux Strg+K Z) umgeschaltet werden. Doppeltes Drücken von Esc beendet den Zen-Modus. Der Übergang zum Vollbildmodus kann über zenMode.fullScreen deaktiviert werden.

Der Zen-Modus kann mit den folgenden Einstellungen weiter angepasst werden

• zenMode.hideActivityBar – Blendet die Aktivitätsleiste aus. Standard: true.
• zenMode.hideStatusBar – Blendet die Statusleiste aus. Standard: true.
• zenMode.hideLineNumbers – Blendet Zeilennummern aus. Standard: true.
• zenMode.showTabs – Steuert, ob mehrere, einzelne oder gar keine Editor-Tabs angezeigt werden sollen. Standard: multiple.
• zenMode.fullScreen – Versetzt die Benutzeroberfläche in den Vollbildmodus. Standard: true.
• zenMode.restore – Stellt den Zen-Modus beim Neustart wieder her. Standard: true.
• zenMode.centerLayout – Verwendet das zentrierte Editor-Layout. Standard: true.
• zenMode.silentNotifications – Zeigt keine Benachrichtigungen an. Standard: true.

Benachrichtigungen mit dem Modus "Nicht stören" reduzieren

Wenn Sie von Benachrichtigungen, die auftauchen, überwältigt werden, gibt es eine Möglichkeit, Benachrichtigungen zu reduzieren, entweder für alle Benachrichtigungen oder für Benachrichtigungen einer bestimmten Erweiterung.

Wählen Sie das Glockensymbol in der Statusleiste aus, um den Benachrichtigungsbereich zu öffnen. Hier können Sie jederzeit auf alle Benachrichtigungen zugreifen, auch wenn Sie den Modus "Nicht stören" aktiviert haben.

Finden Sie das durchgestrichene Glockensymbol, um auf ein Menü zuzugreifen, in dem Sie Benachrichtigungen von Erweiterungen selektiv deaktivieren oder den globalen Modus "Nicht stören" aktivieren können, um alle Benachrichtigungen zu deaktivieren.

Zentriertes Editor-Layout

Das zentrierte Editor-Layout ermöglicht es Ihnen, den Editorbereich mittig auszurichten. Dies ist nützlich, wenn Sie mit einem einzelnen Editor auf einem großen Monitor arbeiten. Sie können die Seitenränder verwenden, um die Ansicht in der Größe zu ändern (halten Sie die Alt-Taste gedrückt, um die Seiten unabhängig voneinander zu verschieben).

Tabs

VS Code zeigt offene Elemente mit Tabs (Tab-Überschriften) im Titelbereich oberhalb des Editors an. Wenn Sie eine Datei öffnen, wird für diese Datei ein neuer Tab hinzugefügt. Tabs ermöglichen es Ihnen, schnell zwischen Elementen zu navigieren.

Sie können Tabs per Drag-and-Drop neu anordnen. Um eine Aktion für mehrere Tabs gleichzeitig auszuführen, halten Sie die Strg-Taste (Cmd unter macOS) gedrückt und wählen Sie die Tabs aus, auf die Sie die Aktion anwenden möchten. Um einen Bereich von Tabs auszuwählen, halten Sie die Umschalt-Taste gedrückt und wählen Sie den ersten und letzten Tab im Bereich aus.

Wenn Sie mehr offene Elemente haben, als in den Titelbereich passen, können Sie den Abschnitt Geöffnete Editoren in der Explorer-Ansicht (verfügbar über die Schaltfläche ...) verwenden, um eine Dropdown-Liste mit Tab-Elementen anzuzeigen.

Es gibt auch eine Scrollleiste zwischen dem Tab- und dem Editorbereich, um Editoren in die Ansicht zu ziehen. Sie können die Höhe der Scrollleiste erhöhen, um das Ziehen zu erleichtern, indem Sie Workbench > Editor: Titel-Scrollleiste Größenanpassung (workbench.editor.titleScrollbarSizing) auf large setzen. Verwenden Sie die Einstellung workbench.editor.titleScrollbarVisibility, um die Sichtbarkeit der Scrollleiste zu steuern.

Wenn Sie keine Tabs verwenden möchten, können Sie die Funktion deaktivieren, indem Sie die Einstellung workbench.editor.showTabs auf single setzen.

    "workbench.editor.showTabs": "single"

Siehe den Abschnitt unten, um VS Code für die Arbeit ohne Tabs zu optimieren.

Tab-Reihenfolge

Standardmäßig werden neue Tabs rechts von den vorhandenen Tabs hinzugefügt. Sie können steuern, wo neue Tabs erscheinen sollen, mit der Einstellung workbench.editor.openPositioning.

Zum Beispiel möchten Sie vielleicht, dass neue Tab-Elemente links erscheinen

    "workbench.editor.openPositioning": "left"

Sie können Tabs neu anordnen, indem Sie sie per Drag-and-Drop verschieben.

Wenn Sie möchten, dass ein Editor-Tab immer sichtbar ist, können Sie ihn an der Editor-Tab-Leiste anheften. Erfahren Sie mehr über das Anheften von Tabs im Artikel Benutzerdefiniertes Layout.

Die Einstellung workbench.editor.showTabIndex ermöglicht es Ihnen, den Index jedes Tabs im Tab-Header anzuzeigen. Dies erleichtert die Anzeige der Nummer, die mit der Tastenkombination Strg (Cmd unter macOS) + Nummer verwendet werden kann, um schnell zu einem bestimmten Tab zu wechseln.

Vorschau-Modus

Wenn Sie mit der linken Maustaste auf eine Datei in der Explorer-Ansicht klicken oder sie auswählen, wird sie im Vorschau-Modus angezeigt und ein vorhandener Tab (Vorschau-Tab) wiederverwendet. Dies ist nützlich, wenn Sie schnell Dateien durchsuchen und nicht möchten, dass jede besuchte Datei ihren eigenen Tab erhält. Wenn Sie mit der Bearbeitung der Datei beginnen oder die Datei per Doppelklick aus dem Explorer öffnen, wird dieser Datei ein neuer, dedizierter Tab zugewiesen.

Der Vorschau-Modus wird durch Kursivschrift im Tab-Header angezeigt.

Wenn Sie den Vorschau-Modus nicht bevorzugen und immer einen neuen Tab erstellen möchten, können Sie das Verhalten mit diesen Einstellungen steuern

• workbench.editor.enablePreview – Zum globalen Aktivieren oder Deaktivieren von Vorschau-Editoren
• workbench.editor.enablePreviewFromQuickOpen – Zum Aktivieren oder Deaktivieren von Vorschau-Editoren, wenn sie aus Schnell öffnen geöffnet werden

Umgebrochene Tabs

Um mehr Editor-Tabs anzuzeigen, können Sie das Layout mit umgebrochenen Tabs verwenden, bei dem sich die Editor-Tabs in mehreren Zeilen oberhalb des Editorbereichs umbrechen. Aktivieren Sie umgebrochene Tabs mit der Einstellung Workbench > Editor: Tabs umbrechen (workbench.editor.wrapTabs).

Tab-Beschriftungen anpassen

Wenn Sie mehrere Dateien mit demselben Namen gleichzeitig geöffnet haben, kann es schwierig sein, die verschiedenen Tabs zu unterscheiden. Um dies zu erleichtern, können Sie den Tabs eine benutzerdefinierte Anzeigebezeichnung zuweisen. Sie können wählen, für welche Dateien in Ihrem Arbeitsbereich Sie eine benutzerdefinierte Bezeichnung für den Tab anwenden möchten.

Um benutzerdefinierte Anzeigebezeichnungen für Tabs zu aktivieren, setzen Sie die Einstellung workbench.editor.customLabels.enabled

    "workbench.editor.customLabels.enabled": true

Sie können ein oder mehrere Benennungsmuster für die Anzeigelabels von Tabs mit der Einstellung workbench.editor.customLabels.patterns angeben. Ein Namensmuster besteht aus zwei Komponenten

• Element - ein Glob-Muster, das Dateipfade abgleicht, auf die ein benutzerdefiniertes Label angewendet werden soll. Zum Beispiel **/static/**/*.html.
• Wert - eine Vorlage für das benutzerdefinierte Label. Vorlagen können Variablen wie ${filename}, ${extname}, ${extname(N)}, ${dirname} und ${dirname(N)} verwenden, die dynamisch durch Werte aus dem Pfad der Datei ersetzt werden.

Das folgende Beispiel zeigt die Datei /src/orders/index.html mit einem Tab-Label von orders/index.

    "workbench.editor.customLabels.patterns": {
        "**/src/**/index.html": "${dirname}/${filename}"
    }

Die folgenden Beispiele verwenden die Variable ${extname} für die Datei tests/editor.test.ts

• ${filename} => editor
• ${extname} => test.ts
• ${extname(0)} => ts
• ${extname(1)} => test
• ${extname(-1)} => test
• ${extname(-2)} => ts

Grid-Editor-Layout

Standardmäßig sind Editor-Gruppen in vertikalen Spalten angeordnet. Wenn Sie beispielsweise einen Editor teilen, wird der Editor daneben geöffnet. Sie können Editor-Gruppen beliebig anordnen, sowohl vertikal als auch horizontal.

Um flexible Layouts zu unterstützen, können Sie leere Editor-Gruppen erstellen. Standardmäßig wird eine Gruppe geschlossen, wenn der letzte Editor darin geschlossen wird. Sie können dieses Verhalten jedoch mit der neuen Einstellung workbench.editor.closeEmptyGroups: false ändern.

Es gibt eine vordefinierte Auswahl von Editor-Layouts im Menü Ansicht > Editor-Layout.

Standardmäßig werden Editoren, die nebeneinander geöffnet werden (z. B. durch Auswahl der Aktion Editor teilen in der Symbolleiste des Editors), auf der rechten Seite des aktiven Editors geöffnet. Wenn Sie bevorzugen, dass Editoren unter dem aktiven Editor geöffnet werden, setzen Sie workbench.editor.openSideBySideDirection auf down.

Es gibt viele Tastatur-Befehle, um das Editor-Layout mit der Tastatur anzupassen. Wenn Sie lieber die Maus verwenden, können Sie per Drag & Drop den Editor in jede beliebige Richtung teilen.

Tastenkombinationen

Hier sind einige nützliche Tastenkombinationen, um schnell zwischen Editoren und Editor-Gruppen zu navigieren.

• ⌥⌘→ (Windows, Linux Ctrl+PageDown) - zum rechten Editor wechseln.
• ⌥⌘← (Windows, Linux Ctrl+PageUp) - zum linken Editor wechseln.
• ⌃Tab (Windows, Linux Ctrl+Tab) - öffnet den vorherigen Editor in der Liste der zuletzt verwendeten Editoren der Editor-Gruppe.
• ⌘1 (Windows, Linux Ctrl+1) - zur am weitesten links gelegenen Editor-Gruppe wechseln.
• ⌘2 (Windows, Linux Ctrl+2) - zur mittleren Editor-Gruppe wechseln.
• ⌘3 (Windows, Linux Ctrl+3) - zur am weitesten rechts gelegenen Editor-Gruppe wechseln.
• ⌘W (Windows Ctrl+F4, Linux Ctrl+W) - schließt den aktiven Editor.
• ⌘K W (Windows, Linux Ctrl+K W) - schließt alle Editoren in der Editor-Gruppe.
• ⌘K ⌘W (Windows, Linux Ctrl+K Ctrl+W) - schließt alle Editoren.

Wenn Sie die Standard-Tastenkombinationen ändern möchten, finden Sie weitere Details unter Tastenkombinationen.

Arbeiten ohne Tabs

Wenn Sie Tabs (Tab-Überschriften) nicht verwenden möchten, können Sie Tabs vollständig deaktivieren, indem Sie workbench.editor.showTabs auf single oder none setzen.

Vorschau-Modus deaktivieren

Ohne Tabs ist der Abschnitt Geöffnete Editoren in der Explorer-Ansicht eine schnelle Möglichkeit zur Dateinavigation. Wenn jedoch der Vorschau-Editor-Modus aktiviert ist, werden Dateien nicht zum Abschnitt "Geöffnete Editoren" hinzugefügt. Sie können diese Funktion über die Einstellungen workbench.editor.enablePreview und workbench.editor.enablePreviewFromQuickOpen deaktivieren.

Tastenkombinationen zur Navigation durch die Editor-Historie verwenden

Sie können die Einstellung für Ctrl+Tab ändern, um eine Liste aller geöffneten Editoren aus der Historie anzuzeigen, unabhängig von der aktiven Editor-Gruppe.

Bearbeiten Sie Ihre Tastenkombinationen und fügen Sie Folgendes hinzu

{ "key": "ctrl+tab", "command": "workbench.action.openPreviousEditorFromHistory" },
{ "key": "ctrl+tab", "command": "workbench.action.quickOpenNavigateNext", "when": "inQuickOpen" },

Eine ganze Gruppe anstelle eines einzelnen Editors schließen

Wenn Ihnen das Verhalten von VS Code gefällt, eine ganze Gruppe beim Schließen eines Editors zu schließen, können Sie Folgendes in Ihren Tastenkombinationen binden.

macOS

{ "key": "cmd+w", "command": "workbench.action.closeEditorsInGroup" }

Windows/Linux

{ "key": "ctrl+w", "command": "workbench.action.closeEditorsInGroup" }

Fenstermanagement

VS Code bietet verschiedene Optionen, um zu steuern, wie VS Code-Fenster (Instanzen) zwischen Sitzungen geöffnet oder wiederhergestellt werden sollen.

Die Einstellungen window.openFoldersInNewWindow und window.openFilesInNewWindow dienen zur Konfiguration des Öffnens neuer Fenster oder der Wiederverwendung des zuletzt aktiven Fensters für Dateien oder Ordner. Mögliche Werte sind default, on und off.

Wenn auf default eingestellt, entscheidet VS Code, ob ein neues Fenster geöffnet oder ein vorhandenes wiederverwendet wird, basierend auf dem Kontext, aus dem die Öffnungsanfrage kam. Ändern Sie dies auf on oder off, um sich immer gleich zu verhalten. Wenn Sie beispielsweise möchten, dass das Auswählen einer Datei oder eines Ordners über das Menü Datei immer in einem neuen Fenster geöffnet wird, stellen Sie diesen Wert auf on.

Die Einstellung window.restoreWindows informiert VS Code darüber, wie die geöffneten Fenster Ihrer vorherigen Sitzung wiederhergestellt werden sollen. Standardmäßig stellt VS Code alle Fenster wieder her, mit denen Sie während Ihrer vorherigen Sitzung gearbeitet haben (Einstellung: all). Ändern Sie diese Einstellung auf none, um nie wieder Fenster zu öffnen und immer mit einer leeren VS Code-Instanz zu starten. Ändern Sie sie auf one, um das zuletzt geöffnete Fenster wiederherzustellen, mit dem Sie gearbeitet haben, oder auf folders, um nur Fenster wiederherzustellen, in denen Ordner geöffnet waren.

Nächste Schritte

Nachdem Sie nun das allgemeine Layout von VS Code kennen, beginnen Sie damit, den Editor an Ihre Arbeitsweise anzupassen, indem Sie die folgenden Artikel lesen:

• Thema ändern - Legen Sie ein Farb- und/oder Dateisymbol-Thema nach Ihren Wünschen fest.
• Benutzerdefinierte Layouts verwenden - Erfahren Sie mehr über die Anpassung des VS Code-Workbench- und Editor-Layouts.

Häufig gestellte Fragen

Wie kann ich die Farbe der Einzugslinien ändern?

Die Farben der Einzugslinien sind anpassbar, ebenso wie die meisten Benutzeroberflächenelemente von VS Code. Um die Farbe der Einzugslinien für Ihr aktives Farbthema anzupassen, verwenden Sie die Einstellung workbench.colorCustomizations und ändern Sie den Wert editorIndentGuide.background.

Um beispielsweise die Einzugslinien hellblau zu machen, fügen Sie Folgendes zu Ihrer settings.json hinzu:

"workbench.colorCustomizations": {
    "editorIndentGuide.background": "#0000ff"
}

Kann ich den Abschnitt "Geöffnete Editoren" in der Explorer-Ansicht ausblenden?

Ja, Sie können den Abschnitt "Geöffnete Editoren" anzeigen oder ausblenden, indem Sie das Menü "Ansichten" im Explorer verwenden und den Menüpunkt Geöffnete Editoren umschalten.