Tutorial

Visual Studio Code mit GitHub verbinden: Der ultimative Guide

Melden

Hier ist ein vollständiger Guide, wie du Visual Studio Code (VS Code) professionell mit GitHub verbindest.

Die Verknüpfung von Visual Studio Code mit GitHub ist einer der wichtigsten Schritte für moderne Softwareentwicklung. In dieser Anleitung lernst du Schritt für Schritt, wie du dein System einrichtest, dich authentifizierst und deinen ersten Code veröffentlichst.

1. Voraussetzungen

Bevor wir starten, stelle sicher, dass du folgende Dinge installiert bzw. erstellt hast:

  1. Ein GitHub-Konto: Registriere dich kostenlos auf github.com.
  2. Visual Studio Code: Installiere die neueste Version von code.visualstudio.com.
  3. Git installieren: Das ist der wichtigste Teil! VS Code ist nur die Oberfläche; Git ist das Werkzeug im Hintergrund.
    • Lade Git hier herunter: git-scm.com.
    • Folge dem Installationsassistenten (die Standardeinstellungen sind meistens korrekt).

2. Git global konfigurieren

Nachdem du Git installiert hast, musst du dem System mitteilen, wer du bist.

  1. Öffne ein Terminal (in VS Code: Strg + ö oder über das Menü Terminal > Neues Terminal).
  2. Gib folgende Befehle nacheinander ein und bestätige mit Enter:
    git config --global user.name "Dein Name"
git config --global user.email "deine-email@beispiel.de"

    Hinweis: Verwende die E-Mail-Adresse, die auch mit deinem GitHub-Konto verknüpft ist.

3. GitHub-Account in VS Code anmelden

VS Code macht die Authentifizierung sehr einfach:

  1. Klicke unten links in VS Code auf das Benutzer-Symbol (Accounts).
  2. Wähle "Sign in to Sync Settings" oder direkt "Backup and Sync Settings".
  3. Alternativ: Klicke links auf das Source Control Symbol (das Icon mit den drei Kreisen und Linien, Strg + Umschalt + G) und klicke auf "Publish to GitHub".
  4. Ein Browserfenster öffnet sich. Melde dich bei GitHub an und autorisiere "Visual Studio Code".
  5. Nach der Bestätigung leitet dich der Browser zurück zu VS Code. Klicke auf "Öffnen", falls eine Abfrage erscheint.

4. Ein Projekt auf GitHub veröffentlichen

Wenn du einen Ordner mit Code hast, den du auf GitHub hochladen möchtest:

  1. Öffne den Ordner in VS Code (Datei > Ordner öffnen).
  2. Klicke links auf das Source Control Symbol.
  3. Klicke auf den blauen Button "Publish to GitHub".
  4. Wähle oben im Dropdown-Menü aus:
    • Publish to GitHub private repository: Nur du (und geladene Gäste) können den Code sehen.
    • Publish to GitHub public repository: Jeder kann den Code sehen.
  5. VS Code lädt die Dateien hoch. Sobald es fertig ist, erscheint unten rechts eine Meldung "Successfully published". Klicke auf "Open on GitHub", um es zu sehen.

5. Der tägliche Workflow (Commit & Push)

Wenn du Änderungen an deinem Code vornimmst, musst du diese speichern ("Committen") und hochladen ("Pushen"):

  1. Änderungen speichern: Speichere deine Dateien ganz normal (Strg + S).
  2. Staging: Klicke im Source Control Tab auf das Plus-Symbol (+) neben den geänderten Dateien (dies bereitet sie für den Upload vor).
  3. Commit: Gib oben in das Textfeld eine Nachricht ein (z. B. "Update index.html") und klicke auf den Haken "Commit".
  4. Push: Klicke unten links in der Statusleiste auf das Synchronisierungs-Symbol (ein Kreis mit Pfeilen) oder auf den blauen Button "Sync Changes", um die Änderungen zu GitHub zu senden.

6. Ein bestehendes Repository von GitHub klonen

Möchtest du ein Projekt, das bereits auf GitHub existiert, auf deinen PC laden?

  1. Drücke in VS Code Strg + Umschalt + P, um die Befehlspalette zu öffnen.
  2. Tippe Git: Clone ein und drücke Enter.
  3. Wähle "Clone from GitHub".
  4. Suche nach deinem Repository und wähle den Speicherort auf deinem PC aus.

Profi-Tipp: Die Git Graph Erweiterung

Um deine Änderungen visuell besser zu verstehen, empfehle ich die Erweiterung "Git Graph".

  • Gehe auf das Erweiterungen-Icon (Quadrate) links.
  • Suche nach "Git Graph" und installiere es.
  • Nun kannst du dir deine gesamte Versionshistorie als schönes Diagramm anzeigen lassen.

Fertig! Du hast Visual Studio Code erfolgreich mit GitHub verbunden und bist bereit für dein erstes Projekt.

0