VS Code: Git & Source Control

VS Code has a full-featured Git client built in. The Source Control panel (Ctrl+Shift+G), diff editor, merge conflict resolution, and extensions like GitLens make it a powerful alternative to command-line Git for day-to-day work.

Built-in Git Panel

# Source Control Panel: Ctrl+Shift+G (Cmd+Shift+G on Mac)
# Shows: staged changes, unstaged changes, merge conflicts

# Keyboard shortcuts for Git operations:
# Stage current file:          (click + icon in Source Control panel)
# Stage a hunk:                Open diff view → click + on a hunk
# Commit:                      Ctrl+Enter in Source Control message box
# Push:                        Sync button in status bar (bottom-left)

# Stage individual hunks without CLI:
# 1. Click the file in Source Control panel (opens inline diff)
# 2. Hover over a change block → click "Stage Change" (+) icon
# 3. Or: right-click → "Stage Selected Ranges"

# Command Palette Git commands (Ctrl+Shift+P):
# Git: Checkout to...          (switch branches)
# Git: Create Branch...        (new branch from current)
# Git: Merge Branch...         (merge into current)
# Git: Rebase Branch...        (rebase current onto another)
# Git: Stash                   (stash all uncommitted changes)
# Git: Pop Stash               (apply most recent stash)
# Git: Fetch                   (git fetch all remotes)
# Git: Pull                    (git pull)
# Git: Push                    (git push)
# Git: Revert File             (discard changes in file)
# Git: Open Changes            (open diff view for current file)

# Timeline view (right-click file → Open Timeline)
# Shows all commits that touched the file
# Click any commit to see diff at that point in history

Diff View & Merge Conflict Resolution

# Opening diffs:
# Click file in Source Control panel → inline diff
# Ctrl+Shift+G → click file → opens side-by-side diff
# Compare any two files: right-click file → "Select for Compare",
#   then right-click second file → "Compare with Selected"

# Diff editor keyboard shortcuts:
# F7 / Shift+F7    Navigate to next/previous diff hunk
# Alt+F5           Navigate to next/previous change
# Ctrl+K Ctrl+N    Go to next difference
# Ctrl+K Ctrl+P    Go to previous difference

# Merge conflict resolution UI:
# VS Code shows conflict markers as interactive UI:
# - "Accept Current Change" (keep HEAD / your branch)
# - "Accept Incoming Change" (take the incoming branch changes)
# - "Accept Both Changes"   (keep both, stacked)
# - "Compare Changes"       (open 3-way diff view)

# Three-way merge editor (VS Code 1.69+):
# Ctrl+Shift+P → "Git: Open Merge Editor"
# Shows: Incoming (left), Current (right), Result (bottom)
# Click checkboxes to accept individual hunks
# Edit Result pane directly for custom resolution

# After resolving all conflicts:
# Stage the file (+ button or git add)
# Commit the merge (Ctrl+Enter)

GitLens Extension

GitLens supercharges the built-in Git capabilities. Install: Extensions panel → search "GitLens" → Install.

# Key GitLens features:

# 1. Inline blame (shown at end of every line)
# Hover to see full commit details, PR link, diff
# Toggle: Ctrl+Shift+P → "GitLens: Toggle Line Blame"

# 2. File annotations (full-file blame)
# Toggle: Ctrl+Shift+P → "GitLens: Toggle File Blame"
# Or: click "Toggle File Blame" button in editor title

# 3. Commit graph (GitLens Pro, or built-in in VS Code 1.73+)
# Ctrl+Shift+P → "Git: Show Commit Graph"
# Visual branch graph, clickable commits

# 4. Code lens (above functions - shows last change, authors)
# Enabled in settings: gitlens.codeLens.enabled: true

# 5. Compare branches/commits
# GitLens panel → Commits → right-click any commit → "Open Changes"
# GitLens panel → Branches → right-click → "Open Branch Changes"

# 6. Git worktrees (check out multiple branches simultaneously)
# GitLens panel → Worktrees → "Create Worktree"

# Useful GitLens settings in settings.json:
{
  "gitlens.codeLens.enabled": true,
  "gitlens.currentLine.enabled": true,
  "gitlens.blame.highlight.enabled": true,
  "gitlens.statusBar.enabled": true
}

Git Graph & Branch Visualization

# Built-in Commit Graph (VS Code 1.73+, no extension needed)
# Source Control panel → top-right "..." menu → "Show Commit Graph"
# Or: Ctrl+Shift+P → "Git: Show Commit Graph"

# Features:
# - Visual branch graph with colors per branch
# - Click commit to see files changed, diff
# - Right-click commit → cherry-pick, reset, revert, create tag
# - Filter by branch, author, date
# - Search commits

# Git Graph extension (popular alternative, more features)
# Extensions → search "Git Graph" by mhutchie
# Bottom status bar → "Git Graph" button
# Right-click any commit for: checkout, cherry-pick, merge, rebase,
#   create branch, create tag, revert, reset to, push, copy SHA

# VS Code Source Control status bar (bottom left):
# Shows: branch name, sync status (↑2 ↓1)
# Click: opens branch picker
# Click ↑/↓ arrows: push/pull

# Keyboard shortcuts:
# Ctrl+Shift+G G    Open Source Control panel
# Ctrl+Shift+P      Then type any Git command