iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Git & Source Control

VS Code’s built-in Git integration covers staging, committing, pushing, branching, conflict resolution — without leaving the editor. GitLens makes it powerful.

Source Control panel + GitLens

EXAMPLE
// 1) Source Control panel — Ctrl+Shift+G (Cmd+Shift+G on macOS)
// Shows: changes, staged changes, commit message box, branch + sync status

// 2) Stage / unstage from the UI
// - Hover a file → click + to stage
// - Click - to unstage
// - Right-click → Stage Changes / Discard Changes / Open Changes (diff)

// 3) Stage individual lines / hunks
// - Open the diff view of a file
// - Right-click a hunk → Stage Selected Ranges
// - Or in the gutter: click the +/- marker to stage that hunk

// 4) Commit
// - Type message in the Source Control panel
// - Ctrl+Enter to commit
// - Status bar arrows: ↑ pushes, ↓ pulls

// 5) Settings to make Git smoother (.vscode/settings.json or user settings)
{
    "git.autofetch":               true,
    "git.confirmSync":             false,        // skip 'sync?' confirmations
    "git.enableSmartCommit":       true,         // commits staged if nothing staged
    "git.smartCommitChanges":      "tracked",
    "git.suggestSmartCommit":      false,
    "git.openRepositoryInParentFolders": "always",
    "diffEditor.ignoreTrimWhitespace": false,
    "git.allowForcePush":          true,
    "git.useForcePushWithLease":   true          // safer force push (recommended)
}

// 6) Branching
// Command Palette → 'Git: Checkout to…' / 'Git: Create Branch from…'
// Status bar (bottom-left) shows current branch — click to switch

// 7) Merge conflicts
// VS Code highlights conflict markers with buttons:
//   Accept Current Change | Accept Incoming Change | Accept Both | Compare Changes
// Use the 3-way merge editor (introduced 2022): Source Control → 'Resolve in Merge Editor'

// 8) Diff view
// Click any file → diff against HEAD
// Multi-file diff: Source Control → 'Open Changes' on each
// External diff tools: vscode comes with one; configure git config diff.tool = vscode

// 9) Useful commands (Command Palette: Ctrl+Shift+P)
//   Git: Push / Pull / Sync
//   Git: Checkout to…
//   Git: Create Branch / Delete Branch
//   Git: Merge Branch / Rebase Branch
//   Git: Stash / Pop Stash / Apply Stash
//   Git: Show Git Output  — see the underlying commands
//   Git: Clone
//   Git: Init Repository

// 10) Keyboard shortcuts you should memorise
//   Ctrl+Shift+G    open Source Control
//   Ctrl+Enter      commit (with cursor in message box)
//   Ctrl+Shift+P    Command Palette
//   Alt+F3 / F3     prev/next change in editor

// === GitLens — the must-have extension ===
// eamodio.gitlens

// 1) Inline blame — author of every line, hover for details
//    "gitlens.currentLine.enabled": true
//    "gitlens.codeLens.enabled":    true       // adjustable per file type

// 2) File history — right-click → 'Open File History' or use the GitLens sidebar
//    See every commit that touched this file; click to diff against working tree

// 3) Compare branches / commits — drag-and-drop in the GitLens panel

// 4) Repositories panel — branches, remotes, tags, contributors at a glance

// 5) Settings
{
    "gitlens.codeLens.enabled":               false,        // can be noisy
    "gitlens.currentLine.enabled":            true,
    "gitlens.hovers.currentLine.over":        "line",
    "gitlens.statusBar.enabled":              true,
    "gitlens.advanced.messages": {
        "suppressGitMissingWarning": true
    }
}

// === GitHub Pull Requests + Issues — github.vscode-pull-request-github ===

// 1) Sign in — Command Palette → 'GitHub: Sign in'

// 2) View / create PRs without leaving VS Code
//    - Sidebar → GitHub icon
//    - 'GitHub Pull Requests: Create Pull Request'
//    - Review file-by-file, leave comments inline

// 3) Checkout a PR
//    Right-click a PR → 'Checkout' — switches branch + pulls

// 4) Address review comments inline
//    Resolve, react, push fixups — all from the editor

// === Common workflows ===

// A) Feature branch + PR
//   1. Create branch (status bar → '+ Create new branch')
//   2. Code; stage hunks selectively; commit with a good message
//   3. Push (status bar arrow)
//   4. 'Create Pull Request' from the GitHub panel
//   5. Iterate on feedback
//   6. Merge from the PR view

// B) Resolve a conflict
//   1. Pull lands a conflict
//   2. Open the conflicted file → buttons in the editor
//   3. Or 'Resolve in Merge Editor' for 3-way view
//   4. Stage; commit with a meaningful merge message

// C) Cherry-pick from another branch
//   1. Command Palette → 'Git: Cherry Pick…'
//   2. Pick the commit; resolve conflicts if any

// D) Interactive rebase (still easier in terminal for now)
//   git rebase -i origin/main
//   - or use the GitLens rebase editor in newer versions

// === Tips ===
//   • Sign commits via SSH or GPG — VS Code respects your git config
//   • For monorepos: 'Multi-root workspaces' let you have multiple repos open
//   • 'Git: View File History' is faster than running `git log` mentally
//   • Use `.vscode/extensions.json` to recommend GitLens + PR plugins to teammates
//   • Conflict markers in unsaved files — VS Code warns before commit

Why it matters

GitLens + the built-in Source Control panel cover 90% of daily git tasks visually. Drop to the terminal for interactive rebase, complex history surgery, or anything VS Code hasn’t shipped a great UI for yet.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
// Source Control view shows changes, lets you stage, commit, push.
// Inline blame: GitLens extension.
// View graph: Git Graph extension.
Try it Yourself »

Discussion

Loading…