Using Git Visually in VS Code's Source Control Panel

Stage, commit, push, and pull your code using VS Code’s built-in Source Control panel — no terminal commands required for everyday Git tasks.

VS Code ships with Git support built right in, so you never have to open a terminal to manage your version control. The Source Control panel gives you a visual overview of every changed file, lets you stage and commit with a couple of clicks, and keeps your local copy in sync with GitHub through a single button. If you prefer typing commands that’s always available too — but the visual interface is hard to beat for everyday work.

The Source Control panel

Open the Source Control panel from the left sidebar — it’s the icon that looks like a branching diagram. You can also press Ctrl + Shift + G (Windows/Linux) or Cmd + Shift + G (macOS).

Inside the panel you’ll see:

• Changes — every file you’ve modified since the last commit
• A message box at the top for your commit message
• A checkmark button to commit staged files

Click any file in the list to open a side-by-side diff showing exactly what changed.

Basic workflow

1. See your changes

When you edit files, they appear automatically under Changes. Green highlighted lines are additions, red are deletions.

2. Stage changes

Staging means telling Git which changes to include in the next commit.

• Hover over a file name → click the + icon to stage that file
• Click the + next to the Changes heading to stage everything at once

3. Commit

1. Type your commit message

   Click the message box at the top of the Source Control panel and type a clear description, for example: Add weather data fetch function.

2. Commit

   Press Ctrl / Cmd + Enter, or click the ✓ (checkmark) button. Your snapshot is saved locally.

4. Push to GitHub

After committing, your changes exist only on your machine until you push:

• Click the … menu in the Source Control panel → Push
• Or click the sync icon in the bottom-left status bar (it looks like a circular arrow)

Visual features

VS Code colour-codes the editor gutter to show file status at a glance:

• Blue bar — lines modified since last commit
• Green bar — new lines added
• Red triangle — lines deleted

Click any coloured bar to expand a mini diff panel right inside the editor.

Common VS Code Git tasks

Initialize a new repository

1. Open your project folder in VS Code
2. Open the Source Control panel
3. Click Initialize Repository

Git is now tracking your project — no terminal needed.

Clone a repository

1. Press Ctrl / Cmd + Shift + P
2. Type Git: Clone
3. Paste the GitHub URL
4. Choose where to save it
5. VS Code opens the cloned project automatically

Create a .gitignore file

Create a new file named .gitignore in your project root. A solid Python starting point:

.venv/
.env
__pycache__/
*.pyc
.vscode/
.DS_Store

Discard changes

Made a mistake and want to revert a file to its last committed state?

1. Open the Source Control panel
2. Right-click the file
3. Select Discard Changes
4. Confirm the prompt

The file is restored to its previous version immediately.

The sync button

The bottom-left status bar always shows your Git status. Look for something like ↓ 3 ↑ 2:

• ↓ 3 means there are 3 remote commits to pull down
• ↑ 2 means you have 2 local commits ready to push

Click the icon to sync both directions at once.

Terminal vs UI — a quick comparison

Both approaches are valid. Use whichever feels natural:

Task	Terminal command	VS Code UI
Stage files	git add .	Click + icon
Commit	git commit -m "message"	Type message + Enter
Push	git push	Click sync button
Pull	git pull	Click sync button

Tips for a healthy Git habit

1. Commit often — Small, frequent commits are easier to understand and revert than large ones
2. Write clear messages — "Fix login bug" is useful; "changes" is not
3. Pull before you start — Always get the latest changes before beginning a work session
4. Guard your secrets — Double-check your .gitignore before every commit

Never commit .env files or API keys. Always list .env in your .gitignore before you make your first commit in any project.

What’s next?

Now that you know Git, it’s time to learn how to keep your API keys and configuration values safe using environment variables.

Environment & Secrets

Keep your API keys out of your code