10 Visual-Studio-Code-Shortcuts, die du kennen solltest

Visual Studio Code gehört heute zu den beliebtesten Code-Editoren und wird von Entwicklern, Testautomatisierern, DevOps-Spezialisten und Menschen verwendet, die gerade mit dem Programmieren beginnen.

Die große Beliebtheit des Editors liegt unter anderem an seiner übersichtlichen Oberfläche, der großen Auswahl an Erweiterungen, der Unterstützung zahlreicher Programmiersprachen und den umfangreichen Anpassungsmöglichkeiten.

Eine der einfachsten Möglichkeiten, die eigene Arbeit in Visual Studio Code zu beschleunigen, ist die Verwendung von Tastenkombinationen.

Am Anfang führen viele Nutzer fast alle Aktionen mit der Maus aus. Sie öffnen Ordner im Explorer, suchen Dateien manuell, wählen Befehle über das Menü aus und markieren einzelne Codeabschnitte.

Daran ist nichts falsch, besonders wenn man sich erst mit dem Editor vertraut macht. Mit der Zeit lohnt es sich jedoch, einige Tastenkombinationen in den täglichen Arbeitsablauf zu integrieren.

Du musst nicht sofort Dutzende Shortcuts auswendig lernen. Es reicht, zunächst mit einigen häufig verwendeten Funktionen zu beginnen. Nach kurzer Zeit werden dir die Tastenkombinationen ganz selbstverständlich vorkommen und du wirst dich deutlich schneller durch deine Projekte bewegen können.

In diesem Artikel findest du 10 praktische Visual-Studio-Code-Shortcuts, die unabhängig davon nützlich sind, ob du mit JavaScript, TypeScript, Python, Java, Konfigurationsdateien, automatisierten Tests oder Cloud-Projekten arbeitest.

Die Tastenkombinationen werden sowohl für Windows und Linux als auch für macOS angegeben.

1. Dateien schnell öffnen

Windows/Linux: Ctrl + P
macOS: Command + P

Bei größeren Projekten kann die manuelle Suche nach einer Datei im Explorer schnell unnötig viel Zeit kosten.

Ein Projekt kann aus mehreren Dutzend Ordnern und Hunderten von Dateien bestehen. Jedes Mal die gesamte Verzeichnisstruktur aufzuklappen, ist daher nicht besonders effizient.

Mit Ctrl + P öffnest du die Schnellsuche für Dateien. Anschließend reicht es aus, einen Teil des Dateinamens einzugeben. Visual Studio Code zeigt dir sofort passende Ergebnisse an.

Angenommen, dein Projekt enthält folgende Datei:

src/components/UserProfile.tsx

Anstatt zuerst den Ordner src, danach components zu öffnen und anschließend die Datei zu suchen, drückst du einfach Ctrl + P und gibst Folgendes ein:

userprofile

Nach der Auswahl wird die Datei sofort geöffnet.

Du musst weder den vollständigen Dateinamen noch den gesamten Pfad eingeben. Visual Studio Code kann Dateien auch anhand von Teilen des Namens finden. Dadurch gehört dieser Shortcut zu den nützlichsten Funktionen im täglichen Arbeitsalltag.

2. Die Befehlspalette öffnen

Windows/Linux: Ctrl + Shift + P
macOS: Command + Shift + P

Die Befehlspalette, auf Englisch Command Palette, ermöglicht dir den Zugriff auf fast alle Funktionen von Visual Studio Code.

Nach dem Öffnen kannst du einen Befehl suchen, indem du einen Teil seines Namens eingibst. Du musst also nicht wissen, in welchem Menü sich eine bestimmte Funktion befindet.

Mit der Befehlspalette kannst du unter anderem:

• das Farbschema des Editors ändern,
• ein Dokument formatieren,
• die Einstellungen öffnen,
• das Visual-Studio-Code-Fenster neu laden,
• eine Aufgabe ausführen,
• einen Interpreter auswählen,
• Befehle von Erweiterungen starten,
• den Sprachmodus einer Datei ändern.

Wenn du beispielsweise das Design ändern möchtest, öffnest du die Befehlspalette und gibst Folgendes ein:

Color Theme

Anschließend wählst du das gewünschte Farbschema aus.

Die Command Palette ist besonders hilfreich, wenn du genau weißt, was du tun möchtest, aber die entsprechende Tastenkombination nicht kennst. Sie funktioniert wie eine zentrale Suchmaschine für nahezu alle Funktionen des Editors.

3. Das gesamte Projekt durchsuchen

Windows/Linux: Ctrl + Shift + F
macOS: Command + Shift + F

Die Suche innerhalb einer einzelnen Datei ist praktisch. Im Arbeitsalltag musst du jedoch häufig alle Stellen finden, an denen ein bestimmter Name, Wert, Methodenaufruf oder Text vorkommt.

