Tag Zwei

Heute schlagen wir ein neues Kapitel in der Webentwicklung auf – wir lernen Git kennen.

Was ist Git?

Das mit Abstand am weitesten verbreitete moderne Versionskontrollsystem der Welt heutzutage ist Git. Git ist ein ausgereiftes, aktiv gepflegtes Open-Source-Projekt, das 2005 ursprünglich von Linus Torvalds, dem berühmten Entwickler des Linux Betriebssystem-Kernel, entwickelt wurde.

Git erlaubt mehreren Entwicklern an einem Projekt zu arbeiten, indem sie eine lokale Arbeitskopie des kompletten Repositorys (und somit der Projektdaten) auf ihrem Rechner haben. Git macht es für die Entwickler möglich Änderungen des Codes zu verfolgen, sie rückgängig zu machen, sie anderen zur Verfügung zu stellen und über Git auch Änderungen von anderen einzuholen.

Was ist Versionskontrolle?

Die Versionskontrolle, auch bekannt als Quellcodekontrolle, ist ein Verfahren zur Verfolgung und Verwaltung von Änderungen an Softwarecode. Versionskontrollsysteme sind Softwaretools, mit deren Hilfe Softwareteams Änderungen am Quellcode im Zeitverlauf verwalten können.

Versionskontrollsoftware verfolgt jede Änderung am Code und speichert sie in einer speziellen Datenbank. Unterläuft Entwicklern ein Fehler, können sie einen Schritt zurückgehen und frühere Codeversionen vergleichen, um das Problem zu beheben, ohne Teammitglieder groß zu stören.

Was sind die Vorteile von Git?

• Daten-Sicherheit: Da jeder Entwickler via Git eine Kopie aller Projektdaten besitzt, ist die Wahrscheinlichkeit, Daten durch einen Serverausfall zu verlieren, minimal.

• Flexibilität: Mehrere Entwickler können dank Git zeitgleich an einem Projekt arbeiten.

• Versionsspeicherung: Da jede Code-Änderung per Git verfolgt und gespeichert wird, kann man im Notfall an einem späteren Zeitpunkt auf ältere Stände des Projekts zugreifen. Somit wird verhindert, dass getätigte Arbeiten überschrieben werden oder verloren gehen.

Basic Git Features

• Repository: Ein Git-Repository (Aufbewahrungsort) ist eine Arbeitskopie der Entwickler das den vollständigen Verlauf aller Änderungen enthält. Zusätzlich gibt es noch ein remote Repository in dem alle lokalen Änderungen zusammenkommen.

• Branch: Entwicklungsstände (z.B. neue Features) können dank Git in sogenannte branches (separate Arbeitszweige) aufgeteilt werden. Sie dienen dazu, verschiedene Funktionen getrennt voneinander zu entwickeln.

• Commit: Der Befehl “git commit” wird verwendet um den Status eines Projekts zu erfassen. Das bedeutet, dass der gegenwärtige Status eines Projekts als eine Version in Git gespeichert wird. “Git commit” ist somit eine besonders relevante Funktion.

• Merge: Der Befehl “git merge” wird verwendet um Änderungen aus verschiedenen  branches zusammenzuführen.

• Push: Der Befehl “git push” wird verwendet um lokale Änderungen an ein entferntes (remote) Repository zu senden.

• Pull: Der Befehl “git pull” wird verwendet um Änderungen eines entfernten Repository auf den Rechner zu holen.

• Fork: Ein Fork ist eine persönliche Kopie eines Repositorys. Mit Forks kannst du Änderungen an einem Projekt vornehmen, ohne dass sich dies auf das ursprüngliche Repository auswirkt.

Github und Bitbucket

Neben Git, dem Versionskontrollsystem welches mithilfe der Kommandozeile benutzt wird, gibt es noch GitHub und Bitbucket. Im Gegensatz zu Git sind GitHub und Bitbucket kein Versionskontrollsysteme sondern Hosting-Plattformen, die Versionskontrolle und das Zusammenarbeiten an Projekten ermöglichen. GitHub und Bitbucket zeichnen sich durch ihre Benutzerfreundlichkeit aus, da durch die Benutzeroberfläche die Verwaltung von Git-Repositories vereinfacht wird. Sie sind auch für das Teilen von Open Source Software beliebt, da öffentliche Repositories auf GitHub verwendet werden können.

Der grundlegende Workflow mit Git

Neues Repository anlegen: git init

Zum Erstellen eines neuen Repositorys benutzt du den Befehl git init. git init ist ein einmaliger Befehl während der Ersteinrichtung eines neuen Repositorys. Durch das Ausführen dieses Befehls wird ein neues .git-Unterverzeichnis in deinem aktuellen Arbeitsverzeichnis erstellt. Dabei wird auch ein neuer Haupt-Branch erstellt.

Bestehendes Repository klonen: git clone

Alternativ und wenn ein Projekt bereits in einem zentralen Repository eingerichtet wurde, ist ein Klon-Befehl für Benutzer die gängigste Art, einen lokalen Entwicklungsklon zu erstellen. Genau wie git init ist das Klonen im Allgemeinen ein einmaliger Vorgang. Sobald ein Entwickler eine Arbeitskopie erhalten hat, werden alle Versionskontrollvorgänge über sein lokales Repository verwaltet.

Änderungen am Repository speichern: git add und git commit

