Tutorials

Git und GitHub in Visual Studio Code: Die ultimative Schritt-für-Schritt-Anleitung

Melden

Visual Studio Code (VS Code) bietet eine der besten und nahtlosesten Integrationen für Git und GitHub. Du musst die Kommandozeile kaum noch anrühren, um Repositories zu klonen, Änderungen zu committen oder Pull Requests zu erstellen.

In dieser Anleitung lernst du Schritt für Schritt, wie du GitHub perfekt in deinen VS Code Workflow integrierst.

Voraussetzungen

Bevor es losgeht, stelle sicher, dass du Folgendes bereit hast:

  1. VS Code ist auf deinem Computer installiert.
  2. Ein kostenloser GitHub-Account ist erstellt (auf github.com).
  3. Git ist lokal installiert (prüfe dies im Terminal mit dem Befehl git --version. Falls nicht vorhanden, lade es von git-scm.com herunter).

Schritt 1: GitHub-Account mit VS Code verbinden

VS Code macht die Authentifizierung extrem einfach:

  1. Öffne VS Code.
  2. Klicke ganz unten links auf das Zahnrad-Symbol (Einstellungen) oder das Profil-Icon (Konten).
  3. Wähle „Sign in with GitHub“ (Mit GitHub anmelden).
  4. Dein Browser öffnet sich automatisch. Bestätige dort den Zugriff für Visual Studio Code.
  5. Nach erfolgreicher Autorisierung bist du verbunden. Du siehst dein Profilbild nun unten links.

Schritt 2: Ein bestehendes GitHub-Repository klonen (Herunterladen)

Möchtest du an einem Projekt weiterarbeiten, das bereits auf GitHub liegt?

  1. Öffne die Befehlspalette in VS Code mit Strg + Umschalt + P (Windows/Linux) oder Cmd + Shift + P (Mac).
  2. Tippe Git: Clone ein und wähle den Befehl aus.
  3. Klicke auf „Clone from GitHub“.
  4. Wähle das gewünschte Repository aus der Liste aus (oder füge direkt die GitHub-URL ein).
  5. Wähle einen lokalen Ordner auf deinem Computer aus, in dem das Projekt gespeichert werden soll.
  6. Klicke auf „Open“ (Öffnen), sobald der Download abgeschlossen ist.

Schritt 3: Ein neues lokales Projekt auf GitHub veröffentlichen

Hast du bereits Code auf deinem PC, der noch nicht auf GitHub ist?

  1. Öffne deinen Projektordner in VS Code (Datei > Ordner öffnen...).
  2. Klicke in der linken Seitenleiste auf das Quellcodeverwaltung-Symbol (Source Control / das Icon mit den drei Punkten und Linien) oder drücke Strg + Umschalt + G.
  3. Klicke auf den Button „Publish to GitHub“ (Auf GitHub veröffentlichen).
  4. Wähle aus, ob das Repository Public (öffentlich) oder Private (privat) sein soll.
  5. VS Code initialisiert Git, commitet alle Dateien und lädt sie automatisch in dein neues GitHub-Repo hoch.

Schritt 4: Der tägliche Workflow (Stage, Commit & Push)

Sobald dein Repository aufgesetzt ist, arbeitest du nach dem typischen Drei-Schritt-Prinzip:

  1. Änderungen vornehmen: Bearbeite wie gewohnt deine Dateien. VS Code markiert geänderte Dateien im Explorer farblich (gelb = geändert, grün = neu).
  2. Staging:
    • Gehe in das Menü für die Quellcodeverwaltung (Strg + Umschalt + G).
    • Fahre mit der Maus über die geänderten Dateien und klicke auf das +-Symbol (Stage Changes), um sie für den Commit vorzubereiten.
  3. Commit:
    • Gib oben in das Textfeld eine aussagekräftige Nachricht ein (z. B. Fix: Login-Fehler behoben).
    • Klicke auf das Häkchen-Symbol oder den blauen Button „Commit“ (Tastenkürzel: Strg + Enter).
  4. Push (Hochladen):
    • Klicke unten links in der blauen Statusleiste auf das Synchronisierungs-Symbol (Kreispfeile neben dem Branch-Namen) oder auf den Button „Sync Changes“.
    • Deine lokalen Änderungen sind nun live auf GitHub!

Schritt 5: Mit Branches arbeiten

Branches (Zweige) ermöglichen es dir, neue Features zu entwickeln, ohne den Hauptcode (Main/Master) zu gefährden:

  1. Neuen Branch erstellen:
    • Klicke ganz unten links in der Statusleiste auf den aktuellen Branch-Namen (meist main).
    • Wähle oben im Dropdown „+ Create new branch...“ aus.
    • Vergib einen Namen (z. B. feature-darkmode) und drücke Enter.
  2. Branch veröffentlichen:
    • Klicke unten in der Statusleiste auf das Wolken-Symbol mit dem Pfeil (Publish Branch), um diesen Branch auch auf GitHub sichtbar zu machen.
  3. Branch wechseln:
    • Klicke erneut unten links auf den Branch-Namen und wähle einfach den Branch aus, zu dem du springen möchtest.

Schritt 6: Die Erweiterung „GitHub Pull Requests and Issues“ nutzen

Um die volle Power von GitHub direkt in VS Code zu erleben, installiere die offizielle Erweiterung:

  1. Gehe zum Extensions-Tab in VS Code (Strg + Umschalt + X).
  2. Suche nach „GitHub Pull Requests and Issues“ (von GitHub herausgegeben) und klicke auf Installieren.
  3. Nun erscheint ein neues GitHub-Icon in deiner linken Seitenleiste.
  4. Funktionen:
    • Pull Requests erstellen: Du musst den Browser nicht mehr öffnen. Erstelle PRs direkt aus deinem aktuellen Branch.
    • Code-Reviews durchführen: Kommentiere Codezeilen von Teammitgliedern direkt in deinem Editor.
    • Issues verwalten: Sieh dir zugewiesene Aufgaben an und erstelle direkt aus einem Issue heraus einen neuen Branch.

Zusammenfassung der wichtigsten Shortcuts & Tipps

  • Quellcodeverwaltung öffnen: Strg + Umschalt + G (Mac: Cmd + Shift + G)
  • Schneller Commit: Strg + Enter (im Textfeld der Commit-Nachricht)
  • Statusleiste beachten: Die untere Leiste zeigt dir immer den aktuellen Branch sowie ausstehende Pushes (Pfeil nach oben) und Pulls (Pfeil nach unten) an.
  • Diff-Ansicht: Klicke in der Quellcodeverwaltung auf eine Datei, um sofort einen Vorher-Nachher-Vergleich deiner Änderungen zu sehen.
0