Mit Git arbeiten

Nun werden wir gemeinsam die wichtigsten Schritte für die tägliche Arbeit im Team mit Git und GitHub durchgehen.

Folgende Git-Befehle werden wir kennenlernen:

git status (Status der Dateien anzeigen)
git diff (Unterschiede anzeigen)
git add (Dateien hinzufügen)
git commit (Änderungen bestätigen)
git pull (Änderungen vom Server holen)
git push (Änderungen auf den Server laden)
git log (Änderungshistorie anzeigen)

→ Wir werden diese Befehle sowohl im Terminal als auch mit den Git-Tools in VS Code ausführen.

Lokale Änderungen an Dateien

Das lokale Repository auf dem eigenen Rechner ist eine Kopie des Repository auf GitHub. Hier können wir lokale Änderungen an Dateien vornehmen, d.h. andere Teammitglieder sehen diese Änderungen noch nicht. Änderungen können sein:

Hinzufügen neuer Dateien
Ändern bestehender Dateien
Löschen von Dateien

In unserem Repository haben wir bereits ein paar Dateien:

README.md (Text-Datei mit Informationen zum Projekt in Markdown )
.gitignore (Liste von Dateien, die von Git ignoriert werden sollen, z.B. alles in node_modules)
Vielleicht auch die LICENSE-Datei (Lizenz für das Projekt)

Repository-Zustand mit `git status` überprüfen

🚨

Wenn Sie die folgenden Schritte mitmachen möchten, dann sollte dies pro Team nur eine Person tun, um mögliche Konflikte in den Änderungen zunächst zu vermeiden.

Vielleicht ist es sinnvoll, dass die Person im Team, die sich noch nicht so gut mit Git auskennt, die Schritte durchführt, um die Abläufe besser zu verstehen.

Achten Sie auch darauf, ob die Änderungen im aktuellen Stand Ihres Projekts sinnvoll sind und ob Sie evtl. andere Dateien bzw. Änderungen vornehmen möchten. Es ist auch möglich, die Änderungen später wieder rückgängig zu machen.

Wir erstellen in VS Code eine neue Datei main.js im Projektordner und fügen folgenden Code ein (gerne nach eigenen Vorstellungen anpassen):


console.log("Willkommen im Programm!");

Dadurch haben wir eine neue Datei erstellt, die noch nicht im Git-Repository erfasst ist. Dies ist durch den Status untracked gekennzeichnet und wird durch grüne Färbung des Dateinamens mit Zusatz U im Explorer von VS Code dargestellt (es gibt auch D in rot für deleted und M in gelb für modified).

Wir können den Status der Dateien in VS Code im Bereich Source Control überprüfen. Außerdem gibt es dafür ein eigenes Terminal-Kommando:


git status

Mit git status im Terminal oder den Git-Tools in VS Code können wir den Status der Dateien jederzeit überprüfen und sehen, welche Dateien neu sind, geändert wurden oder gelöscht wurden.

Änderungen mit `git diff` anzeigen

Während uns git status den Status der Dateien anzeigt, können wir mit git diff die genauen Änderungen in den Dateien anzeigen. Dazu geben wir im Terminal folgenden Befehl ein:


git diff

Dies zeigt uns die Unterschiede der aktuellen Änderungen im lokalen Repository an. Es ist auch möglich, nur die Änderungen einer bestimmten Datei anzuzeigen:


git diff main.js

Da main.js eine neue Datei ist, wird der gesamte Inhalt der Datei angezeigt. Bei geänderten Dateien werden nur die geänderten Zeilen angezeigt.

In VS Code können wir die Änderungen auch direkt im Source Control-Bereich sehen, indem wir dort eine Datei auswählen und uns die Änderungen im Editor-Bereich mit visuellen Hervorhebungen anzeigen lassen.

Änderungen mit `git add` hinzufügen

Wenn wir unsere Änderung bestätigen wollen, müssen wir in Git in zwei Schritten vorgehen:

Änderungen hinzufügen (git add)
Änderungen bestätigen (git commit)

Zunächst müssen wir die Dateien hinzufügen, die wir für die Änderung bestätigen wollen. Dazu verwenden wir den Befehl git add. Wir können einzelne Dateien oder auch alle geänderten Dateien hinzufügen. Im Terminal geben wir folgenden Befehl für das Hinzufügen von main.js ein:


git add main.js

Damit wird die Datei main.js für die nächste bestätigte Änderung (commit) vorgemerkt. Wir können mit der Option -A auch alle geänderten Dateien hinzufügen:


git add -A

