Diese Einführung in Visual Studio Code zeigt dir den Weg vom ersten Start bis zum eigenen kleinen Projekt. Du erfährst, welche Funktionen VS Code schon mitbringt, wann du zusätzliche Werkzeuge brauchst und welche Einstellungen am Anfang wirklich helfen. Die Beispiele funktionieren grundsätzlich unter Windows, macOS und Linux; einzelne Menünamen und Tastenkombinationen können je nach Betriebssystem und Sprache abweichen.
Was ist Visual Studio Code?
Visual Studio Code, kurz VS Code, ist ein kostenloser Code-Editor von Microsoft. Du kannst damit Text- und Codedateien bearbeiten, ganze Projektordner öffnen, Dateien durchsuchen, ein Terminal nutzen und Änderungen mit Git verwalten. Über Erweiterungen kommen Funktionen für weitere Sprachen und Werkzeuge hinzu. VS Code ist nicht dasselbe Produkt wie die umfangreichere Entwicklungsumgebung Visual Studio.
Der Editor allein bringt nicht jede Laufzeitumgebung mit. Um beispielsweise Python-Programme auszuführen, brauchst du eine passende Python-Installation; für ein Node.js-Projekt Node.js. Auch Git muss auf dem Rechner installiert sein, wenn du die Git-Funktionen nutzen willst. So bleibt die Grundinstallation übersichtlich, und du ergänzt nur das, was dein Projekt benötigt.
Visual Studio Code installieren
- Lade die stabile Version über die offizielle VS-Code-Downloadseite für dein Betriebssystem herunter.
- Installiere das Programm mit dem angebotenen Paket. Unter Windows ist die Benutzerinstallation für den Einstieg meist ausreichend. Unter macOS verschiebst du die App aus der heruntergeladenen
.dmg-Datei in den Ordner „Programme“. Für Linux bietet Microsoft unter anderem.deb– und.rpm-Pakete an. - Starte VS Code und öffne über Datei > Ordner öffnen einen Projektordner. In einer englischen Oberfläche heißt der Menüpunkt File > Open Folder.
Die genauen Installationsschritte und Systemanforderungen findest du in der offiziellen Einstiegsanleitung. Für die Grundfunktionen brauchst du kein Konto. Falls du später Einstellungen zwischen Geräten synchronisieren möchtest, kannst du Settings Sync gesondert einrichten.
Einführung in Visual Studio Code: die Oberfläche verstehen
Nach dem Öffnen eines Ordners siehst du links die Aktivitätsleiste. Darüber wechselst du zwischen den wichtigsten Ansichten:
- Explorer: Dateien und Ordner des Projekts anzeigen, erstellen und umbenennen.
- Suche: Begriffe in allen Dateien des geöffneten Ordners finden; bei Bedarf mit regulären Ausdrücken.
- Quellcodeverwaltung: Änderungen in einem Git-Repository ansehen, zum Commit vormerken und committen.
- Ausführen und Debuggen: Programme mit einer passenden Laufzeitumgebung oder Debug-Erweiterung starten und Fehler untersuchen.
- Erweiterungen: zusätzliche Sprachunterstützung, Werkzeuge und Oberflächen installieren.
In der Mitte bearbeitest du Dateien in Tabs. Unten können Terminal, Probleme, Ausgabe und Debug-Konsole erscheinen. Die Statusleiste am unteren Rand zeigt unter anderem Dateityp, Einrückung und Git-Branch an. Du musst dir die gesamte Oberfläche nicht sofort merken: Starte mit Explorer, Editor und Terminal.
Dein erstes Projekt in fünf Minuten
In dieser Einführung in Visual Studio Code genügt für das erste Projekt ein leerer Ordner. Du benötigst weder ein Framework noch eine Erweiterung.
- Erstelle auf deinem Rechner einen Ordner namens
vscode-startund öffne ihn in VS Code. - Lege im Explorer eine Datei namens
index.htmlan. - Füge den folgenden Inhalt ein und speichere mit Strg + S unter Windows/Linux beziehungsweise Cmd + S unter macOS.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mein erstes VS-Code-Projekt</title>
</head>
<body>
<h1>Hallo, VS Code!</h1>
<p>Diese Datei habe ich selbst erstellt.</p>
</body>
</html>
Öffne index.html anschließend im Browser, beispielsweise per Doppelklick im Dateimanager. Ändere die Überschrift, speichere erneut und lade die Browserseite neu. So siehst du unmittelbar den Unterschied zwischen dem Bearbeiten einer Datei und dem Anzeigen des Ergebnisses. Eine Vorschau-Erweiterung ist für dieses Beispiel nicht erforderlich.
Dateien schneller bearbeiten und finden
Für den Alltag reichen zunächst wenige Befehle. Mit Strg + P unter Windows/Linux beziehungsweise Cmd + P unter macOS öffnest du schnell eine Datei nach Namen. Strg + Umschalt + P beziehungsweise Cmd + Umschalt + P öffnet die Befehlspalette. Dort kannst du Funktionen per Namen suchen, statt dich durch Menüs zu klicken.
Die Suche im aktuellen Projekt erreichst du über das Lupensymbol. Achte bei Ersetzungen über mehrere Dateien auf die Trefferliste, bevor du bestätigst. In den Einstellungen kannst du etwa Schriftgröße, automatisches Speichern und Formatierung beim Speichern anpassen. Für Teams sollten gemeinsame Konventionen, zum Beispiel Einrückung und Formatierung, im Projekt festgelegt werden.
Weitere Kombinationen stehen in der Übersicht wichtige VS-Code-Tastenkombinationen. Öffne bei abweichender Tastaturbelegung die Tastenkombinationsübersicht in VS Code und prüfe dort die aktuell gesetzten Kürzel.
Das integrierte Terminal nutzen
Über Terminal > Neues Terminal öffnest du eine Shell direkt im Projektordner. Das Terminal ist praktisch für Befehle deines jeweiligen Projekts, etwa einen Testlauf oder die Installation von Abhängigkeiten. Welche Shell startet, hängt von deinem System und deinen Einstellungen ab.
Wenn der Befehl code auf deinem Systempfad verfügbar ist, kannst du einen Ordner auch aus einem externen Terminal mit code . öffnen. Der Punkt steht für das aktuelle Verzeichnis. Unter macOS muss der Shell-Befehl gegebenenfalls zunächst über die Befehlspalette installiert werden. Gib Terminalbefehle nur ein, wenn du ihre Wirkung verstehst; sie laufen mit den Rechten deines Benutzerkontos.
Git in Visual Studio Code verwenden
Die Quellcodeverwaltung zeigt Änderungen an Dateien, sobald der geöffnete Ordner ein Git-Repository ist und Git installiert wurde. Für ein neues Projekt kannst du in der Quellcodeverwaltung Repository initialisieren wählen. Danach zeigt VS Code geänderte Dateien und ihre Unterschiede an. Du kannst einzelne Änderungen vormerken und mit einer kurzen Beschreibung committen.
Ein Commit speichert einen Stand in deinem lokalen Repository. Erst ein Push überträgt ihn an einen eingerichteten Remote-Dienst. Prüfe vor dem ersten Commit, ob sensible Dateien wie Passwörter, Zugangsschlüssel oder lokale Konfigurationsdateien ausgeschlossen werden müssen. Wenn du die Befehle hinter der Oberfläche verstehen möchtest, hilft die Übersicht der wichtigsten Git-Kommandos.
Debugging und Sprachunterstützung richtig einordnen
Mit Breakpoints hältst du ein laufendes Programm an einer bestimmten Zeile an und prüfst Variablen oder den Aufrufpfad. VS Code stellt dafür eine Oberfläche bereit. Welche Programme sich direkt starten und debuggen lassen, hängt jedoch von Sprache, installierter Laufzeitumgebung und gegebenenfalls Erweiterungen ab. Eine reine HTML-Datei wie im Beispiel oben braucht keinen Debugger.
VS Code erkennt viele Dateitypen und bietet dafür grundlegende Funktionen wie Syntaxhervorhebung. Funktionen wie intelligente Vervollständigung, Fehlerdiagnosen oder Formatierung unterscheiden sich je nach Sprache und installierten Werkzeugen. Wenn eine Funktion fehlt, prüfe zuerst, ob die Datei den richtigen Typ hat und ob die notwendige Laufzeitumgebung vorhanden ist.
Erweiterungen auswählen und sicher installieren
Zur Einführung in Visual Studio Code gehört auch ein bewusster Umgang mit Erweiterungen. Über die Erweiterungsansicht kannst du zusätzliche Funktionen installieren. Wähle Erweiterungen nach einem konkreten Bedarf aus, etwa Unterstützung für eine Programmiersprache oder einen Formatter. Prüfe Herausgeber, Beschreibung, Aktualisierungen und die angeforderten Fähigkeiten. Erweiterungen können Code ausführen und auf Projektdateien zugreifen; eine hohe Installationszahl allein ist kein Sicherheitsnachweis.
Beginne mit wenigen Erweiterungen und entferne ungenutzte wieder. Die Übersicht VS-Code-Erweiterungen nach Anwendungsfall kann dir bei der Auswahl helfen. Gemeinsame Arbeit in Echtzeit ist beispielsweise über eine zusätzliche Live-Share-Erweiterung möglich; sie gehört nicht zu den Grundfunktionen einer frischen VS-Code-Installation.
Workspace Trust: unbekannte Projekte zuerst prüfen
Beim Öffnen eines fremden Projektordners fragt VS Code möglicherweise, ob du dessen Autoren vertraust. Im eingeschränkten Modus kannst du den Code zunächst ansehen, während Funktionen, die automatisch Code ausführen könnten, begrenzt werden. Vertraue dem Ordner erst, wenn du Quelle und Inhalt ausreichend geprüft hast. Das gilt besonders für heruntergeladene Repositories mit Tasks, Startskripten oder projektspezifischen Einstellungen.
Die Schutzfunktion ersetzt keine Prüfung installierter Erweiterungen. Laut VS-Code-Dokumentation zu Workspace Trust können bösartige Erweiterungen den eingeschränkten Modus umgehen. Installiere daher nur Erweiterungen von Herausgebern, denen du vertraust, und halte Editor und Erweiterungen aktuell.
Häufige Fragen zur Einführung in Visual Studio Code
Brauche ich für VS Code ein Microsoft-Konto?
Nein. Editor, Terminal, Quellcodeverwaltung und Erweiterungen lassen sich ohne Anmeldung verwenden. Für optionale Dienste wie die Synchronisierung von Einstellungen oder bestimmte Erweiterungen kann ein Konto erforderlich sein.
Kann VS Code Programme ohne weitere Installation ausführen?
Das hängt vom Projekt ab. Eine HTML-Datei kannst du direkt im Browser ansehen. Für Python-, Java- oder Node.js-Programme brauchst du die jeweilige Laufzeitumgebung und unter Umständen passende Erweiterungen.
Was ist der Unterschied zwischen VS Code und Visual Studio?
VS Code ist ein erweiterbarer Editor für viele Sprachen und Arbeitsabläufe. Visual Studio ist eine eigene Entwicklungsumgebung mit anderen Installationspaketen und integrierten Werkzeugen, besonders für bestimmte .NET- und C++-Projekte.
Fazit
Diese Einführung in Visual Studio Code gibt dir eine einfache Reihenfolge für den Start: installieren, einen Ordner öffnen, eine Datei bearbeiten und das Ergebnis prüfen. Danach kannst du Terminal, Git und Debugging gezielt für dein Projekt nutzen. Installiere Erweiterungen erst, wenn du ihren Zweck kennst, und prüfe fremde Projektordner vor der Freigabe.