Resolving Merge Conflicts

Overview

Merge conflicts typically happen when two committed changes are competing for the same line in the same file. Resulting in Git not knowing which one to choose, so it asks you to resolve it. This is completely normal and occasionally happens in team projects.

By the end of this task, you will be able to:

• Understand why merge conflicts occur
• Identify conflict markers in a file
• Resolve a merge conflict using VS Code
• Complete the merge after resolving conflicts

---

Understanding How Conflicts Happen

A merge conflict occurs when:

1. You create a branch from main and edit a file (e.g., line 5 of index.html).
2. Someone else (or you, on another branch) also edits the same line on main.
3. When you try to merge your branch into main, Git finds two different versions of the same line and does not know which one to keep.

When Conflicts Do Not Happen

If two branches edit different files, or different lines in the same file, Git can merge them automatically without any conflict. Conflicts only happen when the exact same lines are changed in both branches.

---

Creating a Conflict (For Practice)

To practice resolving a conflict, we will intentionally create one.

Making a Change on Main

1. Ensure you are on the main branch:

   git checkout main
   

2. Open index.html (or any file in the project) and change the <h1> tag on line 1 to:

   <h1>Welcome to My Website</h1>
   

3. Save the file by pressing Ctrl+S.

Enabling Auto Save

You can enable auto save in VS Code by going to File > Auto Save. This will automatically save your files whenever you make changes, so you do not need to press Ctrl+S each time.

1. Stage and commit the change:

   git add index.html
   git commit -m "Update heading on main"
   

Making a Conflicting Change on a Feature Branch

1. Create and switch to a new branch:

   git checkout -b feature/update-heading
   

2. Reset the branch back one commit so it does not have the change you just made on main:

   git reset HEAD~1 --hard
   

   Important

   This step is necessary for the exercise to create a conflict. The git reset --hard command will discard changes, so only use it when you are sure you want to go back.

3. Edit the same line in index.html with a different heading:

   <h1>Welcome to Our Amazing Website</h1>
   

4. Save the file by pressing Ctrl+S.

5. Stage and commit the change:

   git add index.html
   git commit -m "Update heading on feature branch"
   

Triggering the Conflict

1. Switch back to main:

   git checkout main
   

2. Run the merge command:

   git merge feature/update-heading
   

You should see:

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

Success

If you see the CONFLICT message, you have successfully triggered a merge conflict. This is expected, so do not panic!

---

Identifying the Conflict Markers

When a conflict occurs, Git inserts special markers into the conflicted file to show you both versions.

1. Open the conflicted file (index.html) in VS Code.

You will see something like this:

Here is what each marker means:

Marker	Meaning
<<<<<<< HEAD	The start of the current branch's version (in this case, main)
=======	The divider between the two versions
>>>>>>> feature/update-heading	The end of the incoming branch's version

Everything between <<<<<<< HEAD and ======= is what is currently on main. Everything between ======= and >>>>>>> feature/update-heading is what is on the feature branch.

VS Code Highlighting

VS Code will highlight the conflicting sections and display clickable options above the conflict:

• Accept Current Change - keeps the main version
• Accept Incoming Change - keeps the feature branch version
• Accept Both Changes - keeps both versions, one after the other
• Compare Changes - opens a side-by-side diff view

---

Resolving the Conflict

You have three options for resolving the conflict:

Option A: Accept One Version

1. Click Accept Current Change or Accept Incoming Change in VS Code to keep one version and discard the other.
2. Save the file by pressing Ctrl+S.

Option B: Accept Both

1. Click Accept Both Changes to keep both lines. This is useful when both changes are needed.
2. Save the file by pressing Ctrl+S.

Option C: Edit Manually

1. Delete the conflict markers (<<<<<<<, =======, >>>>>>>) from the file.

2. Write the final version yourself. For example:

   <h1>Welcome to Our Amazing Website</h1>
   

3. Save the file by pressing Ctrl+S.

Remove ALL Conflict Markers

If you choose to edit manually, make sure you delete all of the conflict markers. Leaving them in will break your code. Your file should look like a normal file with no <<<<<<<, =======, or >>>>>>> characters anywhere.

---

Completing the Merge

After resolving the conflict, you need to tell Git that the conflict is fixed.

1. Save the file by pressing Ctrl+S.

2. Stage the resolved file:

   git add index.html
   

3. Commit the merge:

   git commit -m "Resolve merge conflict in index.html heading"
   

4. Push the resolved merge to GitHub:

   git push
   

Success

If your push succeeds and the file looks correct on GitHub, you have successfully resolved a merge conflict! Congratulations!

---

Verifying on GitHub

As a final check, confirm your resolution appears correctly on GitHub.

1. Open your repository on github.com.

2. Check that the merge commit appears in the commit history.

3. Click on the resolved file to confirm it contains your final version.

4. Verify that no conflict markers are left in any files.

---

Conclusion

In this task, you learned how to:

• Understand why merge conflicts happen
• Read and interpret conflict markers (<<<<<<<, =======, >>>>>>>)
• Resolve conflicts using VS Code's built-in tools or by editing manually
• Complete a merge after resolving conflicts with git add, git commit, and git push

Merge conflicts are a normal part of working with Git, especially in teams. The more you practice, the less intimidating they become. You now have all the core Git skills you need to clone, commit, branch, merge, and resolve conflicts!