VS-Code-Erweiterungen: unverzichtbar für Entwickler

Die richtigen VS-Code-Erweiterungen machen aus dem Editor mehr als ein reines Textwerkzeug: eine vollwertige Entwicklungsumgebung, die im Mittelpunkt der täglichen Arbeit steht. Seit Jahren nehme ich dasselbe Setup mit, während ich zwischen Web-, Gameserver- und Bot-Projekten wechsle; in diesem Artikel stelle ich die Erweiterungen vor, die ich wirklich nutze, die die Produktivität spürbar steigern, und warum sie ihren Platz verdienen. Das Ziel ist keine lange Liste, sondern zu zeigen, wo jede in einem echten Arbeitsablauf hingehört.

Zuerst die Grundlagen: den Editor mühelos machen

Manche Erweiterungen fallen nie auf, erleichtern aber jede Datei, die du öffnest. Diese installiere ich als Erstes, wenn ich in ein Projekt einsteige:

• EditorConfig for VS Code — Hat das Repo eine .editorconfig-Datei, wendet es Einrückung, Zeilenenden und Zeichenkodierung automatisch an. Der günstigste Weg, das ganze Team im selben Stil schreiben zu lassen.
• Path Intellisense — Vervollständigt die Ordnerstruktur, während du import-Anweisungen und Dateipfade tippst, und beendet die durch falsche Pfade verlorenen Minuten.
• Code Spell Checker — Findet Tippfehler in Variablennamen und Kommentaren. receive statt recieve zu schreiben rettet, wenn du später danach greppst.

Formatierung und Linting: das Duo, das die Debatte beendet

Den Codestil von Hand konsistent zu halten ist verschwendete Energie. Um diese Aufgabe an Werkzeuge abzugeben, sind die VS-Code-Erweiterungen, denen ich am meisten vertraue, Prettier und ESLint:

• Prettier — Formatiert deinen Code beim Speichern nach eigenen Regeln neu. Es nimmt Einrückung, Anführungszeichen und Semikolons vollständig vom Tisch.
• ESLint — Meldet beim Tippen echte Probleme in JavaScript/TypeScript, etwa ungenutzte Variablen und undefinierte Referenzen. Prettier kümmert sich um das Format, ESLint um die Logik; beide arbeiten zusammen.

Um Prettier beim Speichern automatisch auszuführen, füge ich dies meinen Benutzer- oder Arbeitsbereichseinstellungen hinzu:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

Jetzt wird bei jedem Speichern die Datei formatiert und die von ESLint behebbaren Probleme werden automatisch korrigiert. Möchtest du einen sprachspezifischen Formatter, konfigurierst du ihn pro Dateityp mit Blöcken wie "[python]": { "editor.defaultFormatter": "..." }.

Git verwalten, ohne den Editor zu verlassen

Die integrierte Git-Unterstützung von VS Code ist gut, doch zwei Erweiterungen heben sie auf ein anderes Niveau:

• GitLens — Zeigt neben jeder Zeile, wer sie geändert hat, wann und in welchem Commit (Inline-Blame). Bei der Suche nach der Ursache eines Bugs kannst du Dateiverlauf, Zeilenverlauf und Commit-Details innerhalb des Editors durchstöbern.
• Git Graph — Zeichnet Branches, Merges und den Commit-Baum als visuellen Graphen. Den Zustand vor einem heiklen Rebase oder Merge zu verstehen, geht weit schneller als im Terminal zu lesen.

Diese beiden glänzen in langlebigen Projekten: auf eine Zeile zu schauen und in Sekunden zu beantworten, „warum haben wir es so gemacht", macht aus Code-Archäologie echte Arbeit.

Entwicklung aus der Ferne und im Container

Wenn ein großer Teil der Arbeit nicht auf deinem lokalen Rechner stattfindet, sondern auf einem VPS oder in einem Docker-Container, wird Microsofts Remote-Familie unverzichtbar:

