Tutorials

Tutorial: Git in Visual Studio Code einrichten

Melden

Dieses Tutorial führt dich Schritt für Schritt durch die Einrichtung von Git in Visual Studio Code (VS Code).

Visual Studio Code bietet eine hervorragende integrierte Unterstützung für Git. Damit kannst du Änderungen verfolgen, Commits erstellen und deinen Code auf Plattformen wie GitHub hochladen, ohne das Programm zu verlassen.

Schritt 1: Git auf dem Computer installieren

Bevor VS Code Git nutzen kann, muss Git auf deinem System installiert sein.

  1. Gehe auf die offizielle Webseite: git-scm.com.
  2. Lade die Version für dein Betriebssystem (Windows, macOS oder Linux) herunter.
  3. Installiere Git. Bei der Installation unter Windows kannst du die Standardeinstellungen meist einfach beibehalten.
  4. Überprüfung: Öffne dein Terminal (oder die Eingabeaufforderung) und tippe:
    git --version

    Erscheint eine Versionsnummer, war die Installation erfolgreich.

Schritt 2: Git global konfigurieren

Git muss wissen, wer du bist, um deine Änderungen (Commits) zuzuordnen.

  1. Öffne ein Terminal (in VS Code: Strg + ö oder über das Menü Terminal -> Neues Terminal).
  2. Gib folgende Befehle ein (ersetze die Platzhalter durch deine Daten):
    git config --global user.name "Dein Name"
git config --global user.email "deine-email@beispiel.de"

Schritt 3: Ein Repository in VS Code erstellen

Du hast nun zwei Möglichkeiten: Ein neues Projekt starten oder ein bestehendes Projekt von GitHub kopieren (clonen).

Option A: Ein neues lokales Repository erstellen

  1. Öffne einen Ordner in VS Code (Datei -> Ordner öffnen).
  2. Klicke links in der Aktivitätsleiste auf das Source Control Icon (das Symbol mit den drei Kreisen und Linien) oder drücke Strg + Umschalt + G.
  3. Klicke auf die Schaltfläche "Repository initialisieren" (Initialize Repository).
  4. Git erstellt nun einen versteckten .git-Ordner in deinem Projekt.

Option B: Ein Repository clonen (von GitHub & Co.)

  1. Drücke Strg + Umschalt + P, um die Befehlspalette zu öffnen.
  2. Tippe Git: Clone ein.
  3. Füge die URL des Repositories ein (z. B. von GitHub) und wähle einen Speicherort auf deinem PC.

Schritt 4: Der Git-Workflow in VS Code

Sobald Git aktiviert ist, erkennt VS Code alle Änderungen an deinen Dateien.

1. Änderungen stagen (Vormerken)

Wenn du eine Datei änderst, erscheint neben dem Dateinamen ein "M" (Modified) oder ein "U" (Untracked).

  • Gehe zum Source Control Tab.
  • Klicke auf das Plus-Symbol (+) neben der Datei, um sie für den Commit vorzubereiten ("Staging").

2. Commit erstellen (Speichern)

  • Gib oben im Textfeld eine aussagekräftige Commit-Nachricht ein (z. B. "Initialer Commit" oder "Header-Design korrigiert").
  • Klicke auf die Schaltfläche Commit (Häkchen-Symbol).

3. Push (Veröffentlichen)

Um deinen Code online (z. B. auf GitHub) zu speichern:

  • Klicke unten links auf das Synchronisations-Symbol oder im Source Control Tab auf "Sync Changes" bzw. "Publish Branch".
  • Beim ersten Mal fragt VS Code dich nach deinen Zugangsdaten für GitHub/GitLab.

Schritt 5: Branches (Zweige) verwalten

Branches ermöglichen es dir, an neuen Features zu arbeiten, ohne den Hauptcode (Main) zu stören.

  1. Klicke ganz unten links in der Statusleiste auf den aktuellen Branch-Namen (meist main oder master).
  2. Wähle oben im Menü "+ Neuen Branch erstellen...".
  3. Gib einen Namen ein und drücke Enter.

Bonus: Nützliche Erweiterungen

Obwohl VS Code Git nativ beherrscht, machen diese Extensions die Arbeit noch leichter:

  • GitLens: Zeigt dir direkt im Code an, wer wann welche Zeile geändert hat (extrem mächtig!).
  • Git Graph: Visualisiert deinen Branch-Verlauf in einer schönen Grafik.

Zusammenfassung der wichtigsten Shortcuts:

  • Strg + Umschalt + G: Source Control öffnen.
  • Strg + Enter: Commit ausführen (wenn die Nachricht getippt wurde).
  • Strg + Umschalt + P: Befehlspalette (suche hier nach "Git", um alle Funktionen zu sehen).

Viel Erfolg beim Versionieren deines Codes!

0