Code-Navigation

Visual Studio Code verfügt über einen hocheffizienten Code-Editor, der Ihnen in Verbindung mit Programmiersprachen-Services die Leistungsfähigkeit einer IDE und die Geschwindigkeit eines Texteditors bietet. In diesem Thema beschreiben wir zunächst die Sprachintelligenzfunktionen von VS Code (Vorschläge, Parameterhinweise, intelligente Code-Navigation) und zeigen dann die Leistungsfähigkeit des Kern-Texteditors.

Schnelle Dateinavigation

Tipp: Sie können jede Datei nach ihrem Namen öffnen, indem Sie ⌘P (Windows, Linux Ctrl+P) (Schnell öffnen) eingeben.

Der Explorer eignet sich hervorragend zur Navigation zwischen Dateien, wenn Sie ein Projekt erkunden. Wenn Sie jedoch an einer Aufgabe arbeiten, werden Sie schnell zwischen denselben Dateien wechseln. VS Code bietet zwei leistungsstarke Befehle zur Navigation in und zwischen Dateien mit einfach zu bedienenden Tastenkombinationen.

Halten Sie Strg gedrückt und drücken Sie Tab, um eine Liste aller geöffneten Dateien in einer Editor-Gruppe anzuzeigen. Um eine dieser Dateien zu öffnen, drücken Sie erneut Tab, um die gewünschte Datei auszuwählen, und lassen Sie dann Strg los, um sie zu öffnen.

Alternativ können Sie ⌃- (Windows Alt+Links, Linux Ctrl+Alt+-) und ⌃⇧- (Windows Alt+Rechts, Linux Ctrl+Shift+-) verwenden, um zwischen Dateien und Bearbeitungspositionen zu navigieren. Wenn Sie zwischen verschiedenen Zeilen derselben Datei hin und her springen, können Sie mit diesen Tastenkombinationen einfach zwischen diesen Positionen navigieren.

Brotkrümelnavigation

Der Editor verfügt über eine Navigationsleiste oberhalb seines Inhalts, die als Breadcrumbs bezeichnet wird. Sie zeigt den aktuellen Speicherort an und ermöglicht Ihnen die schnelle Navigation zwischen Ordnern, Dateien und Symbolen.

Breadcrumbs zeigen immer den Dateipfad und, mit Hilfe von Sprach-Erweiterungen, den Symbolpfad bis zur Cursorposition an. Die angezeigten Symbole sind dieselben wie in der Gliederungsansicht und beim Springen zu Symbolen.

Wenn Sie einen Breadcrumb im Pfad auswählen, wird ein Dropdown mit den Geschwistern auf dieser Ebene angezeigt, sodass Sie schnell zu anderen Ordnern und Dateien navigieren können.

Wenn der aktuelle Dateityp über Sprachunterstützung für Symbole verfügt, sehen Sie den aktuellen Symbolpfad und ein Dropdown mit anderen Symbolen auf derselben Ebene und darunter.

Sie können Breadcrumbs mit der Umschaltoption Ansicht > Breadcrumbs anzeigen oder mit der Einstellung breadcrumbs.enabled Einstellung deaktivieren.

Breadcrumb-Anpassung

Das Erscheinungsbild von Breadcrumbs kann angepasst werden. Wenn Sie sehr lange Pfade haben oder nur an Dateipfaden oder Symbolpfaden interessiert sind, können Sie die Einstellungen breadcrumbs.filePath und breadcrumbs.symbolPath verwenden. Beide unterstützen on, off und last und definieren, ob und welcher Teil des Pfades angezeigt wird. Standardmäßig zeigen Breadcrumbs Symbole für Dateien und Symbole links vom Breadcrumb an, Sie können die Symbole jedoch entfernen, indem Sie breadcrumbs.icons auf false setzen.

Symbolreihenfolge in Breadcrumbs

Sie können steuern, wie Symbole im Breadcrumbs-Dropdown sortiert werden, mit den Einstellungen breadcrumbs.symbolSortOrder.

Zulässige Werte sind

