Visual Studio Code – kurz VS Code – hat sich in wenigen Jahren zum meistgenutzten Code-Editor der Welt entwickelt. Laut der jährlichen Stack Overflow Developer Survey nutzen über 70 Prozent der Entwickler VS Code als primäres Werkzeug. Kein Wunder: Der Editor von Microsoft ist kostenlos, Open Source, blitzschnell und durch ein riesiges Ökosystem an Erweiterungen nahezu unbegrenzt anpassbar. Dieser Leitfaden führt durch Installation, wichtige Extensions und die nützlichsten Funktionen.
Installation: In wenigen Minuten startklar
VS Code lässt sich von der offiziellen Website code.visualstudio.com für Windows, macOS und Linux herunterladen. Der Installer ist unkompliziert – einfach herunterladen, ausführen, fertig. Auf Linux-Systemen steht VS Code auch über apt, snap oder flatpak zur Verfügung. Nach dem ersten Start begrüßt einen der Welcome-Tab mit Kurzanleitungen und Theme-Auswahl.
Wer auf mehreren Geräten arbeitet, sollte die Settings Sync-Funktion aktivieren. Damit werden Einstellungen, Extensions, Tastenkürzel und Snippets über den GitHub- oder Microsoft-Account synchronisiert. Einmal eingerichtet, ist jede neue VS-Code-Installation sofort wie die vertraute Umgebung konfiguriert.
Die Oberfläche im Überblick
Die Benutzeroberfläche von VS Code ist klar strukturiert. Links befindet sich die Activity Bar mit Symbolen für Explorer, Suche, Versionskontrolle, Debugging und Extensions. Der breite mittlere Bereich ist der Editor selbst, der mehrere Dateien in Tabs öffnen und im Split-View nebeneinander anzeigen kann. Unten läuft das integrierte Terminal, und ganz unten zeigt die Statusleiste wichtige Informationen wie den aktuellen Git-Branch, Encoding und Zeilennummer.
Die Command Palette (Strg+Umschalt+P bzw. Cmd+Umschalt+P) ist das mächtigste Werkzeug in VS Code. Hier lassen sich alle Befehle per Texteingabe suchen und ausführen – von „Format Document" über „Git: Commit" bis hin zu Extension-spezifischen Aktionen.
Unverzichtbare Extensions für Webentwickler
Der Extension Marketplace bietet Tausende von Erweiterungen. Für Webentwickler gibt es eine Handvoll, die unverzichtbar sind:
Prettier – Code formatter formatiert JavaScript, TypeScript, HTML, CSS und viele weitere Sprachen automatisch nach einheitlichen Regeln. Nach der Installation empfiehlt sich, „Format on Save" in den Einstellungen zu aktivieren: Beim Speichern wird der Code sofort formatiert – kein manuelles Einrücken mehr nötig.
ESLint analysiert JavaScript- und TypeScript-Code in Echtzeit auf Fehler und Stilprobleme. Fehlerhafte Stellen werden direkt im Editor unterstrichen. Kombiniert mit Prettier ergibt sich ein leistungsstarkes Duo aus Formatierung und Qualitätsprüfung.
GitLens erweitert die eingebaute Git-Integration erheblich. Es zeigt direkt neben jeder Codezeile an, wer sie wann und in welchem Commit zuletzt geändert hat (sogenannte „Blame"-Ansicht). Außerdem bietet GitLens detaillierte Commit-Historien, Branch-Vergleiche und visuelle Diff-Ansichten.
Live Server startet einen lokalen Entwicklungsserver mit automatischer Aktualisierung. Eine HTML-Datei öffnen, rechtsklicken, „Open with Live Server" wählen – und der Browser zeigt Änderungen sofort an, ohne manuelles Neuladen. Ideal für statische Websites und schnelle Prototypen.
GitHub Copilot ist ein KI-gestützter Programmierassistent, der auf Basis des Kontexts Codevorschläge macht. Er ergänzt Funktionen, schreibt Boilerplate-Code und beantwortet Fragen direkt im Editor. Copilot ist kostenpflichtig, aber für Studenten und Open-Source-Maintainer oft kostenlos verfügbar.
Wichtige Tastenkürzel im Überblick
| Aktion | Windows / Linux | macOS |
|---|---|---|
| Command Palette öffnen | Strg+Umschalt+P |
Cmd+Umschalt+P |
| Datei schnell öffnen | Strg+P |
Cmd+P |
| Terminal öffnen/schließen | Strg+` |
Ctrl+` |
| Zeile nach oben/unten kopieren | Umschalt+Alt+↑/↓ |
Umschalt+Opt+↑/↓ |
| Zeile nach oben/unten verschieben | Alt+↑/↓ |
Opt+↑/↓ |
| Alle Vorkommen auswählen | Strg+Umschalt+L |
Cmd+Umschalt+L |
| Multi-Cursor hinzufügen | Alt+Klick |
Opt+Klick |
| Datei formatieren | Umschalt+Alt+F |
Umschalt+Opt+F |
| Suchen und Ersetzen | Strg+H |
Cmd+Opt+F |
| Seitenleiste ein-/ausblenden | Strg+B |
Cmd+B |
Die settings.json anpassen
VS Code speichert alle Einstellungen in einer JSON-Datei. Man öffnet sie über Strg+Umschalt+P → „Open User Settings (JSON)". Hier lassen sich alle Optionen direkt bearbeiten. Ein typisches Starter-Setup sieht so aus:
{
"editor.formatOnSave": true,
"editor.tabSize": 2,
"editor.wordWrap": "on",
"editor.minimap.enabled": false,
"editor.fontSize": 14,
"files.autoSave": "onFocusChange",
"terminal.integrated.fontSize": 13,
"prettier.singleQuote": true
}Workspace-spezifische Einstellungen werden in einer .vscode/settings.json-Datei im Projektordner gespeichert und überschreiben die globalen Einstellungen – praktisch für projektspezifische Formatierungsregeln.
Multi-Cursor-Editing: Mehrere Stellen gleichzeitig bearbeiten
Eine der produktivsten Funktionen in VS Code ist das Multi-Cursor-Editing. Mit Alt+Klick (bzw. Opt+Klick auf macOS) setzt man mehrere Cursor gleichzeitig. Alles, was man dann tippt, erscheint an allen Cursor-Positionen. Besonders nützlich: Strg+D wählt das nächste Vorkommen des aktuell markierten Textes aus und fügt einen weiteren Cursor hinzu – ideal zum gleichzeitigen Umbenennen von Variablen.
Das integrierte Terminal
VS Code bringt ein vollwertiges Terminal mit, das sich mit Strg+` öffnen lässt. Es öffnet sich standardmäßig im Wurzelverzeichnis des aktuell geöffneten Projekts. Man kann mehrere Terminal-Instanzen parallel betreiben und zwischen ihnen wechseln – zum Beispiel einen npm-Prozess im Hintergrund laufen lassen und gleichzeitig Git-Befehle ausführen. Das Terminal unterstützt alle gängigen Shells: PowerShell, Bash, Zsh, Fish.
code . im Terminal öffnet man das aktuelle Verzeichnis direkt in VS Code – vorausgesetzt, der Shell-Befehl ist installiert. Dazu einmalig in der Command Palette „Shell Command: Install 'code' command in PATH" ausführen.
Häufig gestellte Fragen
- Ist VS Code dasselbe wie Visual Studio?
- Nein. Visual Studio ist eine vollständige IDE von Microsoft, primär für .NET- und C++-Entwicklung, und ist wesentlich größer und ressourcenhungriger. VS Code ist ein leichtgewichtiger, erweiterbarer Editor, der durch Extensions für fast jede Sprache und jeden Anwendungsfall gerüstet werden kann. Beide Produkte stammen von Microsoft, sind aber konzeptionell unterschiedlich.
- Welches Farbschema eignet sich am besten für lange Arbeitszeiten?
- Das hängt von persönlichen Vorlieben ab. Sehr beliebt sind „One Dark Pro", „Dracula" und das eingebaute „Dark+" (Standard). Für tagsüber eignen sich helle Themes wie „GitHub Light". Das Theme lässt sich jederzeit über
Strg+K Strg+Twechseln und im Marketplace gibt es Tausende weitere Optionen. - Kann ich VS Code für Sprachen außerhalb der Webentwicklung nutzen?
- Absolut. Durch Extensions unterstützt VS Code Python, Java, C/C++, Go, Rust, PHP und viele weitere Sprachen mit Syntaxhervorhebung, Autovervollständigung und Debugger. Es ist daher nicht nur für Webentwickler geeignet, sondern für nahezu jede Programmieraufgabe.
- Wie synchronisiere ich meine Einstellungen zwischen mehreren Rechnern?
- Die eingebaute Settings Sync-Funktion von VS Code synchronisiert Einstellungen, Keybindings, Extensions und Snippets über einen GitHub- oder Microsoft-Account. Einfach in den Einstellungen aktivieren und auf dem zweiten Rechner einloggen – alle Konfigurationen werden automatisch übertragen.