Bei der Arbeit in Git oder anderen Versionskontrollsystemen ist das Konzept des "Speicherns" deutlich nuancierter als das Speichern in einem Textverarbeitungsprogramm oder anderen herkömmlichen Anwendungen zur Dateibearbeitung.

            git add -A
        

Mit dem Befehl git add fügst du eine Änderung aus dem Arbeitsverzeichnis zur Staging-Umgebung hinzu. Git wird damit angewiesen, Aktualisierungen einer bestimmten Datei in den nächsten Commit aufzunehmen. Allerdings hat git add keine signifikanten Auswirkungen auf das Repository: Änderungen werden erst aufgezeichnet, wenn du git commit ausführst.

            git commit -m "commit message"

        

Mit dem Befehl git commit erfasst du einen Snapshot der aktuell bereitgestellten Änderungen des Projekts. Committete Snapshots gelten als "sichere" Versionen eines Projekts – Git nimmt an ihnen nur auf explizite Anweisung hin Änderungen vor. Mit dem Kürzel -m wird ein Commit mit einer angegebenen Commit-Nachricht erstellt.

Zusammenarbeit von Repository zu Repository: git push

Wenn du zu Beginn den Befehl git clone verwendest hast, ist dein Repository bereits zur Remote-Zusammenarbeit konfiguriert. Mit git clone konfigurierst du dein Repository automatisch mit einem Remote-Repository, auf das du mit der Git-URL verweist, von der du es geklont hast. Das bedeutet, dass du, sobald du eine Datei geändert und die Änderungen committed hast, diese Änderungen mit dem Befehl git push in das Remote-Repository verschieben kannst.

Remote-Repository anlegen: git remote

Wenn du ein neues Repository mithilfe von git init angelegt hast, hast du kein Remote-Repository, in das du deine Änderungen verschieben könntest. Üblicherweise hostet man beim Anlegen eines neuen Repositorys einen Git-Service wie Github oder Bitbucket und erstellt dort ein Repository. Der Service stellt eine Git-URL bereit, die du deinem lokalen Git-Repository hinzufügst und über den Befehl git push in das gehostete Repository verschiebst.

Mit dem Befehl git remote kannst du Verbindungen mit anderen Repositorys erstellen, abrufen und löschen. Dabei solltest du dir Remote-Verbindungen wie Lesezeichen vorstellen, weniger als direkte Links zu anderen Repositorys. Sie erlauben keinen Echtzeitzugriff auf die Repositorys. Vielmehr sind sie praktische Kurznamen, die du statt langer und komplizierter URLs zum Referenzieren verwenden kannst.

Prettier, der opinionated Code Formatter

Prettier ist ein Open-Source-Tool, das sich auf die Formatierung von Code konzentriert. Es unterstützt eine Vielzahl von Programmiersprachen wie JavaScript, TypeScript, Python, HTML, CSS und mehr. Es kann entweder als CLI-Tool oder als Plug-In für verschiedene Entwicklungsumgebungen wie Visual Studio Code verwendet werden.

Das Ziel von Prettier ist es, den Code automatisch zu formatieren und einheitlich aussehen zu lassen, unabhängig von den Präferenzen des Entwicklers. Es eliminiert das manuelle Formatieren von Code und sorgt dafür, dass der Code konsistent und leicht lesbar ist. Prettier verwendet eine eigene Regelsprache, um den Code zu formatieren, und befolgt diese Regeln strikt, um ein konsistentes Format zu gewährleisten.

Durch die Verwendung von Prettier kann man Zeit sparen, indem man das manuelle Formatieren von Code vermeidet, und gleichzeitig die Lesbarkeit und Übersicht des Codes verbessern. Es ist ein nützliches Tool für Entwicklerteams, da es sicherstellt, dass der Code einheitlich aussieht, unabhängig davon, wer ihn geschrieben hat.

Warum opinionated?

"Opinionated" bedeutet, dass eine Sache (in diesem Fall ein Tool oder eine Technologie) eine starke Meinung oder Überzeugung über die beste Art und Weise hat, wie etwas getan werden sollte. Im Kontext von Prettier bedeutet das, dass es eine feste Vorstellung davon hat, wie Code formatiert werden sollte, und diese Regeln strikt anwendet.

Probiere es selbst!

1. Installiere die Prettier Extension für VS Code.

2. Öffne die User Settings in VS Code mit CMD + Shift + P

3. Speichere folgenden Code in settings.json

            {
    // Prettier Configurations
    "prettier.tabWidth": 4, // Specify the number of spaces per indentation-level.
    "prettier.semi": false, // Print semicolons at the ends of statements.
    "prettier.singleQuote": true, // Use single quotes instead of double quotes.
    "prettier.arrowParens": "avoid", // Include parentheses around a sole arrow function parameter.
    "prettier.bracketSameLine": true, // Put the > of a multi-line HTML  element at the end of the last line instead of being alone on the next line.
    "prettier.printWidth": 120, // Specify the line length that the printer will wrap on.
    
    // Define which languages should be formatted by Prettier and if they should be formatted on save.
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true,
        },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true,
        },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true,
        },
}

        

Disclaimer: Üblicherweise definieren wir solche Settings nicht im Globalen User Setting JSON sondern in einem .prettierrc File innerhalb eines Projektes. Das würde uns ermöglichen, pro Projekt andere Einstellungen zu definieren. Der Einfachheit halber bedienen wir uns im Coding Modul jedoch oben genannter Umsetzung.

Quellenangabe