Handle merge conflicts in VSCode

Are you finding yourself in a middle of a git merge conflict in VSCode?

A merge conflict typically occurs when there are changes to the same file locally and remotely. In other words, merge conflicts means you’re having changes in the repository (which you didn’t pulled) in the exact file you’re editing.

Git can merge the changes automatically only if the commits are on different lines or branches. If there’s competing line change or competing file change (e.g. a person deletes a file in one branch and another person edits the same file), you would have to deal with them yourself.

In this article, we will show you how to handle merge conflicts quickly and easily in VSCode without touching the command line.

Git merge conflict error

How do you tell you’re encountering a merge conflict? Simple, by looking at the error message. Users should see the following error messages every time they try to push a commit into the repository:

To [email protected]:myrepo.git ! [rejected] development -> development (non-fast-forward) error: failed to push some refs to '[email protected]:myrepo.git' To prevent you from losing history, non-fast-forward updates were rejected Merge the remote changes (e.g. 'git pull') before pushing again. See the 'Note about fast-forwards' section of 'git push --help' for details.
Code language: JavaScript (javascript)

Alternatively, if you’re trying to merge two branches and faces the following error message, it also indicates that you’re having merge conflicts.

$ git merge branch1 Auto-merging index.html CONFLICT (content): Merge conflict in index.html Automatic merge failed; fix conflicts and then commit the result. JohnDoe (Master *+|MERGING) new-git-project1
Code language: JavaScript (javascript)
$ git merge branch1 error: Merging is not possible because you have unmerged files. hint: Fix them up in the work tree, and then use 'git add/rm <file>' hint: as appropriate to mark resolution and make a commit. fatal: Exiting because of an unresolved conflict.
Code language: JavaScript (javascript)

Merge line changes/resolve conflicts in VSCode

Suppose you’ve performed a git push in VSCode and end up with the merge conflicts, following the steps below to properly handle them.

  • Switch to the Source Control tab, where the conflicts and changes are shown.Merge line changes/resolve conflicts in VSCode
  • Open the file which has merge conflicts inside, you will see lines changes marked with a few options : Accept Current Change, Accept Incoming Change, Accept Both Changes, Compare Changes. Choose one that suits your scenario: Merge line changes/resolve conflicts in VSCode
  • Once youv’e done marking which changes needs to be kept, stage the changes back to the repo by clicking Plus sign button next to the filenames. Merge line changes/resolve conflicts in VSCode
  • Now you can commit and sync the repository like you normally do.

Review merge conflicts side-by-side

A beginner may have 3 or 5 line conflicts, but developers need a more comprehensive way to compare differences before deciding which changes to keep. Current inline diffs are not practical for conflicts with over 20 lines even we have 2K and 4K monitors.

IDEs like Visual Studio have already incorporated comprehensive merge editor which even supports a three-way merge. Unfortunately, VSCode haven’t been able to catch up to the others. However, there is a workaround to achieve a “side-by-side” experience from VSCode.

By default, you see all conflicts “top down”, but for each one, clicking on Compare Changes would open a tab with a side-by-side diff.

Review merge conflicts side-by-side

Accept all merge conflicts

If you have a huge list of merge conflicts (think 50+), manually going through each and every of them would be an unproductive task.

Fortunatelly, VSCode have a way to batch accept incoming or current changes. We find it far easier than manually accept incoming/current changes in Git using command line interface.

All you need to do is opening Command Palette and search for “merge”, you can see the Accept all current changes along with all other possible options. Choose the one which suits your specific scenario.

We hope that the short article gave you useful information on how to handle merge conflicts in VSCode and further improve your programming workflow. You may want to check out our other guides on Automate your workflow with VSCode Tasks , Format JSON in VSCode or Fix IntelliSense in VSCode. All our VSCode tutorials can be found at VSCode Tutorials. If you have any question, don’t hesitate to let us know in the comments section below.

Leave a Comment