Home / Guides / Git Basics in VS Code

Git Basics in VS Code

What Is Git?

Git is a version control tool. It tracks every change you make to your files so you can go back to any previous version.

Find the Source Control Tab

In VS Code, look at the left sidebar. Click the icon that looks like a branching line (third icon from the top). This is the Source Control tab. It shows every file you have changed since your last commit.

How to Commit

A commit is a snapshot of your work. Think of it like saving a checkpoint in a video game.

  1. Make sure your files are saved (Ctrl+S on Windows, Cmd+S on Mac)
  2. Open the Source Control tab
  3. You will see your changed files listed under "Changes"
  4. Click the + icon next to each file to stage it (this tells Git "include this file in my snapshot")
  5. Type a short message in the text box at the top that describes what you changed
  6. Click the Commit button

How to Push

Pushing sends your commits to GitHub so they are saved online.

  1. After you commit, click the Sync Changes button that appears in the Source Control tab
  2. This uploads your commits to GitHub

If you see a Push button instead of Sync, click that. Both do the same thing.

How to Pull

Pulling downloads the latest changes from GitHub to your computer. This matters when you work from multiple computers or when a collaborator makes changes.

  1. Open the Source Control tab
  2. Click the Sync Changes button
  3. This pulls any new changes down and pushes your local commits up

Common Issues

"Nothing to commit" Your files are not saved. Press Ctrl+S (Windows) or Cmd+S (Mac) to save, then check the Source Control tab again.

"Please configure user.name and user.email" Git does not know who you are yet. This is a one-time setup. Open the VS Code terminal (Ctrl+`` ) and run these two commands with your own name and email:

git config --global user.name "Your Name"
git config --global user.email "your-email@example.com"

Then try your commit again.

Merge conflicts This happens when two versions of the same file have conflicting changes. Do not try to fix this on your own. Ask the instructor or a TA for help.

Commit Message Tips

Write a short message that says what you changed. Start with a verb.

Good Bad
Add contact form update
Fix broken image link stuff
Style navigation bar changes

A good commit message helps you find specific changes later when you look back at your project history.

Your Turn

  1. Open one of your project files in VS Code and make a small change (add a comment, fix a typo)
  2. Save the file
  3. Open the Source Control tab, stage the change, and write a commit message
  4. Commit, then push to GitHub

If you see your change on GitHub, you are all set.