Übung: Lösen von Mergekonflikten

Abgeschlossen

Manchmal kommt es zu Problemen, unabhängig davon, wie gut Sie planen. Angenommen, zwei Entwickler arbeiten gleichzeitig an derselben Datei. Der erste Entwickler pusht seine Änderungen ohne Probleme in die Verzweigung main des Projektrepositorys. Wenn der zweite Entwickler versucht, seine Änderungen zu pushen, gibt Git einen Mergekonflikt aus. Die Datei, die der zweite Entwickler ändern möchte, ist nicht mehr auf dem aktuellen Stand in Bezug auf die neuesten Änderungen oder die Dateiversion. Die Dateiversion muss auf den neuesten Stand gebracht werden, bevor die Änderungen des zweiten Entwicklers zusammengeführt werden können. Kaum etwas fürchten Entwickler, die eine Versionskontrolle verwenden, mehr als Mergekonflikte.

Konflikte wie diese können auftreten, daher müssen Sie wissen, wie Sie damit umgehen. Die gute Nachricht ist, dass Git Lösungen zum Umgang mit Mergekonflikten bereitstellt.

Erstellen von Verzweigungen für Alice und Bob

Zunächst erstellen Sie eine Verzweigung für Alice und eine für Bob. Beide Entwickler aktualisieren gleichzeitig Dateien im Projektrepository. Sie kennen die jeweiligen Änderungen der anderen Person nicht, da sie Aktualisierungen in ihren lokalen Verzweigungen vornehmen.

  1. Vergewissern Sie sich, dass Sie sich im Verzeichnis Alice befinden, und erstellen Sie dann eine Verzweigung mit dem Namen add-cat, in der Alice arbeiten kann:

    git checkout -b add-cat
    
    
  2. Wechseln Sie zum Verzeichnis Bob, und erstellen Sie eine Verzweigung mit dem Namen style-cat, in der Bob arbeiten kann:

    cd ../Bob
    git checkout -b style-cat
    
    

Nehmen Sie nun einige Änderungen an den Verzweigungen vor.

Vornehmen einer Änderung als Alice

Nehmen Sie zunächst als Alice eine Änderung an der Homepage der Website vor. Ersetzen Sie das Bild von Bobs Katze durch ein Bild von Alices Katze.

  1. Wechseln Sie zum Verzeichnis Alice zurück:

    cd ../Alice
    
    
  2. Wenn Sie die Ressourcen noch nicht heruntergeladen haben, laden Sie die ZIP-Datei mit den Ressourcen dieser Lerneinheit herunter. Entzippen Sie die Ressourcendateien:

    wget https://github.com/MicrosoftDocs/mslearn-branch-merge-git/raw/main/git-resources.zip
    unzip git-resources.zip
    
    
  3. Verschieben Sie die Datei bombay-cat-180x240.jpg in das Verzeichnis Objekte von Alice, und löschen Sie die anderen Dateien:

    mv bombay-cat-180x240.jpg Assets/bombay-cat-180x240.jpg
    rm git-resources.zip
    rm bobcat2-317x240.jpg
    
    
  4. Öffnen Sie die Datei index.html, und ersetzen Sie dann diese Anweisung (die eines der Katzenbilder von Bob verwendet):

    <img src="Assets/bobcat2-317x240.jpg" />
    

    Ersetzen Sie sie durch diese Anweisung (die eines der Katzenbilder von Alice verwendet):

    <img class="cat" src="Assets/bombay-cat-180x240.jpg" />
    
  5. Speichern Sie die Datei, und schließen Sie den Editor.

  6. Führen Sie jetzt die folgenden Git-Befehle aus, um die Änderungen an das Projektrepository zu pushen. Zuerst fügen Sie die Commits im Ordner Assets hinzu. Anschließend wechseln Sie zurück zum main-Branch und führen git pull aus, um sicherzustellen, dass sich nichts geändert hat. Danach führen Sie die lokale Verzweigung add-cat mit der Verzweigung main zusammen und pushen die Änderungen dann in das Repository.

    git add Assets
    git commit -a -m "Add picture of Alice's cat"
    git checkout main
    git pull
    git merge --ff-only add-cat
    git push
    
    

Vergewissern Sie sich abschließend, dass der Push erfolgreich war.

Vornehmen einer Änderung als Bob

Ohne zu wissen, woran Alice arbeitet, bemerkt Bob, dass beim letzten Push von Alice ein CSS-Stil namens cats in der Datei site.css für das Repository hinzugefügt wurde. Er beschließt daher, diese Klasse auf sein Katzenbild anzuwenden.

  1. Wechseln Sie zum Verzeichnis Bob zurück:

    cd ../Bob
    
    
  2. Öffnen Sie die Datei index.html . Ersetzen Sie die Anweisung, die das Katzenbild von Bob verwendet, durch die folgende Anweisung, die dem <img>-Element ein class="cat"-Attribut hinzufügt:

    <img class="cat" src="Assets/bobcat2-317x240.jpg" />
    
  3. Speichern Sie die Datei, und schließen Sie den Editor.

  4. Führen Sie nun die folgenden Git-Befehle aus, um die Änderungen am Projektrepository wie bei den Updates für das Repository von Alice zu synchronisieren. Committen Sie die Änderung, wechseln Sie zur Verzweigung main, führen Sie git pull aus, und mergen Sie dann die Formatänderung:

    git commit -a -m "Style Bob's cat"
    git checkout main
    git pull
    git merge style-cat
    
    

