Your AI-Assisted Cockpit: Mastering Git in VS Code
"The best tools disappear into your workflow. VS Code makes Git visual, intuitive, and fast."
Everything you've learned so far in the terminal works beautifully from VS Code's built-in Git UI. Staging, committing, branching, merging, resolving conflicts — all with rich visual feedback and just a few clicks. Let's explore the cockpit.
VS Code bundles a rich set of Git tools right into the editor, so you can do almost everything without opening a terminal.
7.1 The Source Control View
This single panel replaces a dozen terminal commands. Status, staging, committing, branching — it's all here in one visual interface that makes Git feel approachable.
Everything you've learned maps directly to the UI:
Changes
Your working directory (git status). Modified and untracked files appear
here.
Staged Changes
Your staging area. Files you've approved for the next commit.
Commit Box
Your git commit -m "...". Type the message and click the
checkmark.
... Menu
All advanced commands, tucked into submenus: Pull, Push, Stash, Branch, and Commit (where Amend and Undo Last Commit live).
Here's what it looks like in action. Press Ctrl+Shift+G to open the Source Control panel from anywhere — and yes, it's Ctrl even on a Mac (⌘⇧G is taken by search):
Below the commit area, you'll find the Source Control Graph -- a visual representation of your commit history and branch structure. This is incredibly helpful for understanding how branches relate to each other:
"Show me how to stage and commit changes using the VS Code Source Control panel"
"Walk me through the VS Code Git workflow without using the terminal"
7.2 The Timeline View & GitLens
When you're staring at a line of code and wondering "who changed this, and why?" — VS Code has the answer built right in. Timeline and GitLens turn your editor into a time machine.
Open any file, then look in the Explorer panel for the "Timeline" pane at the bottom. This shows the complete commit history for that specific file. Click any commit to see a diff of what it changed. The Timeline also mixes in Local History snapshots of your saves — and those entries have a right-click → "Restore Contents" that can rescue even changes you never committed.
Here's the Timeline in action. Each entry represents a commit that touched this file -- click any entry to see exactly what changed in that commit:
VS Code also has built-in Git Blame. Put your cursor on any line of code and the status bar shows who last changed it and when (an always-on inline annotation is one setting away — search Settings for "blame"). The GitLens extension goes deeper — rich line history, comparisons across branches and commits — though many of its advanced features now sit behind a paid Pro plan. Start with the built-ins; add GitLens when you hit their ceiling:
"Show me the history of changes to this file — who changed what and when"
"Who last modified this function and what was the commit message?"
7.3 The 3-Way Merge Editor
We touched on merge conflicts earlier -- now let's look at the tool that makes resolving them almost enjoyable.
When a conflict occurs, VS Code highlights the conflicting files in the Source Control view. Clicking one opens it with the inline conflict markers you know from section 5.3 — look for the "Resolve in Merge Editor" button in the corner to switch to the 3-way view with three panes:
Here's the merge editor in action. Use the checkboxes next to each change to select which version you want to keep -- or manually edit the Result pane at the bottom for a custom resolution:
And if you have GitHub Copilot installed, there's an even easier option. VS Code can use AI to analyze both sides of a conflict and suggest an intelligent resolution. Look for the "Resolve with AI" option in the merge editor:
"I have a merge conflict — open the VS Code merge editor and help me resolve it"
"Accept the incoming changes for all conflicts in this file"
Loading challenge...