Mit Ctrl + Shift + F öffnest du die projektweite Suche.

Damit kannst du beispielsweise nach folgenden Inhalten suchen:

• einem Funktionsnamen,
• einem API-Endpunkt,
• einer Fehlermeldung,
• einem Selektor aus automatisierten Tests,
• einer Umgebungsvariable,
• einer SQL-Abfrage,
• einem Konfigurationswert.

Angenommen, du möchtest überprüfen, an welchen Stellen die Funktion createUser verwendet wird. Nach der Eingabe zeigt Visual Studio Code alle Dateien und Zeilen an, in denen dieser Begriff vorkommt.

Du kannst die Suche zusätzlich auf bestimmte Dateien oder Ordner begrenzen. Ebenso lassen sich Verzeichnisse ausschließen, beispielsweise generierte Reports, Build-Ordner oder Abhängigkeiten.

Die Suchfunktion unterstützt außerdem reguläre Ausdrücke. Damit kannst du auch komplexere Muster im gesamten Projekt finden.

4. Das Terminal öffnen und ausblenden

Windows/Linux: Ctrl + `` **macOS:** Control + ``

Visual Studio Code besitzt ein integriertes Terminal. In vielen Fällen musst du deshalb kein separates Konsolenfenster öffnen.

Mit der Tastenkombination aus Ctrl beziehungsweise Control und der Gravis-Taste kannst du das Terminal schnell ein- oder ausblenden. Die Gravis-Taste befindet sich bei vielen Tastaturen oben links in der Nähe der Taste 1.

Im Terminal kannst du unter anderem folgende Befehle ausführen:

npm install
npm run dev
npm test
git status
git pull
npx playwright test
docker compose up

Das ist besonders praktisch, wenn du Webanwendungen entwickelst, automatisierte Tests erstellst oder mit DevOps-Werkzeugen arbeitest.

Anstatt ständig zwischen Visual Studio Code und einem separaten Terminalfenster zu wechseln, kannst du die wichtigsten Aufgaben direkt innerhalb des Editors erledigen.

Visual Studio Code ermöglicht außerdem die Arbeit mit mehreren Terminal-Sitzungen und verschiedenen Shells, zum Beispiel PowerShell, Command Prompt, Git Bash, Bash oder Zsh.

5. Die Seitenleiste ein- und ausblenden

Windows/Linux: Ctrl + B
macOS: Command + B

Die Seitenleiste von Visual Studio Code enthält unter anderem den Datei-Explorer, die Suchfunktion, die Versionskontrolle und die installierten Erweiterungen.

Diese Bereiche sind sehr hilfreich, können aber auf kleineren Bildschirmen einen großen Teil des verfügbaren Platzes einnehmen.

Mit Ctrl + B kannst du die Seitenleiste schnell ausblenden und bei Bedarf wieder anzeigen.

Das ist besonders nützlich, wenn du:

• an einem Laptop arbeitest,
• lange Codezeilen vollständig sehen möchtest,
• zwei Dateien nebeneinander vergleichst,
• einen Kurs oder ein Tutorial aufnimmst,
• dich auf die aktuell geöffnete Datei konzentrieren möchtest.

Es handelt sich um einen sehr einfachen Shortcut, der den Arbeitskomfort deutlich verbessern kann. Anstatt die Breite der Seitenleiste jedes Mal manuell zu verändern, gewinnst du mit einer Tastenkombination zusätzlichen Platz.

6. Eine Codezeile verschieben

Windows/Linux: Alt + Pfeil nach oben oder Alt + Pfeil nach unten
macOS: Option + Pfeil nach oben oder Option + Pfeil nach unten

Beim Bearbeiten von Code kommt es häufig vor, dass eine Zeile an eine andere Position verschoben werden soll.

Normalerweise würdest du die Zeile markieren, ausschneiden, den Cursor an die richtige Stelle setzen und den Inhalt wieder einfügen.

In Visual Studio Code geht das deutlich schneller.

Setze den Cursor in die gewünschte Zeile und drücke Alt zusammen mit dem Pfeil nach oben oder unten. Die gesamte Zeile wird entsprechend verschoben.

Die Tastenkombination funktioniert auch mit mehreren markierten Zeilen.

Wenn sich beispielsweise ein Import an der falschen Stelle befindet, kannst du ihn einfach nach oben verschieben. Ebenso kannst du die Reihenfolge von Array-Elementen, Objekteigenschaften, Testschritten oder Konfigurationsregeln ändern.

Visual Studio Code behält dabei die Einrückung bei, wodurch die Funktion schnell und komfortabel verwendet werden kann.

7. Mehrere Cursor hinzufügen

Windows/Linux: Alt + Mausklick
macOS: Option + Mausklick

