VS Code mit GitHub nutzen: So starten Sie mit Versionierung

Die Kombination aus Visual Studio Code (VS Code) und GitHub bietet Entwicklern eine leistungsstarke Umgebung, um Code zu verwalten, Änderungen nachzuverfolgen und mit Teams zusammenzuarbeiten – alles ohne zwischen verschiedenen Tools wechseln zu müssen. Doch wie nutzt man diese Tools effektiv? In dieser Anleitung erfahren Sie, wie Sie ein Repository initialisieren, Branches erstellen und Änderungen verwalten – direkt in VS Code.

Warum VS Code und Git die perfekte Kombination sind

VS Code ist ein kostenloser, vielseitiger Quellcode-Editor von Microsoft, der sich nahtlos in Git und GitHub integriert. Diese Integration reduziert nicht nur den Wechsel zwischen verschiedenen Anwendungen, sondern beschleunigt auch Ihren Arbeitsablauf spürbar. Mit nur wenigen Klicks können Sie:

• Ein neues Repository erstellen,
• Branches verwalten,
• Änderungen vornehmen und diese direkt in GitHub hochladen.

Der größte Vorteil: Sie bleiben während des gesamten Prozesses in einer einzigen Umgebung – dem Editor. So sparen Sie Zeit und vermeiden Fehler durch manuelle Kopieraktionen oder Kontextwechsel.

Ein Repository in VS Code initialisieren

Bevor Sie mit der Versionierung beginnen, benötigen Sie zwei Voraussetzungen: Git und VS Code. Installieren Sie beide Tools, falls noch nicht geschehen.

Schritt-für-Schritt-Anleitung

1. Öffnen Sie VS Code und wählen Sie im linken Menü das Explorer-Symbol (zwei übereinanderliegende Datei-Symbole).

1. Klicken Sie auf Ordner öffnen und wählen Sie den Ordner aus, der den Code enthält, den Sie hochladen möchten.

1. Wechseln Sie zum Source Control-Bereich (drittes Symbol von oben).

1. Klicken Sie auf Repository initialisieren. VS Code erstellt nun ein lokales Git-Repository in Ihrem Ordner.

Nach der Initialisierung erscheint im linken unteren Bereich der Name des aktuellen Branches – standardmäßig main. Um den Branch umzubenennen:

• Öffnen Sie die Befehlspalette mit Strg+Shift+P (Windows/Linux) oder Cmd+Shift+P (Mac).
• Geben Sie „Branch umbenennen“ ein und wählen Sie den Befehl Git: Branch umbenennen aus.
• Geben Sie den neuen Namen ein und bestätigen Sie mit Enter.

Änderungen nachverfolgen und vorbereiten

Neue oder geänderte Dateien werden im Source Control-Bereich unter ÄNDERUNGEN angezeigt. Jede Datei erhält ein Symbol:

• U („Untracked“) – Die Datei ist neu oder wurde geändert, ist aber noch nicht für das Repository vorgesehen.
• A („Added“) – Die Datei wurde dem Repository hinzugefügt und ist zur Übernahme bereit.

Um eine einzelne Datei zum Staging-Bereich hinzuzufügen, klicken Sie auf das +-Symbol neben dem Dateinamen. Für alle Änderungen gleichzeitig verwenden Sie das + neben ÄNDERUNGEN.

Branches erstellen und Änderungen hochladen

Branches ermöglichen es Ihnen, neue Funktionen oder Fehlerbehebungen isoliert zu entwickeln, ohne den Hauptcode zu beeinflussen. So erstellen Sie einen neuen Branch:

1. Öffnen Sie die Befehlspalette erneut (Strg+Shift+P / Cmd+Shift+P).
2. Geben Sie „Branch erstellen“ ein und wählen Sie Git: Branch erstellen.
3. Geben Sie einen aussagekräftigen Namen ein, z. B. feature-neue-login-seite, und bestätigen Sie mit Enter.

VS Code wechselt automatisch zu diesem Branch. Sie erkennen dies am Branch-Namen in der linken unteren Ecke.

Änderungen committen und pushen

Um Ihre Änderungen zu speichern und in GitHub hochzuladen:

1. Geben Sie im Source Control-Bereich eine aussagekräftige Commit-Nachricht ein. Optional können Sie mit dem Copilot-Icon eine automatische Nachricht generieren lassen.
2. Klicken Sie auf Commit, um die Änderungen lokal zu speichern.
3. Um die Änderungen in Ihr GitHub-Repository zu übertragen, klicken Sie auf das Push-Symbol (Pfeil nach oben) im Source Control-Bereich.

Damit sind Ihre Änderungen sicher in GitHub gespeichert – und Sie können direkt mit der nächsten Aufgabe weitermachen.

Praktische Tipps für den Einstieg

• Regelmäßige Commits: Speichern Sie Ihre Arbeit häufig mit kurzen, präzisen Commit-Nachrichten. Das erleichtert später das Nachverfolgen von Änderungen.
• Branches strategisch nutzen: Arbeiten Sie immer in separaten Branches, um Konflikte im Hauptcode zu vermeiden.
• Visualisierung der Änderungen: Nutzen Sie die farbigen Markierungen im Editor-Gutter (grün für neue Zeilen, blau für geänderte Zeilen, rot für gelöschte Zeilen), um Änderungen sofort zu erkennen.

Die Integration von Git und GitHub in VS Code macht die Versionsverwaltung intuitiv und effizient. Mit diesen Grundlagen sind Sie bestens gerüstet, um Ihre Projekte professionell zu organisieren – und behalten dabei stets die volle Kontrolle über Ihren Code.

Möchten Sie mehr über fortgeschrittene Git-Funktionen oder die Zusammenarbeit im Team erfahren? Bleiben Sie dran für unsere nächsten Anleitungen.