onlinewachsen.de

VS Code

Texteditoren gibt es viele. VS Code hat sich in weniger als einem Jahrzehnt zum meistgenutzten Code-Editor der Welt entwickelt. Kostenlos, erweiterbar und für jede Sprache und jedes Framework geeignet.

Definition
Visual Studio Code (kurz: VS Code) ist ein kostenloser, quelloffener Code-Editor von Microsoft, der 2015 veröffentlicht wurde. Er vereint die Leichtigkeit eines Texteditors mit Funktionen einer vollwertigen Entwicklungsumgebung – darunter IntelliSense, integriertes Terminal, Git-Integration, Debugging und ein umfangreiches Erweiterungssystem. VS Code ist heute der mit Abstand meistgenutzte Editor in der Webentwicklung.

Die wichtigsten eingebauten Funktionen

AI
IntelliSense
Intelligente Code-Vervollständigung, die Funktionen, Variablen, Parameter und Importe vorschlägt – kontextbasiert und sprachübergreifend. Besonders stark bei JavaScript, TypeScript und Python.
Git
Git-Integration
Änderungen committen, Branches wechseln, Diffs einsehen und Merge-Konflikte lösen – direkt im Editor, ohne die Kommandozeile zu verlassen.
Term
Integriertes Terminal
Ein vollwertiges Terminal direkt im Editor-Fenster. npm-Befehle, Git, Deployment-Skripte – alles ohne Fensterwechsel. Mehrere Terminals parallel möglich.
Debug
Debugger
Breakpoints setzen, Variablen beobachten und Code Schritt für Schritt durchlaufen – für Node.js, Browser-JavaScript, Python und viele weitere Laufzeiten direkt eingebaut.
Ref
Refactoring-Tools
Variablen und Funktionen projektübergreifend umbenennen, Importe automatisch ergänzen, Code extrahieren und strukturieren – ohne manuelle Suche und Ersetzung.
Live
Live Share
Echtzeit-Kollaboration direkt im Editor – mehrere Entwickler arbeiten gleichzeitig an derselben Datei, sehen Cursorbewegungen und können gemeinsam debuggen.

Erweiterungen – der eigentliche Vorteil

VS Code ist in der Grundinstallation bereits mächtig. Sein eigentlicher Stärke liegt im Erweiterungssystem: Über den integrierten Marketplace stehen mehr als 50.000 Extensions zur Verfügung – für jede Sprache, jedes Framework und jeden Workflow.

Unverzichtbar
Prettier

Automatische Code-Formatierung beim Speichern. Einheitlicher Code-Stil im gesamten Team – ohne manuelle Anpassungen und endlose Style-Diskussionen.

Unverzichtbar
ESLint

Statische Code-Analyse, die potenzielle Fehler und Style-Verstöße in Echtzeit markiert. Unerlässlich für JavaScript- und TypeScript-Projekte.

Empfohlen
GitLens

Erweitert die Git-Integration erheblich: Wer hat diese Zeile wann geändert? Vollständige Commit-Historie direkt im Code, Blame-Annotationen und Branch-Vergleiche.

Empfohlen
Tailwind CSS IntelliSense

Autovervollständigung für Tailwind-Klassen, Vorschau der generierten CSS-Werte beim Hover und Markierung ungültiger Klassen – ein Pflicht-Plugin für Tailwind-Projekte.

Empfohlen
GitHub Copilot

KI-gestützte Code-Vervollständigung direkt im Editor. Schlägt ganze Funktionen, Kommentare und Tests vor – kostenpflichtig, aber ein erheblicher Produktivitätshebel.

Empfohlen
Thunder Client

HTTP-Client direkt in VS Code – API-Endpoints testen ohne separates Tool wie Postman. Ideal für schnelle Tests während der Backend-Entwicklung.

Tipp

Extensions lassen sich als Workspace-Empfehlungen in einer .vscode/extensions.json-Datei hinterlegen. Öffnet ein neues Teammitglied das Projekt, schlägt VS Code automatisch die Installation dieser Extensions vor – konsistente Entwicklungsumgebung im gesamten Team ohne Absprache.

Die wichtigsten Tastenkürzel

VS Code ist auf Tastaturnutzung optimiert. Wer die wichtigsten Shortcuts kennt, arbeitet deutlich schneller:

