git

Merge Conflicts

git for Beginners

Published: April 23, 2020

When we're merging branches or pushing code, git does a good job of handling all those updates automatically. However, every once in a while, you may run into an issue where git doesn't know what to do. It doesn't know the best way to merge your files. This is called a merge conflict.

If you've never seen this before, it can be a little scary. But fear not, today, we'll talk through how to resolve these.

git is a big part of development because it's one way that developers work together. If you're not sure what git is, why you would use it, how to get it installed, check out some of the other posts in this series:

Alrighty, righty.... Merge Conflicts.

What is a Merge Conflict? And what causes it?

Like I mentioned earlier, 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 changed the same line of code, or if one person decided deleted a line that someone else tried to modify. 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.

Something worth noting is that a merge conflict can only happen on your local machine, not on the server. While you might have to pause to resolve the issue, but 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, trying to make 2 different changes.

AMY #1

Hi! Looks like we want to add a contact link to the website...since the contact page isn't ready yet, let's make the contact link an email address.

Within the terminal:

git checkout -b add-email-address

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

1
2
3

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

Let's commit it.

1
2

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

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

AMY #2

The contact page is finished, let's add a link to the contact page. I'm on the master branch. I'm going to create a new branch:

1
2

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

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

1
2
3

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

Now let's commit it.

1
2

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

AMY NARRATOR: I'm back now. Now, I'm going to merge the email address to our master branch.

1
2

git checkout master
git merge add-email-address

No problems. Sweet.

Now, let's merge in the website link:

git merge add-website-link

Oh, no!

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 the conflict occurred. In other words, don't worry about breaking things. Within the Terminal, we just need to type:

git merge --abort

But we can handle this!

Our message tells us there's an issue with index.html. So, we know which file has problems. If we look our file in VS code, you can see there's a C for "Conflict" next to the file name.

Let's look at the file:

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

I'm going to pull this up in a different app in case that helps you visualize what's happening here.

This is Kaleidoscope. I'll include a link in the description below. Sometimes I use this app because it integrates well with Tower.

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.

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. 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. With this program, once you've resolved everything, you can hit save. But, I want to show you how to resolve this in VS Code, too.

I'm going to go back to VS Code. You can see there are some quick links at the top: to either:

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

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.

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.

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

1
2

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:

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 is posted on GitHub. Feel free to download it, play with it, modify it, share it, use it, whatever. Have at it!

Comments

This industry moves fast, but you can stay up to date:

Receive a weekly email of the Internet's best from articles, to tutorials, to pro tips.