How to Fix Git Merge Conflicts in VS Code: A Step-by-Step Guide

There is a specific kind of dread that hits when you run git merge and see the words “CONFLICT (content): Merge conflict in…” flashing in your terminal. For a long time, I handled this by manually hunting for those awkward <<<<<<< and ======= markers in my text, which felt like searching for a needle in a haystack of code.

However, learning how to fix git merge conflicts in VS Code changed my entire workflow. Modern VS Code has a sophisticated 3-way merge editor that turns a stressful manual process into a visual selection task. In this guide, I'll walk you through the exact process I use to resolve conflicts without accidentally deleting my teammate's hard work.

Prerequisites

• Visual Studio Code installed.
• Git installed and configured on your machine.
• A project with at least two branches that have modified the same line of the same file.
• Basic familiarity with git checkout and git commit.

Step-by-Step: Resolving Merge Conflicts

Step 1: Trigger the Conflict

Conflicts happen when Git can't automatically decide which change to keep. Usually, this happens during a merge or a pull. Try merging a feature branch into your main branch:

git checkout main
git merge feature-branch

Once you see the conflict warning in the terminal, VS Code will highlight the conflicted files in the Source Control tab (the branch icon on the left sidebar) with a red 'C' next to the filename.

Step 2: Choosing Your Resolution Method

When you open a conflicted file, VS Code offers two ways to handle the fix. In my experience, the traditional inline markers are faster for tiny changes, but the 3-way Merge Editor is a lifesaver for complex logic changes.

Method A: Using Inline Markers

You will see the conflict highlighted in colors (usually blue and green). Above the highlighted block, VS Code provides clickable shortcuts:

• Accept Current Change: Keeps the changes from the branch you are currently on.
• Accept Incoming Change: Keeps the changes from the branch you are merging in.
• Accept Both Changes: Keeps both blocks of code, which you'll likely need to clean up manually.

Method B: The 3-Way Merge Editor

For larger conflicts, click the "Resolve in Merge Editor" button at the bottom right of the editor window. This opens a specialized view where you see:

• Left Pane: Your current changes (Current).
• Right Pane: The incoming changes (Incoming).
• Bottom Pane: The Result—this is what the final file will look like.

As shown in the image below, you can check the boxes for the specific changes you want to keep from either side, and the result pane updates in real-time. This prevents the common mistake of deleting a necessary bracket or semicolon during a manual edit.

Step 3: Finalizing the Fix

Once you have resolved all conflicts in the file, you must tell Git that the conflict is settled. I always double-check the file for any remaining markers before proceeding.

# Stage the resolved file
git add .

Now, complete the merge by committing the changes:

git commit -m "chore: resolve merge conflicts in [file name]"

Pro Tips for Smoother Merges

To avoid spending hours fixing conflicts, I've adopted a few habits that drastically reduce their frequency:

• Merge Often: Don't let your feature branch diverge for weeks. Merge main into your branch daily.
• Small Commits: Smaller, atomic commits make it easier to identify exactly where a conflict occurred.
• Communication: If you're editing a core config file, let your team know.
• Use Stashing: If you aren't ready to commit but need to pull updates, use a git stash multiple changes guide to clear your working directory first.

Troubleshooting Common Issues

What if I mess up the resolution?

If you realize you accepted the wrong change and the code is broken, don't panic. You can abort the entire merge and start over with:

git merge --abort

Conflict markers aren't showing up?

Ensure you have the git.mergeEditor setting enabled in VS Code. Go to Settings $\rightarrow$ search for Merge Editor $\rightarrow$ ensure Git: Merge Editor is checked.

I renamed a file, and now everything is a conflict!

This is a common headache. If you've had to rename git branches locally and remotely or rename files across branches, Git might lose track of the history. Try using git merge -X rename-threshold=20% to help Git recognize renamed files.

What's Next?

Now that you know how to fix git merge conflicts in VS Code, you should look into Git Rebase. While merging creates a merge commit, rebasing rewrites history for a cleaner linear timeline. It's a bit more advanced but essential for professional workflows.