Resolving git conflicts with VS Code

Resolving conflicts in Visual Studio Code (VS Code) using its built-in conflict resolution tools is a straightforward process that leverages its graphical interface to help you handle conflicting changes in a file. Here’s an explanation of how this works:

What Are Conflicts?

Conflicts occur when Git cannot automatically merge changes from different branches because the same lines of code were modified in multiple places. Git marks these conflicts in the affected files, and they must be resolved manually.

Steps to Resolve Conflicts in VS Code

1. Identify the Conflicted Files

  1. When you run a Git command like git merge, git pull, or git rebase, and conflicts occur, Git stops the operation and lists the conflicted files.bashCopyEditgit status Look for files marked as “both modified.”

2. Open VS Code

  1. Open the project in VS Code where the conflicted files reside.
  2. The Source Control tab (accessible via the sidebar or Ctrl+Shift+G/Cmd+Shift+G) will highlight conflicted files under the Merge Changes section.

3. Open the Conflicted File

  1. Click on the file name in the Source Control tab, or open it directly in the editor.
  2. VS Code will display the conflicting sections visually.

4. Understand the Conflict Markers

When you open a conflicted file, you’ll see sections marked with conflict markers:

<<<<<<< HEAD
Changes from your branch (HEAD)
=======
Changes from the incoming branch
>>>>>>> branch-name
  • HEAD: Represents the changes in your branch.
  • Incoming changes: Represents changes from the branch you’re merging or pulling from.

5. Use VS Code’s Conflict Resolution Tools

VS Code provides buttons and options to resolve the conflicts directly in the editor.

Conflict Actions:

  1. Accept Current Change:
    • Keeps the changes in your branch (HEAD) and discards the incoming changes.
  2. Accept Incoming Change:
    • Keeps the changes from the branch being merged or pulled.
  3. Accept Both Changes:
    • Combines both changes into the final version.
    • Useful if the changes don’t overlap but affect the same lines.
  4. Compare Changes:
    • Opens a side-by-side comparison of both changes for a better view.

Each of these options appears as a clickable button above the conflicted section.

Manual Edits:

If none of the pre-defined options work for your situation, you can manually edit the file to create a custom resolution.

6. Save the File

Once you’ve resolved the conflict:

  1. Save the file (Ctrl+S / Cmd+S).
  2. The conflict markers (<<<<<<<, =======, and >>>>>>>) will no longer appear.

7. Stage the Resolved File

After resolving the conflicts:

  1. Stage the resolved file:
    git add <file-name>
    Or use the Stage Changes button in the Source Control tab in VS Code.

8. Complete the Merge/Rebase

Once all conflicts are resolved and staged, complete the Git operation:

  • For a merge:
    git commit
  • For a rebase:
    git rebase --continue

Example of VS Code Conflict Resolution Workflow

  1. You run git pull origin main and encounter conflicts.
  2. Open VS Code. Go to the Source Control tab and locate the conflicted files.
  3. Open a conflicted file, and you’ll see the conflicting sections marked with options to resolve.
  4. Click Accept Current Change, Accept Incoming Change, or Accept Both Changes, or edit manually.
  5. Save the file, then stage it with git add.
  6. Complete the merge with git commit.

Tips for Efficient Conflict Resolution

  • Use Compare Changes for a clearer understanding of the differences.
  • Regularly pull and merge changes to reduce the chances of conflicts.
  • Communicate with your team about code changes to avoid overlapping edits.

By using VS Code’s tools, resolving conflicts becomes more visual and intuitive, minimizing the chances of errors and ensuring smooth collaboration.

Scroll to Top