• Remote - SSH — Verbinde dich per SSH mit einem entfernten Server und bearbeite Dateien, als wären sie lokal; Erweiterungen und Terminal laufen auf der entfernten Maschine. Einen Gameserver oder ein Laravel-Setup direkt auf dem VPS zu bearbeiten erspart das Kopieren von Dateien zwischen lokal und entfernt.
• Dev Containers — Öffnet das Projekt in einem Container auf Basis einer devcontainer.json-Definition. Das ganze Team arbeitet mit derselben PHP/Node-Version und denselben Systemabhängigkeiten, was „bei mir lief es"-Probleme weitgehend beendet.
• WSL — Verbindet sich direkt mit Dateien im Linux-Subsystem unter Windows. Alle drei Erweiterungen teilen sich dasselbe „Remote Explorer"-Modell.

Sprach- und Framework-spezifische Unterstützung

Zusätzlich zu den allgemeinen Erweiterungen ist es sinnvoll, je nach Stack einige gezielte hinzuzufügen. Die, zu denen ich oft greife:

• PHP Intelephense — Bietet schnelle Autovervollständigung, Typhinweise und „Gehe zu Definition" in Laravel- und reinen PHP-Projekten.
• Tailwind CSS IntelliSense — Vervollständigt Tailwind-Klassennamen und zeigt beim Überfahren das generierte CSS.
• Docker — Bietet Syntax, Autovervollständigung und Containerverwaltung für Dockerfile- und compose-Dateien.

Das Prinzip hier: das Grund-Setup leicht halten und die Spracherweiterungen hinzufügen, die dem aktuellen Projekt echten Mehrwert bringen. Zu viele sich überschneidende Erweiterungen können den Editor verlangsamen, und zwei Formatter, die dasselbe tun, können in Konflikt geraten.

Das Setup portabel halten

Um deine Erweiterungen einmal auszuwählen, statt sie auf jedem Rechner von Hand zu installieren, gibt es zwei Ansätze. Die integrierte Funktion Settings Sync von VS Code synchronisiert Erweiterungen, Einstellungen und Tastenkürzel mit einem Konto. Alternativ kannst du projektspezifische Empfehlungen ins Repo legen:

// .vscode/extensions.json
{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "eamodio.gitlens"
  ]
}

Dank dieser Datei sieht jeder, der das Projekt öffnet, welche Erweiterungen empfohlen werden, und kann sie mit einem Klick installieren. Für die Teamkonsistenz ist das stärker als Settings Sync, denn die Empfehlung hängt am Projekt, nicht an der Person.

Häufige Fragen

Verlangsamen zu viele Erweiterungen VS Code?

Ja, besonders solche, die bei jedem Start aktiviert werden und im Hintergrund Dateien scannen, können den Start verlangsamen. Der Befehl Developer: Startup Performance zeigt, wie viel Zeit jede Erweiterung verbraucht, sodass du ungenutzte in bestimmten Arbeitsbereichen deaktivieren kannst.

Geraten Prettier und ESLint in Konflikt?

Nicht bei korrekter Konfiguration. Wenn du die formatierungsbezogenen Regeln von ESLint deaktivierst und das Formatieren Prettier überlässt, arbeiten beide sauber zusammen; das Paket eslint-config-prettier existiert genau dafür, diesen Konflikt zu verhindern.

Sollte ich Erweiterungen pro Arbeitsbereich oder global installieren?

Halte allgemeine Werkzeuge (GitLens, Prettier) global; aktiviere Spracherweiterungen, die nur in bestimmten Projekten sinnvoll sind, im jeweiligen Arbeitsbereich. So trägt der Editor in jedem Projekt nur so viel Last, wie du brauchst.

Willst du deinen eigenen Entwicklungsworkflow beschleunigen? Ich helfe dir, eine konsistente Toolchain und einen sauberen Arbeitsablauf für ein Web-, Server- oder Automatisierungsprojekt aufzubauen — nimm Kontakt auf.