Git Conflicts in VS Code: A Beginner-Friendly Guide

Prerequisites #

Before diving in, make sure you have:

• VS Code installed

• Git installed and configured

• Basic understanding of Git commands (commit, push, pull)

Quick Start Guide #

Got a conflict right now? Here's what to do:

1. Don't panic! Conflicts are normal
1. Open VS Code
1. Look for files marked with "C" or "!" in the Source Control panel
1. Right-click the file → "Resolve in Merge Editor"
1. Follow the visual guides to resolve the conflict

Now, let's learn the details...

Understanding Git Conflicts (The Basics) What's a Conflict?

Imagine you and your friend are editing the same document:

• You change a line to say "Hello World"

• Your friend changes the same line to say "Hi there"

• Git doesn't know which version to keep

That's a conflict! Git needs your help to decide what to keep.

When Do Conflicts Happen?

Conflicts typically occur when:

Your Branch:     A → B → C → D
                /
Main Branch: A → E → F → G

Both branches changed the same code differently, and now Git needs help merging them.

VS Code's Conflict Tools (Your New Best Friends) 1. Visual Indicators

VS Code helps you spot conflicts easily:

• 🔴 Red marks in the file explorer

• ❗ Exclamation marks in source control

• 🔄 Conflict markers in the file

2. Conflict Markers Explained

<<<<<<< HEAD (Your Changes)
console.log("Hello World");
=======
console.log("Hi there");
>>>>>>> branch-name (Their Changes)

Think of it like this:

• Everything between <<<<<<< HEAD and ======= is YOUR code

• Everything between ======= and >>>>>>> is THEIR code

Step-by-Step Resolution (With Pictures) 1. Finding Conflicts

When you get a conflict message, here's what to do:

1. Open Source Control:

• Click the branching icon in VS Code's sidebar

• Or press Ctrl+Shift+G (Windows/Linux) or ⌘+Shift+G (Mac)

• Look for files with "C" or "!" badge

1. Open the Merge Editor:

Choose any of these methods:

• Right-click → "Resolve in Merge Editor"

• Click "Resolve in Merge Editor" button

• Use Command Palette (Ctrl+Shift+P or ⌘+Shift+P) → type "merge editor"

2. The Merge Editor Explained

┌─────────────┬─────────────┬─────────────┐
│   YOUR      │   FINAL     │   THEIR     │
│  CHANGES    │  RESULT     │  CHANGES    │
│   (1)       │    (2)      │    (3)      │
└─────────────┴─────────────┴─────────────┘

Think of it like choosing between ice cream flavors:

1. Your flavor (left panel)
1. The mixed flavor (middle panel)
1. Their flavor (right panel)
3. Making Decisions

You have three main options:

1. Accept Yours (Ctrl+1 or ⌘1):

• Like saying "My changes are correct"

• Click "+" above your changes

1. Accept Theirs (Ctrl+2 or ⌘2):

• Like saying "Their changes are correct"

• Click "+" above their changes

1. Combine Both (Ctrl+3 or ⌘3):

• Like mixing both ice cream flavors

• Edit the middle panel directly

Real-World Examples #

1. Simple Text Conflict

// The conflict
<<<<<<< HEAD
const greeting = "Hello";
=======
const greeting = "Hi";
>>>>>>> feature/greetings

// How to think about it:
// 1. Do we want "Hello"? (yours)
// 2. Do we want "Hi"? (theirs)
// 3. Or maybe something else? (combine)

2. React Component Conflict

// The conflict
function Button() {
<<<<<<< HEAD
  return <button className="blue">Click me</button>;
=======
  return <button className="red">Press here</button>;
>>>>>>> feature/styling
}

// Think about:
// 1. Which style do we want? (blue or red)
// 2. Which text is better? ("Click me" or "Press here")
// 3. Maybe combine them?

Common Mistakes to Avoid #

❌ Mistake 1: Panic-Closing VS Code What happens: You see conflicts and close VS Code hoping they'll disappear Instead: Stay calm, conflicts are normal and fixable ❌ Mistake 2: Accepting All Changes Blindly What happens: You click "Accept All Incoming" without checking Instead: Review each change carefully ❌ Mistake 3: Forgetting to Test What happens: You resolve conflicts but don't test if the code works Instead: Always test after resolving conflicts

Best Practices (Your Conflict Checklist) #

Before Resolution:

• [ ] Take a deep breath

• [ ] Understand what each branch was trying to do

• [ ] Talk to your team if needed

During Resolution:

• [ ] Open each conflicted file in the Merge Editor

• [ ] Review changes carefully

• [ ] Think about what the code should actually do

• [ ] Make thoughtful decisions

After Resolution:

• [ ] Test the code

• [ ] Run your test suite

