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.
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.
Kostenloses Werkzeug
Mit dem KI-Sichtbarkeits-Check von onlinewachsen.de lässt sich kostenlos und ohne Anmeldung prüfen, ob ChatGPT, Gemini, Claude und Perplexity ein Unternehmen nennen und richtig beschreiben. Eine E-Mail wird nur verschickt, wenn man sie ausdrücklich anfordert.
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:
Aktion
Mac
Windows / Linux
Command Palette
⌘ + Shift + P
Ctrl + Shift + P
Datei suchen
⌘ + P
Ctrl + P
Im Projekt suchen
⌘ + Shift + F
Ctrl + Shift + F
Terminal öffnen
⌘ + J
Ctrl + J
Zeile verschieben
Alt + ↑ / ↓
Alt + ↑ / ↓
Zeile duplizieren
⌥ + Shift + ↓
Alt + Shift + ↓
Multicursor hinzufügen
⌥ + Klick
Alt + Klick
Umbenennen (projektübergreifend)
F2
F2
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.
Verwandte Begriffe
HTMLHTML (HyperText Markup Language) ist eine Auszeichnungssprache zur Strukturierung von Webinhalten.
ReactReact ist eine Open-Source-JavaScript-Bibliothek zur Entwicklung von Benutzeroberflächen, die 2013 von Meta veröffentlicht wurde.
Next.jsNext.js ist ein Open-Source-Framework für React, das von Vercel entwickelt wird.
VercelVercel ist eine Cloud-Plattform für das Hosting und Deployment von Frontend-Anwendungen und serverlosen Funktionen.
Wir verwenden Cookies, um Ihr Nutzungserlebnis auf unserer Website zu verbessern. Durch die Nutzung unserer Website erklären Sie sich mit der Verwendung von Cookies einverstanden.
Cooke Präferenzen
Verwalten Sie Ihre Cookie-Einstellungen unten:
Essential cookies enable basic functions and are necessary for the proper function of the website.
Name
Description
Duration
Cookie Preferences
This cookie is used to store the user's cookie consent preferences.
30 days
Statistics cookies collect information anonymously. This information helps us understand how visitors use our website.
Google Analytics is a powerful tool that tracks and analyzes website traffic for informed marketing decisions.
Wird verwendet, um den Sitzungsstatus des Benutzers zu erhalten.
2 Jahre
_ga
Wird verwendet, um eindeutige Benutzer zu unterscheiden.
2 Jahre
Analyse-Tool von Microsoft, das aufzeichnet, wie Nutzer mit der Website interagieren (z. B. Klicks, Scroll-Bewegungen), um die Benutzerfreundlichkeit zu analysieren und zu verbessern.
In 2 Minuten erfährst du, ob und wie KI-Modelle über deine Marke sprechen.
„5 Sterne sind absolut verdient!Von der ersten Idee bis zur fertigen Website hat alles gepasst. Das Team arbeitet kreativ, modern und mit einem richtig guten Gespür für Design und Markenauftritt. Unsere Website für Running Late ist jung, frisch und genau so geworden, wie wir sie uns vorgestellt haben.Besonders überzeugt hat uns die schnelle Kommunikation, die Zuverlässigkeit und die Fähigkeit, eigene Ideen einzubringen und gleichzeitig unsere Wünsche perfekt umzusetzen.Wer eine Webagentur sucht, die nicht nur schöne Webseiten gestaltet, sondern auch mitdenkt und individuelle Lösungen entwickelt, ist hier genau richtig. Vielen Dank für die tolle Zusammenarbeit. Wir freuen uns schon auf die nächsten gemeinsamen Projekte!“
„Absolut kompetente und kreative Jungs bei onlinewachsen.de. So eine reibungslose und gleichzeitig kreative Zusammenarbeit erlebt man wirklich selten. Man merkt sofort, dass hier Profis am Werk sind, die ihr Handwerk verstehen und mitdenken. Würde ich jederzeit wieder machen und kann ich ohne Einschränkung weiterempfehlen. 10/10 – besser geht's wirklich nicht.“
„Alles sehr zufrieden stellend, kompetent, höflich und korrekt. Macht Freude mit Euch zusammen zu arbeiten. Erlebt man heute leider nicht alle Tage. Weiter so 👍 👍👍👍👍“
„Das Team von onlinewachsen.de hat uns bei der Neugestaltung unserer Website geholfen. Dabei sind wir von Anfang an abgeholt, kompetent beraten und in jeden Gestaltungsprozess eingebunden worden. Darüber hinaus betreut uns das Team nun weiter für die Optimierung der Website, Seo und Geo. Wir sind dankbar für die einwandfreie Zusammenarbeit und empfehlen das Team gerne jederzeit weiter.“
„Wir wurden durch Kreativitat, Herzblut und Professionalität überzeugt. Alle Vorschläge wurden wie besprochen umgesetzt, und das Ergebnis ist genau so geworden, wie wir es uns vorgestellt haben, sogar noch besser! Ein junges, engagiertes Team mit Vision. Klare Empfehlung und ein großes Dankeschön!“
„Sehr gute Beratung, kompetent und wissen wovon sie sprechen. Engagiertes Team die im Sinne des Kunden planen, entwickeln und bestrebt sind für ihre Kunden das Beste herauszuholen.“
„Habe die Seite zu meiner Social-Media Agentur bei ihnen machen lassen, junges dynamisches Team, mit direkten Lösungsvorschlägen. Für jemanden wie mich, der sich noch nie richtig mit Web-Design auseinander gesetzt hat, einfach eine Erleichterung. Preis sowie Vorgehen sehr verständlich erläutert. Danke“