Damit haben wir die Datei main.js für die nächste Änderung vorgemerkt. Der Status der Dateien hat sich nun geändert und wir können dies mit git status überprüfen.

Auch in VS Code lässt sich dies im Source Control-Bereich nachvollziehen. Dort sehen wir die vorgemerkten Dateien unter Staged Changes und können sie auch einzeln oder alle auf einmal mit + hinzufügen.

Auch wenn wir später vielleicht hauptsächlich die Git-Tools in VS Code verwenden, ist es wichtig, die Grundlagen der Git-Befehle zu kennen, um zu verstehen, was im Hintergrund passiert.

Änderungen mit `git commit` bestätigen

Erinnerung: Bevor wir Änderungen bestätigen, sollten wir sicherstellen, dass wir die Änderungen mit git status und git diff überprüft haben und die gewünschten Dateien mit git add hinzugefügt haben.

Nachdem wir die Änderungen hinzugefügt haben, können wir sie mit git commit bestätigen. Dazu geben wir im Terminal folgenden Befehl ein:


git commit -m 'main.js hinzugefügt'

Mit -m geben wir eine Nachricht an, die die Änderung beschreibt. Diese Nachricht ist wichtig, um später nachvollziehen zu können, was in einem commit geändert wurde.

Nach dem Bestätigen der Änderung mit git commit ist die Änderung im lokalen Repository festgehalten. Wir können dies mit git status überprüfen und sehen, dass es keine Änderungen mehr gibt. Ebenso sind in VS Code die vorgemerkten Dateien aus dem Source Control-Bereich verschwunden.

Änderungen in VS Code bestätigen

Zur Veranschaulichung der Git-Tools in VS Code erweitern wir
das Projekt zunächst mit package.json. Dazu führen wir im Terminal folgenden Befehl aus:


npm init

Im Dialog geben wir die gewünschten Informationen ein, die meisten können wir mit Enter bestätigen. Am Ende wird eine package.json-Datei erstellt.

Wir spielen diese Änderung nun komplett in VS Code durch:

Status im Source Control-Bereich überprüfen
Datei package.json hinzufügen (mit +-Zeichen)
Datei package.json ist nun in Staged Changes
Commit-Nachricht eingeben (z.B. package.json hinzugefügt)
Commit-Button klicken

Außerdem fügen wir noch die Hilfsbibliothek prompt-sync hinzu:


npm install prompt-sync

In den Git-Tools von VS Code sehen wir nun, dass package.json geändert wurde. Außerdem wurde die neue Datei package-lock.json erstellt. .gitignore enthält bereits den Eintrag node_modules, daher taucht node_modules nicht in den Änderungen auf.

Wir fügen die Dateien hinzu und bestätigen die Änderungen mit einer Commit-Nachricht (z.B. prompt-sync hinzugefügt).

Änderungen werden in `commits` festgehalten

In Git ist ein commit eine Bestätigung von Änderungen an beliebig vielen Dateien. Dies können neue Dateien sein, geänderte Dateien oder gelöschte Dateien. Ein commit wirkt sich auf die gesamte Arbeitskopie aus, d.h. alle Dateien werden in den Zustand des commit zurückgesetzt.

Staging Area

Mit git add fügen wir Dateien zur Staging Area hinzu (stage = Bühne). Die Staging Area ist ein Zwischenspeicher für Änderungen, die wir bestätigen wollen. Mit git commit werden die Änderungen aus der Staging Area in das lokale Repository übernommen. Durch die Staging Area können wir Änderungen in mehreren Schritten bestätigen, indem wir für eine bestimmte Änderung nur die betroffenen Dateien hinzufügen und dir irrelevanten Dateien auslassen.

Die Staging Area ist ein wichtiges Konzept in Git.

Änderungen auf GitHub für das Team bereitstellen

Sobald wir Änderungen im lokalen Repository bestätigt haben, können wir sie auf GitHub bereitstellen. Dazu verwenden wir den Befehl git push. Dieser lädt die Änderungen auf den GitHub-Server hoch, wo sie für andere Teammitglieder sichtbar werden.


git push

Nach dem Ausführen von git push sind die Änderungen auf GitHub sichtbar. Wir können dies überprüfen, indem wir auf die GitHub-Webseite gehen und uns das Repository ansehen.

Auch in VS Code gibt es die Möglichkeit, Änderungen direkt zu pushen.

Mit Git arbeiten

Lokale Änderungen an Dateien

Repository-Zustand mit git status überprüfen

Änderungen mit git diff anzeigen

Änderungen mit git add hinzufügen

Änderungen mit git commit bestätigen