Die Arbeit mit mehreren Cursorn, auch Multicursor Editing genannt, gehört zu den besonders nützlichen Funktionen moderner Code-Editoren.

Halte Alt gedrückt und klicke an mehreren Stellen im Dokument. Visual Studio Code fügt an jeder ausgewählten Position einen zusätzlichen Cursor ein.

Alles, was du anschließend schreibst oder löschst, wird gleichzeitig an allen Cursorpositionen ausgeführt.

Angenommen, du hast folgenden Code:

const userName = "Adam";
const userEmail = "adam@example.com";
const userRole = "admin";

Wenn du an mehreren Stellen denselben Text ergänzen möchtest, musst du nicht jede Zeile einzeln bearbeiten. Du kannst mehrere Cursor setzen und die Änderung nur einmal durchführen.

Diese Funktion ist besonders hilfreich beim:

• Bearbeiten ähnlicher Eigenschaften,
• Hinzufügen von Präfixen,
• Ändern strukturierter Daten,
• Aktualisieren mehrerer Selektoren,
• Bearbeiten wiederkehrender Codeabschnitte,
• Erstellen von Testdaten.

Du solltest die Funktion allerdings vorsichtig verwenden. Wenn die ausgewählten Zeilen unterschiedlich aufgebaut sind, kann es schnell passieren, dass du versehentlich die falschen Stellen veränderst.

8. Zur Definition wechseln

Windows/Linux/macOS: F12

Beim Lesen von Code stößt du häufig auf eine Funktion, Klasse, Methode oder Variable und möchtest wissen, wo sie definiert wurde.

Setze den Cursor auf das gewünschte Symbol und drücke F12. Visual Studio Code versucht anschließend, direkt zur Definition zu springen.

In einem automatisierten Test könnte beispielsweise folgender Methodenaufruf vorkommen:

await loginPage.login(username, password);

Wenn du sehen möchtest, wie die Methode login implementiert wurde, setzt du den Cursor auf den Methodennamen und drückst F12.

Visual Studio Code kann daraufhin direkt die Datei öffnen, in der sich die Implementierung befindet.

Diese Funktion arbeitet besonders zuverlässig in TypeScript-Projekten, weil der Editor dort zusätzliche Informationen über Typen und die Struktur des Codes besitzt.

Der Wechsel zur Definition ist hilfreich beim:

• Kennenlernen eines neuen Projekts,
• Analysieren bestehenden Codes,
• Suchen einer Interface-Implementierung,
• Untersuchen von Bibliothekscode,
• Debuggen eines Problems,
• Durchführen eines Code Reviews.

Zur vorherigen Position gelangst du mit:

Windows/Linux: Alt + Pfeil nach links
macOS: Control + -

Dadurch kannst du komfortabel zwischen einem Aufruf und seiner Implementierung wechseln, ohne Dateien manuell suchen zu müssen.

9. Ein Symbol umbenennen

Windows/Linux/macOS: F2

Das Umbenennen einer Variable oder Funktion mit einer normalen Suchen-und-Ersetzen-Funktion kann riskant sein.

In einem Projekt können mehrere unabhängige Variablen denselben Namen besitzen. Eine globale Textersetzung könnte deshalb auch Stellen verändern, die gar nicht angepasst werden sollten.

Mit F2 öffnest du die Funktion Rename Symbol.

Setze den Cursor auf eine Variable, Funktion, Klasse, Methode oder ein anderes Symbol und drücke F2. Gib anschließend den neuen Namen ein. Visual Studio Code versucht daraufhin, alle zugehörigen Verwendungen anzupassen.

Ein Beispiel:

const result = calculatePrice(products);

Der Name result ist sehr allgemein. Du könntest ihn daher in totalPrice ändern:

const totalPrice = calculatePrice(products);

In einem korrekt konfigurierten Projekt aktualisiert Visual Studio Code auch alle weiteren Verweise auf diese Variable.

Das ist ein einfaches Beispiel für Refactoring. In vielen Fällen ist diese Methode sicherer als das manuelle Bearbeiten jedes einzelnen Vorkommens.

Nach größeren Änderungen solltest du trotzdem deine Tests, die Typprüfung und das Linting ausführen.

10. Das gesamte Dokument formatieren

Windows/Linux: Shift + Alt + F
macOS: Shift + Option + F

Eine einheitliche Formatierung verbessert die Lesbarkeit des Codes und erleichtert die Zusammenarbeit im Team.

Mit Shift + Alt + F formatierst du das aktuell geöffnete Dokument.

Abhängig von der verwendeten Sprache und der Projektkonfiguration nutzt Visual Studio Code entweder einen integrierten Formatter oder eine installierte Erweiterung wie Prettier.

Die Formatierung kann unter anderem folgende Bereiche verbessern:

