Git Integration
🔀 Git Integration
git1-git3) taught git from the command line — staging, committing, branching, merging. This chapter covers the exact same operations through VS Code's visual Source Control panel: same underlying git repository, no new tool, just a different way to drive it.
📋 The Source Control Panel
Ctrl+Shift+G (Cmd+Shift+G on macOS), or the branch icon in the Activity Bar (Chapter 1 — the one with the small number badge whenever there are uncommitted changes), opens the Source Control panel. It lists every change in your working directory, grouped into Changes (modified or untracked files) and Staged Changes.
➕ Staging & Committing
Hovering a file under Changes reveals a + icon — clicking it stages that file, the exact equivalent of git add <file>. The + on the Changes header itself stages everything at once (git add .). Type a commit message into the box at the top of the panel, then click the checkmark icon — the same commit that git commit -m "..." would produce.
👁️ Viewing Diffs Inline
Clicking any changed file in the Source Control panel opens a diff view automatically — the old and new versions side by side (or inline, depending on your settings), with additions highlighted green and removals highlighted red. No need to run git diff manually and read raw +/- output in a terminal — this is that same information, rendered visually.
☁️ Pushing, Pulling, and Syncing
The Sync Changes button (or the ... menu at the top of the panel) exposes Push, Pull, and a combined Sync — pull then push in one action. The Status Bar (Chapter 1) shows a small icon with two numbers whenever your branch is ahead/behind its remote, updating live as you commit.
🌿 Branches
The current branch name appears in the Status Bar's bottom-left corner — clicking it opens a quick-pick list of every local and remote branch, letting you switch or create a new one without recalling git checkout -b <name> syntax from memory.
🧩 Resolving Merge Conflicts Visually
When a merge produces a conflict, VS Code annotates the file directly in the editor with clickable inline actions above each conflicting block: Accept Current Change, Accept Incoming Change, Accept Both Changes, and Compare Changes (a side-by-side view of exactly what differs). This is a genuine quality-of-life upgrade over manually editing raw <<<<<<</=======/>>>>>>> conflict markers by hand in a plain text editor.
Same Git, Different Steering Wheel
Every action in this chapter produces the exact same git repository state as the equivalent command from git1-git3 — staging via + is git add, the checkmark is git commit, nothing here is a VS-Code-specific format or a parallel system. Knowing what each button actually does underneath (because you've already run the command-line version) is what makes trusting the visual shortcut reasonable — it's convenience layered on the same tool, not a replacement for understanding it.
When something goes genuinely wrong — a bad merge, a commit that needs undoing, history that needs inspecting in a way the panel doesn't expose — the command-line skills from git1-git3 are still the real fallback. The integrated terminal from Chapter 6 is right there for exactly this: nothing stops you from running git log, git reset, or any other command directly, in the same window, the moment the visual panel's simplified view isn't enough.
Source Control panel
Ctrl+Shift+G — Changes and Staged Changes, grouped and clickable.
Stage & commit
+ to stage, a message box and checkmark to commit.
Inline diff view
Green/red color-coded changes, no manual git diff needed.
Visual conflict resolution
Accept Current/Incoming/Both, right inside the editor.
💻 Coding Challenges
Exercise 1: Stage and Commit Visually
In a git repository, make a small change to a file. Stage it using the + icon in the Source Control panel, write a commit message, and commit it using the checkmark — without typing a single git command.
Exercise 2: Read a Diff
Modify a file (change a line, add a new one), then click it in the Source Control panel before staging it. Identify which lines are shown in green vs. red in the diff view.
Exercise 3: Switch Branches from the Status Bar
Click the branch name in the Status Bar and use the quick-pick list to create a new branch. Confirm the Status Bar updates to show the new branch name.
🎯 What's Next
Next chapter: Debugging — launch.json, breakpoints, watch expressions, and the call stack.