• position - Position in der Datei (Standard)
• name - alphabetische Reihenfolge
• type - Reihenfolge nach Symboltyp

Breadcrumb-Tastaturnavigation

Um mit Breadcrumbs zu interagieren, verwenden Sie den Befehl Breadcrumbs fokussieren oder drücken Sie ⇧⌘. (Windows, Linux Ctrl+Shift+.). Dies wählt das letzte Element aus und öffnet ein Dropdown, das Ihnen die Navigation zu einem Geschwister-Datei oder -Symbol ermöglicht. Verwenden Sie die Tastenkombinationen ← (Windows, Linux Links) und → (Windows, Linux Rechts), um zu Elementen vor oder nach dem aktuellen Element zu gelangen. Wenn das Dropdown-Menü erscheint, beginnen Sie zu tippen – alle übereinstimmenden Elemente werden hervorgehoben und die beste Übereinstimmung wird für eine schnelle Navigation ausgewählt.

Sie können auch mit Breadcrumbs interagieren, ohne das Dropdown-Menü zu verwenden. Drücken Sie ⇧⌘; (Windows, Linux Ctrl+Shift+;), um das letzte Element zu fokussieren, verwenden Sie ← (Windows, Linux Links) und → (Windows, Linux Rechts) zur Navigation und verwenden Sie Leertaste, um das Element im Editor anzuzeigen.

Zur Definition springen

Wenn ein Sprache dies unterstützt, können Sie zur Definition eines Symbols springen, indem Sie F12 drücken.

Wenn Sie Strg drücken und mit der Maus über ein Symbol fahren, wird eine Vorschau der Deklaration angezeigt

Tipp: Sie können mit Strg+Klick zur Definition springen oder die Definition daneben mit Strg+Alt+Klick öffnen.

Zu Typdefinition springen

Einige Sprachen unterstützen auch das Springen zur Typdefinition eines Symbols, indem Sie den Befehl Zu Typdefinition springen entweder aus dem Editor-Kontextmenü oder über die Befehlspalette ausführen. Dies führt Sie zur Definition des Typs eines Symbols. Der Befehl editor.action.goToTypeDefinition ist standardmäßig keiner Tastenkombination zugeordnet, aber Sie können Ihre eigene benutzerdefinierte Tastenkombination hinzufügen.

Zu Implementierung springen

Sprachen können auch das Springen zur Implementierung eines Symbols unterstützen, indem Sie ⌘F12 (Windows, Linux Ctrl+F12) drücken. Für eine Schnittstelle werden hier alle Implementierungen dieser Schnittstelle angezeigt, und für abstrakte Methoden werden hier alle konkreten Implementierungen dieser Methode angezeigt.

Zu Symbol springen

Sie können Symbole innerhalb einer Datei mit ⇧⌘O (Windows, Linux Ctrl+Shift+O) navigieren. Wenn Sie : eingeben, werden die Symbole nach Kategorien gruppiert. Drücken Sie Pfeil nach oben oder Pfeil nach unten und navigieren Sie zu der gewünschten Stelle.

Symbol nach Namen öffnen

Einige Sprachen unterstützen das Springen zu einem Symbol über Dateien hinweg mit ⌘T (Windows, Linux Ctrl+T). Geben Sie den ersten Buchstaben eines Typs ein, zu dem Sie navigieren möchten, unabhängig davon, in welcher Datei er sich befindet, und drücken Sie Enter.

Einblenden

Wir sind der Meinung, dass es nichts Schlimmeres gibt als einen großen Kontextwechsel, wenn man nur schnell etwas überprüfen möchte. Deshalb unterstützen wir Peek-Editoren. Wenn Sie eine Referenzen suchen-Suche ausführen (über ⇧F12 (Windows, Linux Shift+F12)) oder eine Definition ansehen (über ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)), betten wir das Ergebnis inline ein.

Sie können zwischen verschiedenen Referenzen im Peek-Editor navigieren und dort schnelle Bearbeitungen vornehmen. Wenn Sie auf den Dateinamen des Peek-Editors klicken oder doppelt auf den Eintrag in der Ergebnisliste klicken, wird die Referenz im äußeren Editor geöffnet.

