GitHub in VS Code

Moin — dein erster Push, ganz ohne Terminal-Gefummel

Alles im eingebauten Panel. Keine Extension, kein Schnickschnack. 🦀

Was du brauchst

  • VS Code — hast du ja schon
  • Ein GitHub-Konto — gibt's gratis auf github.com
  • Git — das schnappen wir uns gleich, Schritt für Schritt ↓

Die GitHub-Anbindung bringt VS Code von Haus aus mit — fehlt nur noch Git.

Git auf Windows installieren

Auf git-scm.com → Download for Windows → .exe starten. Die meisten Häkchen passen — bei diesen dreien lohnt ein Blick:

  • Default editor → VS Code (sonst landest du in Vim)
  • PATH → „Git from the command line…" (die mittlere, empfohlene)
  • Line endings → „Checkout Windows-style…" (Default)

Der Rest ist Weiter → Install. Alles andere kannst du getrost so lassen.

Läuft's? Kurzer Check

Neues PowerShell- oder Eingabeaufforderungs-Fenster auf, und tipp:

git --version

Kommt sowas wie git version 2.4x.x zurück? Läuft. ✅

Kleiner Stolperstein: das Fenster nach der Installation einmal neu aufmachen, sonst kennt es git noch nicht.

Git einmal einrichten — dann Ruhe

Git schreibt Name + E-Mail in jeden Commit. Einmal global setzen, sonst meckert's beim ersten Mal:

git config --global user.name "Maik Kasper"
git config --global user.email "du@example.com"

Nimm am besten die E-Mail, die auch bei GitHub hinterlegt ist.

git config --global init.defaultBranch main

…macht main zum Startzweig (GitHub-Standard). Nachschauen: git config --global --list.

Ein Repo starten — git init

Im Projektordner macht git init aus einem 08/15-Ordner ein echtes Git-Repository:

cd C:\Pfad\zu\deinem\projekt
git init

Git legt einen versteckten .git-Ordner an — da drin wohnt die ganze Historie.

Oder: ein Klick in VS Code

Genau das macht der Button Repository initialisieren im Panel — git init, nur ohne Tippen.

Einmal verstanden, was unter der Haube läuft — ab hier klickst du's einfach in VS Code.

Wo alles passiert

Links in der Leiste das Verzweigungs-Symbol — oder faul per Strg+Shift+G.

SOURCE CONTROL Deine Änderungen erscheinen hier ↑

Die kleine Zahl am Symbol sagt dir, wie viele Dateien sich geändert haben.

Projekt hochladen — 1 Klick

Ordner offen, noch kein Repo? Dann wartet da schon Publish to GitHub:

SOURCE CONTROL Repository initialisieren Publish to GitHub ← der blaue macht die Arbeit

VS Code fragt kurz nach Login + privat/öffentlich — zack, Repo ist online.

Schon ein Repo am Start? Clone Repository → GitHub-Link rein.

Der ganze Alltag = 4 Schritte

✏️ Ändern→ Stage (add)→ Commit→ Sync (push/pull)

Mehr ist es wirklich nicht. Der Rest sind Feinheiten.

Stage — was kommt mit?

Geänderte Dateien landen unter Changes. Das + nimmt sie mit an Bord.

SOURCE CONTROL Nachricht (Strg+Enter zum Commit) CHANGES 2 app.js M + README.md U + M = geändert · U = neu (untracked)

Alles auf einmal

Das + oben neben Changes schnappt sich alles auf einmal.

Staged heißt nur: „das kommt in den nächsten Commit". Gespeichert ist noch nix.

Commit — Schnappschuss + Notiz

Login-Formular gebaut ✓ Commit Kurz & im Präsens: „macht X" — nicht „hab X gemacht".

Nachricht rein → Commit (oder Strg+Enter). Fertig, lokal gesichert. ✅

Ein Commit ist ein Speicherpunkt — da kommst du immer wieder hin zurück.

Sync — hoch & runter

WasWann
Pushdeine Commits hoch zu GitHubnach dem Commit
PullNeues von GitHub runterbevor du loslegst

Sync macht beides in einem Rutsch: erst Pull, dann Push.

Der Sync-Knopf

Unten links in der Statusleiste — Branch + die zwei Pfeile:

main 1 ↑ 0 ↓ ← klicken = Sync (Pull + Push)

„1 ↑" heißt: ein Commit steht abfahrbereit nach oben.

Warum Pull und Push?

GitHub ist der gemeinsame Treffpunkt — jeder hat seine eigene lokale Kopie:

Dein PC lokale Kopie GitHub die Mitte Kollegin lokale Kopie push → ← pull pull → ← push

Push = deine Commits hoch · Pull = die der anderen runter.

Zu zweit am Projekt

Der typische Ablauf — ein entspanntes Hin und Her über GitHub:

  1. Kollege ändert → Commit → Push (liegt jetzt auf GitHub)
  2. Du Pullst → hast seinen Stand
  3. Du werkelst → Commit → Push
  4. Er Pullt → hat deinen Stand

Goldene Regel: immer erst Pull, dann Push. Sonst mault Git — dein Stand ist zu alt.

Merge — Zusammenführen

Beim Pull führt Git die Commits der anderen mit deinen zusammen. Meist ganz automatisch — ihr habt ja an verschiedenen Ecken gewerkelt.

Solange ihr euch nicht in die Quere kommt, merkt ihr vom Merge fast nichts.

Merge-Konflikt

Habt ihr beide dieselbe Zeile angefasst, kann Git nicht raten, wer recht hat → Konflikt:

<<<<<<< deine Version
const port = 3000
=======
const port = 8080
>>>>>>> von GitHub

VS Code legt beide nebeneinander + Buttons Accept Current / Incoming / Both. Du wählst, committest — erledigt.

Branches — parallele Linien

Ein Branch ist eine eigene Arbeitslinie. main = der stabile Hauptzweig:

main feature abzweigen → arbeiten → zurück in main mergen

So bastelst du an einem Feature, ohne main anzufassen — der bleibt immer lauffähig.

Branch-Ablauf

git switch -c feature-login   # neuer Branch, direkt drauf
# … arbeiten, committen …
git switch main               # zurück auf main
git merge feature-login       # Feature einbauen

In VS Code: unten links der Branch-Name → anklicken zum Wechseln/Erstellen.

Im Team: der Pull Request

Statt direkt in main zu mergen, schickst du deinen Branch hoch und machst auf GitHub einen Pull Request auf:

  1. Branch pushen → „Compare & pull request"
  2. Team schaut drüber + kommentiert
  3. Merge in main → alle pullen den neuen Stand

Ein PR heißt im Grunde: „guck mal drüber und bau's ein". So bleibt's im Team sauber. 🦀

Dein Rhythmus

  1. Sync — erstmal den neuesten Stand holen
  2. arbeiten, speichern
  3. Stage → Commit mit klarer Nachricht
  4. Sync — und dein Stand liegt sicher auf GitHub

Klein & oft committen schlägt den großen Rundumschlag.

Kurz im Kopf behalten

  • Strg+Shift+G → Source Control
  • + = Stage · Commit = speichern · Sync = tauschen
  • M geändert · U neu · immer erst Pull

Verhakt? Rechtsklick auf die Datei → „Discard", und die Änderung ist Geschichte.

Das war GitHub in VS Code

Ändern → Stage → Commit → Sync.

Kein Terminal, keine Magie — nur ein Panel und vier Handgriffe.

Ab hier hilft nur eins: einfach machen. Der erste Push ist der schwerste — danach läuft's. 🦀