• [ ] Commit the changes

• [ ] Push your code

Preventing Conflicts 1. Pull Changes Often

# Start your day with:
git pull origin main

2. Communicate with Your Team

• Tell them which files you're working on

• Ask about ongoing changes

• Use feature flags for big changes

3. Keep Branches Short-Lived

• Create small, focused branches

• Merge frequently

• Keep up to date with main

Need Help? If You Get Stuck:
1. Try the "Compare Changes" feature (Ctrl+4 or ⌘4)
1. Ask a teammate to review
1. Use git merge --abort to start over
If Things Go Wrong:

# Safety commands if you need them:
git merge --abort     # Stop the merge
git reset --hard HEAD # Reset to last commit

Helpful Extensions for Handling Conflicts 1. GitLens — Git supercharged

• Extension ID: eamodio.gitlens

• Why it helps with conflicts:

• Shows who changed each line (blame annotations)

• Compare branches visually

• See commit history inline

• Helps understand why conflicts occurred

2. Git History

• Extension ID: donjayamanne.githistory

• Why it helps with conflicts:

• Visual file and line history

• Compare branches easily

• See what changed between commits

• Understand how conflicts happened

3. Git Graph

• Extension ID: mhutchie.git-graph

• Why it helps with conflicts:

• Visual representation of your Git history

• See where branches diverged

• Understand merge history

• Spot potential conflict areas before they happen

4. Merge Conflict Jump

• Extension ID: marvhen.rebase-editor

• Why it helps with conflicts:

• Jump between conflicts easily

• Keyboard shortcuts for navigation

• Shows number of remaining conflicts

• Perfect for files with multiple conflicts

How to Install These Extensions:
1. Using VS Code UI:

• Click Extensions icon in sidebar (or press Ctrl+Shift+X / ⌘+Shift+X)

• Search for extension name

• Click "Install"

1. Using Quick Open:
# Press Ctrl+P / ⌘P, then type:

ext install eamodio.gitlens

ext install donjayamanne.githistory

ext install mhutchie.git-graph

ext install marvhen.rebase-editor

<strong class="text-lg">Extension Tips for Conflict Resolution</strong>

<strong>GitLens Tips</strong>

<strong>File History View</strong>:

   • Right-click file → Show File History
   • See when changes were made
   • Understand conflict origins

<strong>Branch Comparison</strong>:

text

1. Click GitLens icon
1. Select "Search & Compare"
1. Choose branches to compare
1. See all differences visually

<strong>Git Graph Tips</strong>

<strong>Visualize Branches</strong>:

   • Click Git Graph icon in sidebar
   • See branch structure
   • Identify merge points
   • Spot conflict sources

<strong>Compare Changes</strong>:
   • Right-click on commit
   • Select "Compare with Selected"
   • View changes side by side

<strong class="text-lg">Extension Settings for Better Conflict Handling</strong>

Add these to your VS Code settings (settings.json):

json

{

// GitLens settings

"gitlens.codeLens.enabled": true,

"gitlens.currentLine.enabled": true,

"gitlens.hovers.currentLine.over": "line",

// Git settings

"git.mergeEditor.diffLayout": "inline",

"git.enableSmartCommit": true,

// Editor settings for conflicts

"editor.renderWhitespace": "all",

"editor.rulers": [80, 120],

"diffEditor.ignoreTrimWhitespace": false

}

`` Extension Keyboard Shortcuts

| Action | Windows/Linux | macOS |

| -------------------------- | ---------------- | ------------- |

| GitLens: Show File History | Alt+H | ⌥+H |

| Git Graph: View Graph | Ctrl+Shift+G G | ⌘+Shift+G G |

| Jump to Next Conflict | Alt+N | ⌥+N |

| Jump to Previous Conflict | Alt+P | ⌥+P` |

When to Use Which Extension
1. Use GitLens when:

• You need to understand code history

• Want to see who made changes

• Need to compare branches

1. Use Git Graph when:

• You need to visualize branch structure

• Want to see merge history

• Need to understand branch relationships

1. Use Git History when:

• You need detailed file history

• Want to compare specific commits

• Need to find when changes were made

1. Use Merge Conflict Jump when:

• You have multiple conflicts

• Need to navigate between conflicts quickly

• Want keyboard-driven conflict resolution

Remember: These extensions are tools to help you understand and resolve conflicts better. They don't resolve conflicts for you but make the process much more visual and manageable.

Practice Makes Perfect

The best way to learn is by practicing. Try these exercises:

1. Create a branch and make changes
1. Have a friend make different changes
1. Practice merging and resolving conflicts
1. Repeat with different types of files

Resources for Learning More #

• VS Code Git Tutorial

• Interactive Git Learning

• Git Conflict Documentation