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.
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.
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.
We're going to pretend like we're 2 different people, trying to make 2 different changes.
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:
Within our tag, let's add the following HTML:
Let's commit it.
AMY NARRATOR: I just want to point out that Amy #1's code has not been merged into master yet.
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:
Now, on my index.html file, I'm going to add the following code in
Now let's commit it.
AMY NARRATOR: I'm back now. Now, I'm going to merge the email address to our master branch.
No problems. Sweet.
Now, let's merge in the website link:
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:
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 for "Conflict" next to the file name.
Let's look at the file:
Everything between the and is what was on your master branch.
Everything between the and is what was on the
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:
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:
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 is posted on GitHub. Feel free to download it, play with it, modify it, share it, use it, whatever. Have at it!
Receive a weekly email of the Internet's best from articles, to tutorials, to pro tips.