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…