Mit den richtigen VS Code-Shortcuts und -Features sparst du täglich wertvolle Zeit – diese 7 Profi-Tipps zeigen dir, wie du deinen Editor wirklich beherrschst. Von Terminal-Integration bis zu versteckten Tastenkombinationen: Das sind die Tricks, die erfahrene Entwickler täglich nutzen.
VS Code direkt aus dem Terminal öffnen
Wer VS Code immer manuell startet und sich dann durch den Ordner-Dialog klickt, verliert unnötig Zeit. Viel schneller geht es über das Terminal: Navigiere einfach in den Ordner, den du öffnen möchtest, und tippe code . — der Punkt steht für den aktuellen Ordner. VS Code springt sofort auf.
Du kannst auch einen Pfad direkt angeben, wenn du nicht bereits im richtigen Verzeichnis bist. Auf Windows musst du vorher einmalig in VS Code unter der Command Palette den Befehl “Shell Command: Install ‘code’ command in PATH” ausführen, danach klappt es genauso.
HTML schneller schreiben mit Emmet
Emmet ist in VS Code bereits eingebaut und eines der nützlichsten Werkzeuge überhaupt. In einer HTML-Datei tippst du einfach ! und drückst Tab — schon hast du das komplette Grundgerüst.
Das war aber noch nicht alles. Emmet versteht eine Kurzschreibweise für fast alles:
.container+ Tab erzeugt<div class="container"></div>h1#heading+ Tab erzeugt ein H1-Element mit der ID “heading”ul.list>li.listitem*5+ Tab baut dir direkt eine Liste mit fünf Einträgen
Klingt erstmal komisch, aber nach ein paar Minuten Übung schreibst du HTML damit deutlich schneller. Schau dir die Emmet-Dokumentation an, wenn du tiefer einsteigen möchtest.
Color Theme und Icon Theme anpassen
Der Editor soll dir gut gefallen — du sitzt täglich darin. Das Farbschema kannst du mit Strg+Shift+P (bzw. Cmd+Shift+P auf Mac) und dem Befehl “Color Theme” wechseln. Vorinstalliert sind bereits mehrere Varianten, Light Mode inklusive. Wobei: Die meisten Entwickler schwören auf dunkle Themes, aus gutem Grund. Deine Augen werden dir danken.
Ein beliebtes Theme ist Night Owl — du findest es im Extension Marketplace. Einfach links auf das Viereck-Icon klicken, nach “Night Owl” suchen und installieren.
Genauso wichtig sind die Datei-Icons. Das Material Icon Theme macht einen großen Unterschied: Häufige Ordnernamen wie components, config oder templates bekommen automatisch passende Icons. Auch Dateien wie .env oder tailwind.config.js werden sofort erkennbar. Das klingt nach Kleinigkeit, aber wenn du in einem Projekt mit 50 Dateien arbeitest, weißt du es zu schätzen.
Dateien blitzschnell finden mit Strg+P
In größeren Projekten verlierst du schnell den Überblick, wenn du jede Datei manuell in der Seitenleiste suchst. Strg+P (oder Cmd+P) öffnet eine Schnellsuche — einfach den Dateinamen eintippen, Enter drücken, fertig.
Noch ein Bonus: Mit einem Doppelpunkt kannst du direkt zu einer bestimmten Zeile springen. Strg+P, dann :400 eingeben und du landest in Zeile 400. Das ist die gleiche Syntax wie in Vim — wer das kennt, fühlt sich direkt wohl.
Automatisch formatieren beim Speichern mit Prettier
Unordentlicher Code kostet Nerven — besonders wenn mehrere Leute an einem Projekt arbeiten. Prettier löst dieses Problem: Das Plugin formatiert deinen Code automatisch, sobald du speicherst.
Installation: Im Marketplace nach “Prettier - Code formatter” suchen und installieren. Danach in den Einstellungen zweimal anpassen:
- Format on Save aktivieren (Häkchen setzen)
- Default Formatter auf Prettier umstellen
Ab dann gilt: Strg+S drücken und der Code ist sauber. Das funktioniert für HTML, CSS, JavaScript und viele weitere Sprachen. Wenn dein Projekt eine eigene Prettier-Konfigurationsdatei hat, wird diese automatisch verwendet. Ideal für Teams.
Wenn du das alles in der Praxis anwenden willst, lernst du genau solche Workflows im Fullstack Web Developer Kurs von DevKarriere — zusammen mit allem, was Arbeitgeber wirklich von dir erwarten.
Code schnell auskommentieren
Der letzte Tipp ist simpel, spart aber ständig Zeit. Zeilen auskommentieren geht mit Strg+K, C (bzw. Cmd+K, C auf Mac). Rückgängig machen mit Strg+K, U. Das funktioniert für einzelne Zeilen genauso wie für eine Auswahl mehrerer Zeilen.
Das Besondere: VS Code erkennt automatisch die richtige Kommentar-Syntax. In HTML wird <!-- ... --> erzeugt, in JavaScript // und in CSS /* ... */. Du musst dir keine Syntax merken, der Editor macht es für dich.
Häufige Fragen
Funktioniert code . auch auf Windows?
Ja, aber du musst einmalig in VS Code die Option “Shell Command: Install ‘code’ command in PATH” über die Command Palette ausführen. Danach klappt der Befehl im Terminal genauso wie auf Mac oder Linux.
Muss ich für Emmet etwas installieren?
Nein. Emmet ist bereits in VS Code integriert und funktioniert in HTML-Dateien ohne zusätzliche Extension sofort.
Kann ich Prettier auch im Team verwenden?
Ja, und das ist sogar einer der größten Vorteile. Wenn das Projekt eine Prettier-Konfigurationsdatei enthält (z.B. .prettierrc), nutzt die VS Code Extension automatisch diese Einstellungen — so formatiert jeder im Team nach denselben Regeln.