GitHub with MS Visual Code

What You’ll Need

  • Visual Studio Code (already installed)
  • A free GitHub account — sign up at https://github.com
  • Git installed on your computer (instructions below)

Step 1 — Install Git

Mac

Git is included with the Xcode Command Line Tools. If you followed the C++ setup guide, you already have it. Verify in Terminal:

git --version

If it’s not installed, run:

xcode-select --install

Windows

Download and install Git from: https://git-scm.com/download/win

During install, keep all the default options. When done, open a new Command Prompt and verify:

git --version

You should see something like git version 2.x.x.

Step 2 — Configure Git with Your Identity

Git needs to know your name and email so it can label your commits. Open a terminal (Mac) or Command Prompt (Windows) and run these two commands — use the same email address as your GitHub account:

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

You only need to do this once per computer.

Step 3 — Sign In to GitHub Inside VS Code

  1. Open VS Code
  2. Click the Accounts icon at the bottom of the left sidebar (it looks like a person)
  3. Click Sign in with GitHub
  4. Your browser will open — log in to GitHub and click Authorize Visual-Studio-Code
  5. Switch back to VS Code — you should see your GitHub username in the Accounts menu

VS Code uses this connection to push and pull code without asking for your password every time.

Step 4 — Connect Your Project to GitHub

There are two starting points: you can either turn an existing local folder into a GitHub repository, or clone a repository that already exists on GitHub.

Option A — Publish an existing folder to GitHub

  1. Open your project folder in VS Code (File → Open Folder)
  2. Click the Source Control icon in the left sidebar (it looks like a branching path, or press Ctrl+Shift+G / Cmd+Shift+G)
  3. Click Initialize Repository — this creates a local Git repo in your folder
  4. Click Publish Branch (appears at the top of the Source Control panel)
  5. Choose Publish to GitHub public repository or private repository
  6. VS Code creates the repo on GitHub and pushes your files automatically

Option B — Clone an existing GitHub repository

  1. On GitHub, open the repository you want and click the green Code button
  2. Copy the HTTPS URL (e.g. https://github.com/yourname/your-repo.git)
  3. In VS Code, open the Command Palette: Ctrl+Shift+P (Windows) / Cmd+Shift+P (Mac)
  4. Type Git: Clone and select it
  5. Paste the URL and press Enter
  6. Choose a local folder to save it in — VS Code will download the repo and offer to open it

Step 5 — The Daily Workflow: Stage, Commit, Push

Once your project is connected to GitHub, this is the cycle you’ll repeat every time you make changes.

1. See what changed

Click the Source Control icon (Ctrl+Shift+G / Cmd+Shift+G). Any file you’ve changed appears in the Changes list. Click a file to see a side-by-side diff showing exactly what was added or removed.

2. Stage your changes

Staging means selecting which changes to include in your next commit. You can stage everything at once, or pick file by file.

  • To stage all changes: click the + icon next to Changes
  • To stage one file: hover over it and click the + that appears

Staged files move into the Staged Changes section.

3. Write a commit message and commit

In the text box at the top of the Source Control panel, type a short description of what you did — for example:

Add grade calculator function

Then click the ✓ Commit button (or press Ctrl+Enter / Cmd+Enter). This saves a snapshot of your staged changes locally.

4. Push to GitHub

Click the Sync Changes button that appears after committing (it shows an up arrow with a count). This uploads your commit to GitHub so it’s backed up and visible online.

You can also push from the terminal:

git push

5. Pull changes made elsewhere

If you (or a teammate) made changes on another computer or directly on GitHub, pull them down before you start working:

git pull

Or click the Sync Changes button, which pulls and pushes in one step.

Step 6 — Working with Branches

Branches let you work on a new feature or fix without touching the main working version of your code. When you’re done, you merge the branch back in.

Create a new branch

  1. Click the branch name in the bottom-left corner of VS Code (it usually says main)
  2. Click Create new branch…
  3. Type a name (e.g. add-sorting-feature) and press Enter

You’re now on the new branch. Any commits you make go here and won’t affect main.

Switch between branches

Click the branch name in the bottom-left corner and choose a branch from the list.

Merge a branch (via Pull Request on GitHub)

  1. Push your branch to GitHub: click Publish Branch in the Source Control panel
  2. Go to your repository on GitHub — you’ll see a banner offering to open a Pull Request
  3. Click Compare & pull request, add a description, and click Create pull request
  4. Once reviewed (or if it’s just you), click Merge pull request
  5. Back in VS Code, switch to main and click Sync Changes to pull the merged code down

Step 7 — Useful VS Code Git Features

Gutter indicators

When you edit a file that’s tracked by Git, VS Code shows colored bars in the gutter (left of the line numbers):

  • Green bar — new lines added
  • Blue bar — lines that were modified
  • Red triangle — lines that were deleted

Click any bar to see the original content and undo just that change if needed.

Inline diff view

In the Source Control panel, click any changed file to open a split view showing the old version on the left and your new version on the right.

Timeline

At the bottom of the Explorer panel (left sidebar), there’s a Timeline section. Click it to see the full commit history for the file you’re currently editing, and click any commit to see what changed.

Git commands from the terminal

Everything VS Code does visually can also be done in the integrated terminal (Ctrl+` / Ctrl+`). Some useful ones:

Command What it does
git status Shows which files have changed
git log --oneline Shows recent commits in a compact list
git diff Shows exactly what changed in unstaged files
git add . Stages all changes
git commit -m "message" Commits with a message
git push Uploads commits to GitHub
git pull Downloads latest changes from GitHub
git checkout -b branch-name Creates and switches to a new branch

Quick Reference

Task VS Code Shortcut
Open Source Control panel Ctrl+Shift+G / Cmd+Shift+G
Open Command Palette Ctrl+Shift+P / Cmd+Shift+P
Commit staged changes Ctrl+Enter / Cmd+Enter (in commit message box)
Open integrated terminal Ctrl+`
Switch branch Click branch name in bottom-left corner

Troubleshooting

“Git not found” error in VS Code
Make sure Git is installed and on your PATH (see Step 1). After installing, close and reopen VS Code completely — it only detects Git on startup.

VS Code asks for my GitHub password every push
Make sure you signed in via the Accounts icon (Step 3). If you cloned using an HTTPS URL, VS Code will use your stored credentials automatically once signed in. If it keeps asking, try cloning with the HTTPS URL rather than SSH.

“Failed to push — updates were rejected”
Someone else (or you on another machine) pushed changes that you don’t have locally. Run git pull first to bring those changes down, then push again.

I committed something I didn’t mean to
If you haven’t pushed yet, you can undo the last commit in VS Code: open the Source Control panel, click the ··· menu (top right), and choose Commit → Undo Last Commit. Your changes come back as unstaged files.

My branch is behind main
Switch to your branch, then run:

git merge main

This brings the latest changes from main into your branch. Resolve any conflicts VS Code highlights, then commit.

Scroll to Top