🖥️ Git with VS Code

🗺️ A Tour of the Screen

Open your site folder (File → Open Folder) and click the Source Control icon in the Activity Bar, or press Ctrl+Shift+G (⌃+⇧+G on a Mac). Here's what you're looking at:

1. Source Control icon: a little number badge on it counts your uncommitted changes.
2. Message box: your commit message goes here.
3. ✓ Commit button: commits whatever is under Staged Changes. It turns into Publish Branch or Sync Changes when there's something to push or pull.
4. Staged Changes / Changes: the staging area and your working folder, exactly like git status. The letter on the right tells you why a file is listed.
5. Graph: recent versions of VS Code draw your commit history right in this view (older versions show Incoming/Outgoing instead).
6. Gutter bars: green = added lines, blue = changed lines, red triangle = deleted lines, compared with your last commit.
7. Status bar: the current branch (the * means uncommitted changes) and the sync indicator (commits to pull ↓ and push ↑).

🔧 Before You Start

VS Code uses the Git you installed in Lesson 1. It doesn't bring its own. Two quick checks in the terminal (Ctrl+`) save a lot of confusion:

git --version
git config --global --list

You should see a version number and your user.name and user.email. If VS Code ever pops up "Make sure you configure your 'user.name' and 'user.email' in git", it means that second list is missing them. Run the two git config --global commands from Lesson 1 and try again.

📸 Stage & Commit

• Stage one file: hover over it under Changes and click +. That's git add <file>.
• Stage everything: click the + on the Changes heading itself. That's git add ..
• Unstage: click − next to a staged file. That's git restore --staged <file>.
• Commit: type a message and click ✓ Commit, or press Ctrl+Enter (⌘+Enter) in the message box.
• Stage just some lines: click the file to open its diff, select the lines you want, right-click, and choose Stage Selected Ranges. Handy when one file contains two unrelated changes that deserve two commits.

Amend the last commit: the … (More Actions) menu at the top of the view → Commit → Commit Staged (Amend), the same as git commit --amend. Only amend commits you haven't pushed yet.

🔍 Seeing & Undoing Changes

• See what changed: click any file in the Source Control view. VS Code opens a side-by-side diff: last commit on the left, your version on the right. That's git diff, but easier to read.
• Peek at one change: click a coloured gutter bar in the normal editor. A small inline diff appears with buttons to stage or revert just that block.
• Throw away changes to a file: hover over it and click the ↶ Discard Changes icon. That's git restore <file>. VS Code asks you to confirm, because this can't be undone.
• Undo the last commit (not pushed): … → Commit → Undo Last Commit. The commit disappears but its changes come back as staged, so nothing is lost. (Behind the scenes this is git reset --soft HEAD~1.) Once a commit is pushed, use git revert instead.

🌿 Branches & Merging

Click the branch name at the bottom-left of the status bar. A picker opens at the top of the window:

• + Create new branch…: type a name, press Enter, and you're on it (git switch -c).
• Any branch in the list: switches to it (git switch). Start typing to filter a long list.

To merge, first switch to the branch that should receive the work (usually main). Then open the Command Palette (Ctrl+Shift+P / ⌘+⇧+P), type Git: Merge, and pick the branch to bring in. The same command lives in … → Branch. Labels shift a little between VS Code versions, so type "merge" and look for the Git one.

To delete a merged branch, type Git: Delete Branch in the Command Palette. Like git branch -d, it warns you if the branch isn't merged yet.

⚔️ Merge Conflicts

When a merge (or a git pull) conflicts, the file shows up under Merge Changes with a conflict marker. Open it and you'll see the two versions coloured differently, with clickable links above them:

Accept Current Change | Accept Incoming Change | Accept Both Changes | Compare Changes

• Current = the branch you're on (the HEAD half).
• Incoming = the branch you're merging in.
• Both keeps both, one after the other. You'll often tidy up by hand afterwards.

For bigger conflicts, click Resolve in Merge Editor (bottom-right of the file). It shows Incoming and Current side by side on top and the Result underneath; tick the changes you want, edit the result if needed, then click Complete Merge.

When every conflicted file is resolved, stage the files (+) and click ✓ Commit. VS Code fills in the merge message for you. Changed your mind part-way? git merge --abort in the terminal still works.

🕰️ History: Timeline & Graph

• Timeline: open a file, then expand Timeline at the bottom of the Explorer view. It lists every commit that touched that file (like git log -- <file>). Click one to see exactly what it changed.
• Graph: in recent versions, the Source Control view has a Graph section showing commits and branches as a line-and-dots picture, similar to git log --oneline --graph. Click a commit to see its files.
• Hover blame: some versions (and GitLens, below) show who last changed the current line and in which commit, right in the editor.

🐙 GitHub from VS Code

Signing in

Click the Accounts icon (the person at the bottom of the Activity Bar) → Sign in with GitHub. Your browser opens, you approve, and you're back. VS Code shares that sign-in with Git for pushes and pulls in most setups; if a push from the terminal still asks you to sign in, Git Credential Manager (Windows) or gh auth login handles it, just as in Lesson 5.

Publishing, syncing, cloning

• Publish Branch / Publish to GitHub: on a repository with no GitHub remote yet, this button creates the GitHub repo for you (you choose public or private) and pushes. It's an alternative to the git remote add + git push -u steps from Lesson 5.
• Sync Changes: pulls then pushes. The numbers next to it (↓ incoming, ↑ outgoing) tell you what will move. VS Code asks for confirmation the first time; leave that on while you're learning.
• Git: Clone (Command Palette): paste a repository URL or pick one of your GitHub repos, choose a folder, and open it.

The GitHub Pull Requests extension

Install GitHub Pull Requests (published by GitHub) from the Extensions view (Ctrl+Shift+X). It adds a GitHub icon to the Activity Bar where you can:

• create a pull request from the branch you're on, without visiting github.com
• see your open PRs, their checks, and the Netlify Deploy Preview status
• read and reply to review comments next to the code they're about
• check out someone else's PR branch to try it locally

It's entirely optional. The github.com flow from Lesson 6 does the same job, and it's worth knowing that one first.

🧩 Helpful Extensions

You don't need any of these, but many people like them. Search for them by name in the Extensions view, or install from the terminal:

⚙️ Settings & Shortcuts

A few Git settings worth knowing (File → Preferences → Settings, then search "git."). These are sensible for a beginner:

// settings.json
{
  // Check GitHub for new commits in the background, so Sync shows ↓ counts
  "git.autofetch": true,
  // Ask before Sync pushes and pulls (keep this on while learning)
  "git.confirmSync": true,
  // Don't push automatically after every commit
  "git.postCommitCommand": "none"
}

🩺 Troubleshooting