AktionMacWindows / Linux
Command Palette⌘ + Shift + PCtrl + Shift + P
Datei suchen⌘ + PCtrl + P
Im Projekt suchen⌘ + Shift + FCtrl + Shift + F
Terminal öffnen⌘ + JCtrl + J
Zeile verschiebenAlt + ↑ / ↓Alt + ↑ / ↓
Zeile duplizieren⌥ + Shift + ↓Alt + Shift + ↓
Multicursor hinzufügen⌥ + KlickAlt + Klick
Umbenennen (projektübergreifend)F2F2

Konfiguration und Workspace-Einstellungen

VS Code unterscheidet zwischen globalen Einstellungen und projektspezifischen Workspace-Einstellungen. Letztere werden im Ordner .vscode/ im Projektverzeichnis gespeichert und können ins Git-Repository eingecheckt werden:

  • settings.json
    Projektspezifische Editor-Einstellungen wie Einrückung, Formatierung beim Speichern, Standard-Formatter und sprachspezifische Regeln. Sorgt für konsistente Einstellungen im gesamten Team.
  • extensions.json
    Liste empfohlener Extensions für das Projekt. VS Code schlägt neuen Teammitgliedern automatisch die Installation vor – kein manuelles Weitergeben von Extension-Listen mehr.
  • launch.json
    Debug-Konfigurationen für das Projekt. Einmal aufgesetzt, kann jedes Teammitglied mit einem Klick die Debugging-Session starten – ohne eigene Konfiguration.
  • tasks.json
    Automatisierbare Aufgaben wie Build-Prozesse oder Testläufe, die direkt aus VS Code heraus ausgeführt werden können – ohne Kommandozeile.

Häufige Fragen zu VS Code

Was ist der Unterschied zwischen VS Code und Visual Studio?
+

Visual Studio (ohne „Code") ist Microsofts vollwertige integrierte Entwicklungsumgebung (IDE), die primär für .NET-, C++- und Windows-Entwicklung ausgelegt ist. Sie ist deutlich größer, ressourcenintensiver und kostenpflichtig in der Professional- und Enterprise-Edition. VS Code ist ein schlanker, plattformübergreifender Editor, der durch Extensions für nahezu jede Sprache und jedes Framework geeignet ist – und kostenlos bleibt.

Ist VS Code wirklich Open Source?
+

Der Quellcode von VS Code ist auf GitHub unter einer MIT-Lizenz verfügbar. Die offizielle Distribution von Microsoft enthält jedoch proprietäre Komponenten wie Telemetrie und den Marketplace-Zugang. Wer eine vollständig quelloffene Version möchte, kann VSCodium nutzen – einen Community-Build ohne Microsoft-Branding und Telemetrie, aber mit eingeschränktem Zugang zum offiziellen Extension-Marketplace.

Wie viel Arbeitsspeicher benötigt VS Code?
+

VS Code basiert auf Electron und benötigt im Leerlauf etwa 200 bis 400 MB RAM. Mit vielen Extensions, einem großen Projekt und aktivem Language Server können es 1 bis 2 GB werden. Auf modernen Rechnern mit 8 GB RAM ist das kein Problem. Wer auf sehr schwacher Hardware arbeitet, kann Extensions deaktivieren oder auf leichtgewichtigere Alternativen wie Zed oder Neovim ausweichen.

Was ist die Command Palette und warum ist sie so wichtig?
+

Die Command Palette ist das universelle Befehlszentrum von VS Code – erreichbar mit ⌘+Shift+P (Mac) oder Ctrl+Shift+P (Windows). Sie gibt Zugriff auf alle Funktionen des Editors und aller installierten Extensions per Texteingabe. Wer einen Befehl nicht als Shortcut kennt, tippt einfach seinen Namen. Die Command Palette ist der schnellste Weg zu jeder Funktion und macht das Merken von Shortcuts optional.

Gibt es VS Code auch im Browser?
+

Ja. Unter vscode.dev ist eine browserbasierte Version von VS Code zugänglich – ohne Installation, direkt im Browser. GitHub bietet unter github.dev eine noch tiefere Integration: In jedem GitHub-Repository einfach die Punkt-Taste drücken, und das Repository öffnet sich direkt in einer Browser-VS-Code-Instanz. Für vollständige Entwicklungsumgebungen mit Terminal und Node.js-Ausführung eignen sich cloud-basierte Dienste wie GitHub Codespaces.

Abschnitte

onlinewachsen.de