Skip to main content
VS Code has Git built right in. Everything you’ve learned to do with terminal commands — staging files, committing, pushing to GitHub — you can also do entirely with clicks and buttons. Once you’re comfortable with VS Code’s Source Control panel, you may rarely need the terminal for Git at all.

​
The Source Control panel

Look at the left sidebar in VS Code. The icon that looks like a branching diagram is the Source Control panel. Click it to open it. When you’re inside a Git repository, the Source Control panel shows:
  • All files you’ve changed since your last commit, listed under “Changes”
  • A text box at the top for writing your commit message
  • A checkmark button to save your commit
  • A ... menu for less common operations like pulling and pushing

​
Basic commit workflow

​
1. See what you’ve changed

Open the Source Control panel. Every file you’ve modified since your last commit appears in the Changes list. Click any file to open a side-by-side diff view:
  • Green lines — text you added
  • Red lines — text you removed

​
2. Stage your changes

Before committing, you choose which changes to include — this is called “staging”:
  • Hover over any file in the Changes list and click the + icon to stage that file
  • Click the + next to the “Changes” heading to stage everything at once

​
3. Write a commit message and commit

With your files staged:
  1. Click in the message box at the top of the panel
  2. Type a short, descriptive message like Add sales analysis function
  3. Press Ctrl+Enter on Windows/Linux or Cmd+Enter on Mac (or click the ✓ checkmark button)
Your changes are now committed locally.

​
4. Push to GitHub

After committing, upload your changes:
  • Click the … menu in the Source Control panel, then click Push
  • Or click the sync icon in the bottom status bar — it shows arrows indicating pending pushes and pulls

​
Visual change indicators

VS Code marks changed files in multiple places:
  • Explorer panel — Modified files show a coloured letter (M for modified, U for untracked)
  • Editor gutter — A coloured bar on the left side of the editor shows exactly which lines changed
    • Blue bar — Line was modified
    • Green bar — Line was added
    • Red triangle — Lines were deleted
Click any coloured bar in the editor gutter to see an inline diff of exactly what changed on those lines.

​
Common VS Code Git tasks

  1. Open your project folder in VS Code
  2. Open the Source Control panel
  3. Click the Initialize Repository button
  4. Git is now tracking your project — all your files appear as new changes ready to stage
  1. Press Ctrl/Cmd + Shift + P to open the Command Palette
  2. Type Git: Clone and press Enter
  3. Paste the GitHub repository URL
  4. Choose where to save the project on your computer
  5. VS Code downloads the project and opens it automatically
  1. Create a new file in your project root called .gitignore
  2. Add these essential Python patterns:
VS Code also offers to auto-populate .gitignore based on your project language.
Made a mistake and want to go back to the last committed version?
  1. Open the Source Control panel
  2. Right-click the file you want to revert
  3. Select Discard Changes
  4. VS Code asks you to confirm before reverting — click Discard Changes again
The file goes back to exactly how it was at your last commit.

​
The sync button in the status bar

The status bar at the very bottom of VS Code shows a sync button with arrows. The numbers next to the arrows tell you the state of your repository:
  • ↓ 3 — There are 3 commits on GitHub that you haven’t downloaded yet (you need to pull)
  • ↑ 2 — You have 2 local commits that haven’t been pushed to GitHub yet
  • Click the button to sync in both directions at once

​
Tips for building good habits

  1. Commit often — A commit after every small feature or bug fix is better than one massive commit at the end of the day
  2. Write clear messages — Fix login form validation bug is infinitely more useful than changes or stuff
  3. Pull before you start — If you work on multiple machines, always pull the latest changes before writing new code
  4. Check your .gitignore — Before your first push, verify that secrets and large folders won’t be uploaded
Never commit .env files or API keys. If you accidentally commit a secret, consider it compromised and rotate the key immediately — even if you delete it in a later commit, it remains visible in the repository history.

​
Terminal vs VS Code UI — quick reference

Both approaches do exactly the same thing. Use whichever feels most comfortable:

​
What’s next?

You now have all the Git skills you need for daily development. Next, learn how to keep your API keys and other secrets safe using environment variables.

Environment & Secrets

Store your API keys safely outside of your code