VS Code SetupBeginner

How to Stage, Commit, and Push Changes from VS Code

Run the everyday git loop, review a diff, stage selectively, commit, and push to a remote, entirely from the Source Control view.

8 minBeginner

Once a repository is set up, your daily rhythm is the same: review what changed, stage the parts you want, write a commit message, and push to your remote so the work is backed up and shareable. VS Code makes each step a click. This guide walks the full loop, including reviewing the diff before you commit so you actually know what you are saving.

What you need

A git repository open in VS Code with some uncommitted edits
A remote already connected (for example a GitHub repo)
Your git identity configured

Step 1: Review what changed

Open Source Control with Ctrl+Shift+G. Click any file under Changes to open a side-by-side diff: the old version on the left, your edits on the right, with additions in green and removals in red. Read the diff before committing so you do not save accidental changes.

VS Code - diff view

Explorer

index.js

utils.js

src/index.js (Working Tree)

1 function greet(name) {

2- return 'Hello ' + name

3+ return `Hello, ${name}!`

4 }

A side-by-side diff of a changed file.

Step 2: Stage the changes you want

Staging is choosing which changes go into the next commit. Hover a file under Changes and click the plus icon to stage it, or click the plus next to Changes to stage everything. Staged files move to a Staged Changes group. You can stage just part of a file by selecting lines in the diff and choosing Stage Selected Ranges.

Step 3: Write a commit message and commit

Type a clear message in the box at the top of the Source Control view. A good message says what changed and why in one line. Click the Commit checkmark, or press Ctrl+Enter. The staged changes become a permanent snapshot.

Write messages in the imperative

Phrase commit messages like a command: Fix login redirect, Add dark mode toggle. It reads cleanly in the history and matches git's own style.

Step 4: Push to the remote

A commit only lives on your machine until you push it. Click the Sync Changes button at the bottom status bar, or open the three-dot menu in Source Control and choose Push. If you prefer the terminal, the same thing happens with one command.

zsh - my-app

$git push origin main

Enumerating objects: 5, done.

To github.com:you/my-app.git

a1b2c3d..e4f5g6h main -> main

Step 5: Confirm the sync

After pushing, the status bar shows 0 outgoing changes. The small numbers next to the sync icon tell you how many commits you have to push (up arrow) or pull (down arrow) at any time.

VS Code - status bar

main* 0 down 0 up Sync Changes

-------------------------------------

All commits pushed to origin/main

The status bar sync indicator after a clean push.

Result

You reviewed your diff, staged exactly what you wanted, committed it with a clear message, and pushed it to your remote. That is the loop you will repeat dozens of times a day, all from one panel.