Tipp: Zusätzlich wird das Peek-Fenster geschlossen, wenn Sie Esc drücken oder doppelt in den Peek-Editor-Bereich klicken. Sie können dieses Verhalten mit der Einstellung editor.stablePeek Einstellung deaktivieren.

Klammerabgleich

Übereinstimmende Klammern werden hervorgehoben, sobald sich der Cursor in deren Nähe befindet.

Tipp: Sie können mit ⇧⌘\ (Windows, Linux Ctrl+Shift+\) zur übereinstimmenden Klammer springen.

Klammerpaar-Farbkodierung

Übereinstimmende Klammerpaare können auch farblich hervorgehoben werden, indem Sie editor.bracketPairColorization.enabled auf true setzen.

Alle Farben sind themenbezogen und bis zu sechs Farben können konfiguriert werden.

Sie können workbench.colorCustomizations verwenden, um diese vom Thema bereitgestellten Farben in Ihren Einstellungen zu überschreiben.

"workbench.colorCustomizations": {
    "editorBracketHighlight.foreground1": "#FFD700",
    "editorBracketHighlight.foreground2": "#DA70D6",
    "editorBracketHighlight.foreground3": "#179fff",
},

Referenzinformationen

Einige Sprachen wie C# unterstützen Inline-Referenzinformationen, die live aktualisiert werden. Dies ermöglicht es Ihnen, die Auswirkungen Ihrer Bearbeitung oder die Popularität Ihrer spezifischen Methode oder Eigenschaft in Ihrem Projekt schnell zu analysieren.

Tipp: Rufen Sie die Aktion Referenzen ansehen direkt auf, indem Sie auf diese Annotationen klicken.

Tipp: Die in CodeLens angezeigten Referenzinformationen können über die editor.codeLens Einstellung ein- oder ausgeschaltet werden.

Symbol umbenennen

Einige Sprachen unterstützen das Umbenennen von Symbolen über Dateien hinweg. Drücken Sie F2, geben Sie dann den neuen gewünschten Namen ein und drücken Sie Enter. Alle Verwendungen des Symbols werden über alle Dateien hinweg umbenannt.

Fehler & Warnungen

Warnungen oder Fehler können entweder über konfigurierte Tasks, durch umfangreiche Sprach-Services oder durch Linter erzeugt werden, die Ihren Code ständig im Hintergrund analysieren. Da wir fehlerfreien Code lieben, werden Warnungen und Fehler an mehreren Stellen angezeigt.

• In der Statusleiste gibt es eine Zusammenfassung aller Fehler- und Warnungszählungen.
• Sie können auf die Zusammenfassung klicken oder ⇧⌘M (Windows, Linux Ctrl+Shift+M) drücken, um das PROBLEME-Panel mit einer Liste aller aktuellen Fehler anzuzeigen.
• Wenn Sie eine Datei öffnen, die Fehler oder Warnungen enthält, werden diese inline mit dem Text und in der Übersichtslineal gerendert.

Tipp: Um durch Fehler oder Warnungen in der aktuellen Datei zu iterieren, können Sie ⌥F8 (Windows, Linux Alt+F8) oder ⇧⌥F8 (Windows, Linux Shift+Alt+F8) drücken, was eine Inline-Zone mit Details zum Problem und möglichen Code-Aktionen (falls vorhanden) anzeigt.

Code-Aktion

Warnungen und Fehler können Code-Aktionen (auch bekannt als Quick Fixes) bereitstellen, um Probleme zu beheben. Diese werden im Editor im linken Rand als Glühbirne angezeigt. Ein Klick auf die Glühbirne zeigt entweder die Code-Aktionsoptionen an oder führt die Aktion aus.

Inlay-Hinweise

Einige Sprachen bieten Inlay-Hinweise: das sind zusätzliche Informationen zu Quellcode, die inline gerendert werden. Dies wird normalerweise verwendet, um abgeleitete Typen anzuzeigen. Das folgende Beispiel zeigt Inlay-Hinweise, die die abgeleiteten Typen von JavaScript-Variablen und Funktionsrückgabetypen anzeigen.