Nun haben Sie den gefürchteten Mergekonflikt. Dieselbe Zeile wurde in derselben Datei von zwei Personen geändert. Git erkennt den Konflikt und meldet „Automatic merge failed“ (Fehler beim automatischen Mergen). Git kann nicht wissen, ob das src-Attribut im <img>-Element auf die Datei bobcat2-317x240.jpg oder die Datei bombay-cat-180x240.jpg verweisen soll.

Auto-merging index.html
CONFLICT (content): Merge conflict in index.html
Automatic merge failed; fix conflicts and then commit the result.

Die Ausgabe von Git identifiziert die Datei index.html als Quelle des Konflikts.

Jetzt stellt sich die folgende Frage: Was soll Bob tun?

Lösen des Mergekonflikts

Bob hat an dieser Stelle einige Möglichkeiten. Bob kann eine der folgenden Aktionen ausführen:

  • Führen Sie den git merge --abort-Befehl aus, um den main-Branch auf den Zustand wiederherzustellen, der vor dem versuchten Merge vorlag. Führen Sie den git pull-Befehl aus, um die Änderungen von Alice abzurufen. Anschließend kann er eine neue Verzweigung erstellen, seine Änderungen vornehmen und die Verzweigung mit der Verzweigung main zusammenführen. Zuletzt pusht er seine Änderungen.
  • Führen Sie den git reset --hard-Befehl aus, um dorthin zurückzukehren, wo sie sich befanden, bevor sie mit dem Merge begonnen haben.
  • Er kann den Konflikt manuell mithilfe der Informationen von Git zu den betroffenen Dateien beheben.

Die meisten Entwickler scheinen die letzte Option zu bevorzugen. Wenn Git einen Konflikt bei Inhaltsversionen erkennt, werden beide Versionen des Inhalts in die Datei eingefügt. Dabei verwendet Git spezielle Formatierungen, damit Sie den Konflikt besser identifizieren und auflösen können: öffnende spitze Klammern <<<<<<<, Doppelstriche (Gleichheitszeichen) ======= und schließende eckige Klammern >>>>>>>. Der Inhalt über der Zeile mit den Gleichheitszeichen ======= zeigt Ihre Änderungen in der Verzweigung. Der Inhalt unterhalb der Trennlinie zeigt die Version des Inhalts in der Verzweigung an, mit der Sie mergen möchten.

Die Datei index.html im Repository von Bob sieht nun wie folgt aus. Beachten Sie die besondere Formatierung für den Inhalt mit den Konflikten:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <title>Our Feline Friends</title>
    <link rel="stylesheet" href="CSS/site.css">
  </head>
  <body>
    <nav><a href="./index.html">home</a></nav>
    <h1>Our Feline Friends</h1>
    <<<<<<< HEAD
    <img class="cat" src="Assets/bombay-cat-180x240.jpg">
    =======
    <img class="cat" src="assets/bobcat2-317x240.jpg">
    >>>>>>> style-cat
    <footer><hr>Copyright (c) 2021 Contoso Cats</footer>
  </body>
</html>

Beheben Sie den Mergekonflikt, indem Sie die Datei index.html bearbeiten. Da dieser Mergekonflikt schnell behoben werden kann, nehmen Sie die Änderung direkt in der Verzweigung main vor, auch wenn Sie sich noch im Verzeichnis Bob befinden.

  1. Öffnen Sie die Datei index.html, und löschen Sie dann die Zeilen mit den speziellen Formatierungen. Entfernen Sie keine anderen Anweisungen.

    <<<<<<< HEAD
    =======
    >>>>>>> style-cat
    
  2. Speichern Sie die Datei, und schließen Sie den Editor.

    Die Datei index.html enthält jetzt zwei <img>-Elemente: eines für Bobs Katzenbild und eines für das von Alice.

    Einige Text-Editoren bieten eine Integration in Git und können helfen, wenn Text angezeigt wird, der Mergekonflikte angibt. Wenn Sie die Datei index.html in Visual Studio Code öffnen, wird folgender Code angezeigt:

    Screenshot that shows how to resolve merge conflicts in Visual Studio Code.

    Wenn Sie Accept Both Changes (Beide Änderungen annehmen) auswählen, werden die Zeilen um die <img>-Elemente gelöscht, und beide Elemente bleiben erhalten.

  3. Führen Sie die folgenden Befehle aus, um die Änderung zu committen:

    git add index.html
    git commit -a -m "Style Bob's cat"
    
    

    Der Befehl git add teilt Git mit, dass der Konflikt in der Datei index.html behoben wurde.

  4. Pushen Sie die Änderungen in die Verzweigung main im Remoterepository:

    git push
    
    
  5. Schließen Sie den Vorgang durch eine Synchronisierung der Änderungen im Repository von Alice ab:

    cd ../Alice
    git pull
    
    
  6. Öffnen Sie abschließend die Datei index.html von Alice, und vergewissern Sie sich, dass ihre Version auch zwei <img>-Tags mit Katzenbildern aufweist.