• Einrückungen,
• Abstände,
• Positionierung von Klammern,
• Umbruch langer Zeilen,
• Struktur von Objekten,
• Lesbarkeit von JSON-Dateien,
• Formatierung von HTML und CSS.

Ein schlecht formatiertes Objekt könnte zum Beispiel so aussehen:

const user={name:"Adam",email:"adam@example.com",active:true};

Nach der Formatierung kann daraus Folgendes werden:

const user = {
  name: "Adam",
  email: "adam@example.com",
  active: true,
};

In Teamprojekten ist es sinnvoll, gemeinsame Formatierungsregeln festzulegen und die entsprechende Konfiguration im Repository zu speichern.

Dadurch sieht der Code unabhängig davon, wer ihn bearbeitet hat, einheitlich aus.

Du kannst außerdem die automatische Formatierung beim Speichern einer Datei aktivieren. Die entsprechende Einstellung heißt Format On Save.

Dadurch lassen sich unnötige Unterschiede in der Versionskontrolle reduzieren und ein konsistenter Code-Stil leichter beibehalten.

Wie kannst du alle Visual-Studio-Code-Shortcuts anzeigen?

Visual Studio Code besitzt eine eigene Übersicht mit allen konfigurierten Tastenkombinationen.

Du kannst sie mit folgender Kombination öffnen:

Windows/Linux: Ctrl + K, danach Ctrl + S
macOS: Command + K, danach Command + S

Die Tastenkombinationen werden nacheinander ausgeführt. Zuerst drückst du die erste Kombination und anschließend die zweite.

In der Übersicht Keyboard Shortcuts kannst du:

• verfügbare Befehle suchen,
• zugewiesene Tastenkombinationen anzeigen,
• vorhandene Shortcuts ändern,
• Tastenzuweisungen entfernen,
• eigene Shortcuts hinzufügen,
• Konflikte zwischen Tastenkombinationen erkennen.

Beachte, dass einige Shortcuts abhängig vom Betriebssystem, Tastaturlayout, den Editor-Einstellungen und installierten Erweiterungen unterschiedlich funktionieren können.

Wenn eine Tastenkombination nicht funktioniert, öffnest du am besten die Shortcut-Übersicht, suchst nach dem Namen des Befehls und überprüfst die aktuell zugewiesene Kombination.

Lohnt es sich, Tastenkombinationen zu lernen?

Tastenkombinationen sorgen nicht automatisch dafür, dass dein Code besser wird oder weniger Fehler enthält. Sie können jedoch viele wiederkehrende Aufgaben deutlich beschleunigen.

Der größte Vorteil besteht nicht darin, bei einer einzelnen Aktion ein oder zwei Sekunden zu sparen. Wichtiger ist, dass du deine Hände seltener von der Tastatur nehmen und weniger häufig nach Funktionen in der Oberfläche suchen musst.

Mit Shortcuts kannst du schneller:

• zwischen Dateien wechseln,
• Code finden,
• Befehle ausführen,
• Implementierungen überprüfen,
• Symbole sicher umbenennen,
• Code formatieren,
• das Terminal bedienen.

Versuche nicht, alle Tastenkombinationen an einem einzigen Tag auswendig zu lernen.

Wähle zunächst zwei oder drei Shortcuts aus und verwende sie bewusst über mehrere Tage hinweg. Sobald sie zu einem natürlichen Teil deiner Arbeit geworden sind, kannst du weitere Tastenkombinationen ergänzen.

Ein guter Einstieg sind:

• Ctrl + P zum Öffnen von Dateien,
• Ctrl + Shift + P zum Ausführen von Befehlen,
• Ctrl + Shift + F zum Durchsuchen des gesamten Projekts,
• `Ctrl + `` zum Öffnen des Terminals.

Bereits diese vier Tastenkombinationen können deine Arbeit mit Visual Studio Code spürbar verbessern.

Zusammenfassung

Visual Studio Code bietet Hunderte Befehle und Tastenkombinationen. Du musst jedoch nicht alle davon kennen.

Wichtig ist vor allem, die Shortcuts für Aufgaben zu lernen, die du jeden Tag ausführst.

Das schnelle Öffnen von Dateien, die Suche im gesamten Projekt, die Nutzung des Terminals, das Umbenennen von Symbolen und das Formatieren von Code gehören zu den Tätigkeiten, die in fast jedem Softwareprojekt vorkommen.

Führe neue Tastenkombinationen schrittweise in deinen Arbeitsalltag ein.

Am Anfang wirst du möglicherweise noch nachsehen müssen, welche Tasten du drücken sollst. Nach einiger Zeit wirst du die Shortcuts jedoch ganz automatisch verwenden.

Ab diesem Moment ist Visual Studio Code nicht mehr nur ein einfacher Code-Editor, sondern eine deutlich schnellere und komfortablere Arbeitsumgebung.