Inlay-Hinweise können mit der Einstellung editor.inlayHints.enabled aktiviert/deaktiviert werden, der Standardwert ist aktiviert. Erweiterungen wie TypeScript oder Rust sind erforderlich, um die tatsächlichen Inlay-Hinweisinformationen bereitzustellen.

Schutz vor ausgehenden Links

Zu Ihrer Sicherheit zeigt VS Code eine Aufforderung an, bevor ein ausgehender Website-Link aus dem Editor geöffnet wird.

Sie können zur externen Website in Ihrem Browser fortfahren oder die Optionen zum Kopieren des Links oder zum Abbrechen der Anfrage auswählen. Wenn Sie Vertrauenswürdige Domains konfigurieren wählen, können Sie im Dropdown-Menü die exakte URL vertrauen, der Domain und den Subdomänen der URL vertrauen oder allen Domains vertrauen, um den Schutz ausgehender Links zu deaktivieren.

Die Option Vertrauenswürdige Domains verwalten, die jederzeit über die Befehlspalette verfügbar ist, öffnet die Trusted Domains JSON-Datei, in der Sie vertrauenswürdige Domänen hinzufügen, entfernen oder ändern können.

// You can use the "Manage Trusted Domains" command to open this file.
// Save this file to apply the trusted domains rules.
[
  "*.twitter.com"
]

Die Trusted Domains JSON-Datei enthält auch Kommentare mit Beispielen für unterstützte Domainformate und eine Liste der standardmäßig vertrauenswürdigen Domänen, wie z. B. https://*.visualstudio.com und https://*.microsoft.com.

Nächste Schritte

Jetzt, da Sie wissen, wie der Editor funktioniert, ist es Zeit, ein paar andere Dinge auszuprobieren...

• Einführungsvideo - Code-Bearbeitung - Sehen Sie sich ein Einführungsvideo zu Code-Bearbeitungsfunktionen an.
• Benutzeroberfläche - Falls Sie eine grundlegende Orientierung in VS Code verpasst haben.
• Tastenkombinationen - Erfahren Sie, wie Sie Tastenkombinationen nach Ihren Wünschen ändern können.
• Debugging - Hier glänzt VS Code wirklich.

Häufig gestellte Fragen

Wie kann ich den zweiten Eintrag in Quick Open automatisch auswählen, anstatt den ersten?

Mit dem Befehl workbench.action.quickOpenPreviousEditor können Sie den zweiten Eintrag in Quick Open automatisch auswählen lassen. Dies kann nützlich sein, wenn Sie den vorherigen Eintrag aus der Liste auswählen möchten, ohne eine weitere Tastenkombination ausführen zu müssen.

[
  {
    "key": "ctrl+p",
    "command": "workbench.action.quickOpenPreviousEditor"
  },
  {
    "key": "ctrl+p",
    "command": "-workbench.action.quickOpen"
  }
]

Wie kann ich Strg+Tab konfigurieren, um alle Editoren aller Gruppen zu durchlaufen?

Standardmäßig navigiert Strg+Tab zwischen den Editoren derselben Editor-Gruppe. Wenn Sie über alle geöffneten Editoren in allen Gruppen navigieren möchten, können Sie Tastenkombinationen für die Befehle workbench.action.quickOpenPreviousRecentlyUsedEditor und workbench.action.quickOpenLeastRecentlyUsedEditor erstellen.

[
  {
    "key": "ctrl+tab",
    "command": "workbench.action.quickOpenPreviousRecentlyUsedEditor",
    "when": "!inEditorsPicker"
  },
  {
    "key": "ctrl+shift+tab",
    "command": "workbench.action.quickOpenLeastRecentlyUsedEditor",
    "when": "!inEditorsPicker"
  }
]

Wie kann ich zwischen kürzlich verwendeten Editoren navigieren, ohne eine Auswahl zu öffnen?

Hier ist eine Liste von Befehlen, mit denen Sie in Editoren navigieren können, ohne eine Auswahl zu öffnen.