Git Course 0%

Edit, diff, stage, commit, push, pull, sync

Beginner VS Code UI ≈ 14 min

What you will learn

  • The loop from edit to pushed, with every control named
  • How to stage part of a file, which the interface makes easy
  • What Sync does, and when to use pull and push separately

After this lesson you can

  • I can do a full day's Git work in the editor without the terminal

Why this matters

This is the loop you will repeat several times a day. Done well in the editor it is four clicks and a sentence, and the two habits that matter, reading the diff and staging deliberately, are easier here than anywhere else.

The loop

  1. Edit a file and save it. It appears under Changes with an M.
  2. Read the diff: click the file name. Left is the previous version, right is yours.
  3. Stage what belongs in this commit with +, on the file or on individual changes.
  4. Check the staged diff: click the file under Staged Changes. This is what will be committed.
  5. Write the message in the box and click Commit.
  6. Sync when you are ready to share, or push separately.

Steps 2 and 4 are the ones people skip and the ones that catch mistakes. The staged diff in particular is the last honest look at what you are about to record.

Staging part of a file

This is where the interface genuinely beats the terminal. In the diff view, select the lines you want, then Stage Selected Ranges from the editor's context menu or the Command Palette. The change block gets a small + in the gutter too.

The result: one file, some of its changes staged, the rest still in Changes. The Source Control view shows the file in both sections at once, which is confusing for a moment and then obvious (lesson 5.3).

Use it when one file ended up holding two unrelated changes, which happens constantly.

Writing the message

The box takes multiple lines: type the subject, press Enter, leave a blank line, then the body. It is a real editor, so wrapping and spellcheck work.

For a longer message, use Git: Commit from the Command Palette with an empty box, which opens COMMIT_EDITMSG as a proper tab.

The rules are the same as anywhere (lesson 5.4): imperative subject under about fifty characters, the issue number, and the why in the body.

Sync, pull and push

Sync Changes is git pull followed by git push. Its label carries the counts, 1↓ 2↑, so you can see what it will do before clicking it.

Use When
Sync Changes The normal case: get theirs, send yours
Git: Pull You only want theirs, for example before starting work
Git: Push You only want to send, and know you are up to date
Git: Fetch You want to see what is on the server without changing your files

Fetch is the safe one, and with git.autofetch on VS Code does it for you, which is why the counts stay accurate.

If a push is rejected, VS Code shows Git's message. It usually means the branch has moved on the server (lesson 7.6); pull, resolve anything that conflicts, and push again.

Amending and undoing

Task Where
Add to the last commit … → Commit → Commit Staged (Amend), before pushing
Undo the last commit, keeping changes … → Commit → Undo Last Commit
Discard one file's changes The on the file: permanent
Unstage The on a staged file

Undo Last Commit is git reset --soft HEAD~1: the commit disappears and its changes go back to staged (lesson 12.4). Both amend and undo rewrite history, so use them only before pushing.

How to do it

The same loop:

Terminal
$ git status
$ git diff docs/getting-started.md
$ git add -p docs/getting-started.md
$ git diff --staged
$ git commit -m "docs: add Windows steps to installation guide (#12)"
$ git pull && git push

git add -p is the terminal's equivalent of staging selected ranges, and the interface's version is easier.

Common mistakes

  • Committing without reading the staged diff.
  • One commit for two unrelated changes, when staging ranges makes splitting them easy.
  • Clicking Sync when you meant Fetch, which pulls as well.
  • Amending after pushing, which needs a force push (lesson 12.8).
  • Using the ↺ discard button as an undo for staging. That is .
  • A one-word commit message, which the box makes it easy to write.

Try it yourself

Goal: make two clean commits from one messy editing session.

  1. In one file, make two unrelated changes: fix a typo somewhere near the top and add a paragraph near the bottom.
  2. Open the diff and stage only the typo, using Stage Selected Ranges.
  3. Note that the file now appears in both Staged Changes and Changes.
  4. Commit the typo with its own message, then stage and commit the paragraph separately.
  5. Sync, then run git log --oneline -2 in the integrated terminal to confirm both commits.

Expected result: two commits, each about one thing, made from a single editing session without touching the terminal until the check.

Show solution

Step 3 is the moment the staging area makes sense to most people: the same file, in two states, because Git is tracking the version you staged separately from the version on disk. Once that is visible, git add -p in the terminal stops being mysterious too.

Check yourself

1. What does Sync Changes do?
2. You made two unrelated changes in one file. How do you commit them separately?
3. What is Undo Last Commit?

Key terms

Staged Commit Push Pull Diff