Resolve Merge Conflicts in VS Code Merge Editor

Merge conflicts occur when competing changes are made to the same line of a file on different branches. Visual Studio Code (VS Code) features a powerful, built-in 3-way merge editor that simplifies resolving these conflicts by showing the incoming changes, your current changes, and the final result side-by-side. This article provides a clear, step-by-step guide on how to access and use the VS Code merge editor to resolve code conflicts and successfully complete your Git merges.

Step 1: Access the Merge Editor

When Git detects a merge conflict during a merge, pull, or rebase, VS Code will flag the affected files.

1. Open the Source Control view (Ctrl+Shift+G or Cmd+Shift+G).
2. Click on the conflicted file under the Merge Changes section to open it.
3. At the bottom right of the file editor, click the Resolve in Merge Editor button.

Step 2: Understand the 3-Way Layout

The merge editor splits your screen into three main panes:

• Incoming (Top Left): Shows the changes from the branch you are trying to merge into your current branch.
• Current (Top Right): Shows the changes on your active local branch.
• Result (Bottom): Displays the output file. This is where you build the final code version that will be committed.

Step 3: Resolve the Conflicts

You can navigate through each conflict and decide how to resolve them using the editor’s interactive controls.

1. Use the navigation arrows in the top toolbar to jump between conflicts.
2. For each conflict, look at the checkboxes in the Incoming and Current panes:
   • Check Accept Incoming to keep the incoming branch’s changes.
   • Check Accept Current to keep your local branch’s changes.
   • Check Accept Both to combine both sets of changes in the order they appear.
3. If you need to make custom manual adjustments, click directly inside the Result pane at the bottom and edit the code manually.

Step 4: Complete the Merge

Once you have resolved all conflicts in the file:

1. Look at the bottom right corner of the screen and click the Complete Merge button. This action automatically stages the resolved file.
2. If you have multiple conflicted files, repeat this process for each file listed under Merge Changes.
3. Once all files are resolved and staged, go to the Source Control panel, write a commit message, and click Commit to finalize the merge.