VS Code von Anfang an
Visual Studio Code ist der meistgenutzte Code-Editor der Welt — kostenlos, überall lauffähig und erweiterbar ohne Ende. Dieser Kurs bringt dich vom Download bis zum Debuggen — für Linux, macOS & Windows, umschaltbar oben.
Worum geht's?
Egal ob Webseite, Python-Skript oder KI-Agent-Projekt — fast alles beginnt in einem Editor, und meistens ist das VS Code. In 7 kurzen Stufen lernst du die Oberfläche, die wichtigsten Shortcuts, das integrierte Terminal, Extensions und den Einstieg in Debugging & Git.
Installation und Tastenkürzel unterscheiden sich je nach System — der Plattform-Schalter oben passt den ganzen Kurs an und merkt sich deine Wahl.
⌨ Ein erster Blick
Einmal installiert, öffnet dieser eine Befehl deinen Projektordner in VS Code (funktioniert auf allen drei Systemen):
🗺️ Die 7 Stufen
Was ist VS Code?
Ein kostenloser Code-Editor von Microsoft — schlank wie ein Editor, mächtig wie eine IDE.
1 Editor oder IDE?
Zwei Begriffe, die oft durcheinandergehen:
- Editor — ein Programm zum Schreiben und Bearbeiten von Text und Code (schnell, schlank).
- IDE (Integrated Development Environment) — der volle Werkzeugkasten: Editor plus Debugger, Build-System, Projektverwaltung in einem (groß, mächtig, oft schwerfällig).
VS Code sitzt dazwischen: Es startet als schlanker Editor und wird über Extensions genau zu der IDE, die du brauchst — nicht mehr, nicht weniger.
2 Warum so verbreitet?
3 Installation auf deinem System
Die offizielle Quelle ist immer code.visualstudio.com — der Download-Dialog erkennt dein System automatisch.
Unter Linux lädst du das .deb-Paket (Ubuntu/Debian) oder .rpm-Paket (Fedora/RHEL) herunter und installierst es per Doppelklick oder Paketmanager. Alternativ geht es per Snap:
Unter macOS lädst du die App als .zip herunter, entpackst sie und ziehst Visual Studio Code.app in den Programme-Ordner. Wer Homebrew nutzt:
Unter Windows lädst du den Installer („User Setup", 64-bit) herunter und führst ihn aus — Haken bei „Mit Code öffnen" im Kontextmenü lohnt sich. Alternativ per winget:
4 Der erste Start
- VS Code starten — der Welcome-Tab begrüßt dich mit den häufigsten Aktionen.
- Über File → Open Folder… einen Projektordner öffnen (VS Code denkt in Ordnern, nicht in Einzeldateien).
- Den Befehl
codeim Terminal nutzbar machen: . Danach öffnetcode .den aktuellen Ordner.
code . ist der Befehl, den du täglich tippen wirst — „öffne genau diesen Ordner in VS Code".✓ Geschafft, wenn du …
Orientierung
Fünf Bereiche, die du kennen musst — und eine Tastenkombination, die alles kann.
1 Die Oberfläche im Überblick
So sieht VS Code aus — echter Screenshot eines geöffneten Projektordners:
2 Die fünf Bereiche
Strg/Cmd + B.Strg/Cmd + \ teilst du ihn in Split-Editoren — z. B. zwei Dateien nebeneinander.Strg/Cmd + J.3 Die Command Palette — dein wichtigstes Feature
Merke dir genau eine Tastenkombination:
Die Command Palette ist ein Suchfeld für jede Funktion von VS Code: Einstellungen ändern, Dateien formatieren, Tasks starten, Extension-Befehle — jede Funktion ist darüber erreichbar, auch die, für die es keinen Shortcut gibt.
✓ Geschafft, wenn du …
Dateien & Projekte
VS Code denkt in Ordnern — und findet alles in Sekunden.
1 Ordner als Workspace öffnen
Du öffnest in VS Code kein „Projekt" mit Projektdatei, sondern schlicht einen Ordner. Der Ordner ist dein Workspace.
- File → Open Folder… — oder im Terminal
code mein-projekt. - Der Explorer links zeigt den kompletten Dateibaum; neue Dateien/Ordner legst du per Rechtsklick oder den kleinen Icons im Explorer an.
- Einstellungen, Extensions-Empfehlungen und Debug-Konfigurationen kann VS Code pro Ordner speichern (im Unterordner
.vscode/).
2 Dateien blitzschnell öffnen: Quick Open
Nie wieder durch den Dateibaum klicken:
Quick Open listet zuletzt geöffnete Dateien und findet jede Datei im Workspace, während du tippst — auch mit Tippfehlern und nur mit Teilen des Namens (appjs findet app.js).
>. Tippst du in der Palette das > weg, bist du bei der Dateisuche — und umgekehrt.3 Suchen & Ersetzen
- In der aktuellen Datei: — Ersetzen mit .
- Projektweit: öffnet die Suche in der Side Bar — über alle Dateien des Ordners, mit Ersetzen-Funktion und Dateifiltern (z. B. nur
*.css).
.*-Symbol reguläre Ausdrücke — damit suchst du Muster statt festem Text, z. B. href="[^"]*" für alle Links. Mächtig, aber mit Vorsicht beim Ersetzen: VS Code zeigt vorher eine Vorschau aller Treffer.✓ Geschafft, wenn du …
Editing-Produktivität
Die Handgriffe, die Profis vom Tippen unterscheiden.
1 Multi-Cursor & Zeilen-Tricks
Mehrere Cursor gleichzeitig — du editierst zehn Stellen in einem Zug:
- Cursor hinzufügen:
Alt + Klicksetzt an jeder Klickstelle einen weiteren Cursor; fügt einen Cursor in der Zeile darunter hinzu. - Zeile verschieben:
Alt + ↑/↓— kein Ausschneiden und Einfügen nötig. - Zeile duplizieren: .
- Zeile kommentieren: — funktioniert auch mit markiertem Block und in jeder Sprache mit der richtigen Kommentar-Syntax.
2 IntelliSense & Emmet
IntelliSense schlägt beim Tippen passende Funktionen, Variablen und Eigenschaften vor — inklusive Doku-Schnipsel. Einfach weitertippen und mit Tab oder Enter übernehmen.
Emmet ist in HTML/CSS eingebaut: Du tippst eine Abkürzung, drückst Tab, und VS Code expandiert sie zu fertigem Markup:
3 Formatieren
rückt die ganze Datei sauber ein und formatiert sie. Tippst du regelmäßig Code, aktiviere in den Einstellungen Format On Save — dann passiert es bei jedem Speichern automatisch.
4 Die 10 wichtigsten Shortcuts
| Aktion | Linux / Windows | macOS |
|---|---|---|
| Command Palette | Strg + Umschalt + P | Cmd + Umschalt + P |
| Quick Open (Datei öffnen) | Strg + P | Cmd + P |
| Projektweit suchen | Strg + Umschalt + F | Cmd + Umschalt + F |
| Cursor darunter hinzufügen | Strg + Alt + ↓ | Cmd + Option + ↓ |
| Zeile verschieben | Alt + ↑/↓ | Option + ↑/↓ |
| Zeile duplizieren | Umschalt + Alt + ↓ | Umschalt + Option + ↓ |
| Zeile kommentieren | Strg + / | Cmd + / |
| Datei formatieren | Umschalt + Alt + F | Umschalt + Option + F |
| Terminal ein-/ausblenden | Strg + ` | Ctrl + ` |
| Einstellungen | Strg + , | Cmd + , |
Strg/Cmd + K, dann Strg/Cmd + S) öffnet die durchsuchbare Tastenkürzel-Liste. Offizielle Doku: code.visualstudio.com/docs.✓ Geschafft, wenn du …
Integriertes Terminal & Tasks
Die Kommandozeile wohnt direkt im Editor — ein Fenster weniger, ein Kontextwechsel weniger.
1 Terminal öffnen
Tastenkürzel oder Menü Terminal → New Terminal.
Das integrierte Terminal öffnet sich im Panel unten und startet automatisch im Ordner deines Workspaces — du bist sofort am richtigen Ort.
2 Splitten & Standard-Shell
- Mehrere Terminals: Das
+-Symbol im Panel öffnet weitere; das Split-Symbol teilt das Terminal nebeneinander — z. B. links ein Server, rechts Befehle. - Standard-Shell wählen: Command Palette → „Terminal: Select Default Profile" — .
src/app.js:12 springt direkt an die Fehlerstelle. Und Server-URLs (localhost) öffnen sich per Klick im Browser.3 Tasks — wiederkehrende Befehle automatisieren
Über Terminal → Run Task… startest du vordefinierte Aufgaben wie Build, Tests oder Linter. VS Code erkennt viele Tasks automatisch (z. B. npm run build aus einem package.json); eigene Tasks legst du in .vscode/tasks.json ab. Fürs Erste reicht: Tasks existieren — ran, wenn du das erste Mal denselben Befehl zum zehnten Mal tippst.
✓ Geschafft, wenn du …
Extensions & Einstellungen
Hier wird aus dem Editor dein Editor.
1 Der Marketplace
Das Puzzle-Symbol in der Activity Bar () öffnet die Extensions-Ansicht: suchen, auf Install — fertig.
Jede Extension lässt sich genauso leicht deaktivieren (bleibt installiert, tut aber nichts) oder deinstallieren. Viele Extensions bringen eigene Befehle mit, die du über die Command Palette erreichst.
2 Fünf Starter-Empfehlungen
3 Settings UI vs. settings.json
öffnet die Settings UI — ein durchsuchbares Formular mit allen Einstellungen. Dahinter liegt eine Textdatei: settings.json. Über die Command Palette → „Preferences: Open User Settings (JSON)" bearbeitest du sie direkt — praktisch, um Einstellungen aus Anleitungen zu kopieren.
4 Themes & Settings Sync
- Farbtheme: Command Palette → „Preferences: Color Theme" — mit den Pfeiltasten siehst du die Vorschau live, bevor du bestätigst. Weitere Themes kommen als Extensions.
- Settings Sync: Über das Konto-Symbol unten in der Activity Bar meldest du dich mit einem Microsoft- oder GitHub-Konto an — VS Code synchronisiert dann Einstellungen, Extensions und Tastenkürzel zwischen deinen Geräten.
✓ Geschafft, wenn du …
Debugging & Git-Basis
Zwei Profi-Werkzeuge, die in VS Code schon eingebaut sind — hier der Einstieg.
1 Debuggen statt raten
Die Run-and-Debug-Ansicht (Play-Symbol mit Käfer in der Activity Bar) startet dein Programm unter Kontrolle des Debuggers.
- Breakpoint setzen: Klick links neben die Zeilennummer (oder Taste
F9) — ein roter Punkt erscheint. Dort hält das Programm an. - Starten:
F5. Das Programm läuft bis zum Breakpoint; du siehst die aktuellen Werte aller Variablen und gehst Schritt für Schritt weiter. - Weiter/Stoppen: Über die schwebende Debug-Symbolleiste (Weiter, Step Over, Step Into, Stopp).
.vscode/, die VS Code sagt, wie dein Programm gestartet werden soll (welche Datei, welche Argumente, welche Umgebung). VS Code schlägt beim ersten Druck auf F5 meist automatisch eine passende vor.2 Git ohne Terminal: Source Control
Das Source-Control-Panel (drittes Symbol in der Activity Bar, ) zeigt alle Änderungen seit dem letzten Commit.
- Änderungen prüfen: Klick auf eine Datei zeigt den Diff — was genau hat sich geändert?
- Commit: Nachricht eintippen, auf Commit — mit dem
+an der Datei stagest du einzelne Änderungen. - Push/Pull: Über die Sync-Schaltfläche in der Status Bar — gleichzeitig die Anzeige deines Branches.
✓ Geschafft, wenn du …
Quiz
10 Fragen quer durch die Stufen. Ab 8 richtigen Antworten schaltest du dein Zertifikat frei.
Dein Zertifikat
Glückwunsch! Trage deinen Namen ein und drucke das Zertifikat (oder speichere als PDF).