VS Code + GitHub

Connect GitHub to VS Code

Sign in to GitHub inside VS Code so you can push your
code directly — no terminal commands needed.

1

Open VS Code

Launch VS Code and open your project folder. Make sure your project has at least one file saved.

💡 Use File → Open Folder to open your project, not just a single file.
2

Click the Source Control icon

In the left activity bar, click the branch icon (looks like a fork). This opens the Source Control panel.

📄
🔍
🧩
Source Control
Initialize Repository
No source control providers registered.
3

Initialize the repository

Click Initialize Repository. This runs git init in your project folder — you'll see your files appear as changes.

Source Control
✓ Commit
U index.html
U env.js
U js/app.js
4

Sign in to GitHub

Open the Command Palette with ⌘ Shift P (Mac) or Ctrl Shift P (Windows), then type:

⌕ GitHub: Sign in
🐙 GitHub: Sign in to GitHub
🔑 GitHub: Sign out

Select GitHub: Sign in to GitHub and press Enter.

5

Allow VS Code to open your browser

A notification pops up asking to open GitHub in your browser. Click Allow.

🔔
The extension 'GitHub' wants to sign in using GitHub.
Allow VS Code to open this URL?
Allow
Cancel
💡 Your browser opens GitHub's authorization page. Click Authorize Visual-Studio-Code to approve.
6

Publish to GitHub

Back in VS Code, click Publish to GitHub in the Source Control panel. Choose Public or Private repo.

⌕ vibe-coding
🌐 Publish to GitHub as Public Repository
🔒 Publish to GitHub as Private Repository
⚠ Make sure env.js is listed in .gitignore before publishing so your TMDB token is not exposed.
✓

You're connected!

From now on, use the Source Control panel to stage, commit, and push changes — no terminal needed.

TERMINAL
~/vibe-coding (main)
$ git status
On branch main
Your branch is up to date with 'origin/main'.
nothing to commit, working tree clean ✓
🎉 Your project is now on GitHub. Share the repo URL with your students!