Git for Beginners: Part 5
Published: April 5, 2020
- git Part 1: What is git? Why Use it? How to install it.
- git Part 2: How to Use git
- git Part 3: Fixing Commits
- git Part 4: Branching
- You are here >> git Part 5: Resolving Merge Conflicts
- git Part 6: Writing Pull Requests
- git Part 7: Working with a Team
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.
NoteA 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:firstname.lastname@example.org">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> <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! 😱
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:
Everything between the
<<<<<<< HEAD and
======= is what was on your master branch.
Everything between the
>>>>>>> add-website-link is what was on the
Let's pull this up in a different app, in case that helps you visualize what's happening here.
This is 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.
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.
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
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:
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!
All the code within this video is posted on GitHub. Feel free to download it and do whatever with it.
This industry moves fast, but
you can stay up to date:
Receive a weekly email of the internet's best from articles, tutorials, to pro tips.