cover


Git for Beginners: Part 5

Merge Conflicts


Published: April 5, 2020

#

WHAT IS A MERGE CONFLICT? AND WHAT CAUSES A MERGE CONFLICT?

Git does a good job of merging our code automatically, but every once in a while, it will run into an issue where it doesn't know what to do.

This usually happens when two people change the same line of code, or if one person deletes a line that someone else modifies. Git needs to know which change is the right one. It will mark the file as having a conflict. Before you continue working, you'll need to resolve the issue.

💡
Note
A merge conflict can only happen on your local machine, not on the server. While you might have to pause to resolve the issue, no one else will, since the issue is on your computer.

Let's look at some actual code.

This is my index.html file. Plain Jane.

<html>
  <head>
    <title>Contact Me</title>
  </head>
  <body>
    <main></main>
  </body>
</html>

We're going to pretend like we're 2 different people (Amy #1 and Amy #2), trying to make 2 different changes.

AMY #1: Let's add a contact link to the website. Since the contact page isn't ready yet, let's make the contact link an email address.

AMY #1: We'll create a new branch to make our change on. Within the terminal:

git checkout -b add-email-address

AMY #1: Within our main tag, let's add the following HTML:

<main>
  <a href="mailto:hello@selfteach.me">Please contact me!</a>
</main>

AMY #1: Let's commit it.

git add .
git commit -m "Added an email address"

I just want to point out that Amy #1's code has not been merged into master yet.

AMY #2: Let's pretend that the contact page is finished now. Let's add a link to the contact page. I'm on the master branch and will create a new branch for our change:

git checkout master
git checkout -b add-website-link

AMY #2: Now, on my index.html file, I'm going to add the following code in main

<main>
  <a href="http://selfteach.me/contact">Please contact me!</a>
</main>

AMY #2: Now let's commit it.

git add .
git commit -m "Added a link to the contact page"

I'm back now. We need to merge the email address to our master branch.

git checkout master
git merge add-email-address

No problems. Sweet. 😎

Now, let's merge the website link:

git merge add-website-link

Oh no! 😱

git merge

We hit our merge conflict.

This is because we changed the same line of code in 2 different branches.

Before you start to panic, remember you can always undo a merge and go back to the way things were before we hit the conflict. Don't worry about breaking things. To undo, within the Terminal, type:

git merge --abort

But, we can handle this!

Our message tells us there's an issue with index.html. We know which file has problems. In VS Code, in the file browser, you'll also notice a C for "Conflict" next to the file name.

Let's look at the file:

merge conflict in vs code

Everything between the <<<<<<< HEAD and ======= is what was on your master branch.

Everything between the ======= and >>>>>>> add-website-link is what was on the add-website-link

Let's pull this up in a different app, in case that helps you visualize what's happening here.

This is Kaleidoscope.

merge conflict in kaleidoscope

The left pane shows what is on our master branch. The right pane shows us our new branch. The center pane will be the final file that we create.

merge conflict in kaleidoscope  named panels

Kaleidoscope will tell you in the bottom right corner how many conflicts we have. We just have 1, but if we had more, we could cycle through all the issues.

merge conflict in kaleidoscope 2

Then, there are 2 buttons in the middle at the bottom. You can either move the code from the master branch into the center column or the code form the new branch.

merge conflict in kaleidoscope 3

Once you've resolved everything withini Kaliedoscope, hit save.

I also want to show you how to resolve this in VS Code, too.

In VS Code, you'll see some quick links at the top:

  • Accept the Current Change
  • Accept the Incoming Change
  • Accept Both Changes
  • Compare the Changes

VS Code Quick Links

If you click Compare the Changes it will take you to a view that looks a little more link Kaleidoscope. You can see with the arrow at the top, the code on the left contains the current changes and the code on the right is the incoming changes. Unfortunately, you have to close that view in order to resolve the issue.

Compare Changes within VS Code

I could click on "Accept the Incoming Change", but sometimes the solution isn't as cut and dry as one or the other. Sometimes, you'll need pieces of both. So another thing you do is just remove those extra characters and get this file to look the way it should.

contact file

Now, hit save and go back to your Terminal. You'll have to add a commit to resolves the changes:

git add .
git commit -m "Resolved merge conflict"

I'm going to pull this up in Tower, because I want you to see what this history looks like:

merge in tower

I have our initial commit. Then, I merged in our email address. Then, we had another branch, where we added a link to the contact page and merged that in. This commit here at the top, commemorates our merge conflict and its resolution. We did it, though!

Done.

All the code within this video is posted on GitHub. Feel free to download it and do whatever with it.


Comments