Using Git & GitHub in VSCode: Stage, Commit, and Push

This lesson on Using Git & GitHub in VSCode: Stage, Commit, and Push is hands-on and example-driven. You will configure Git within VS Code to manage project version control locally and synchronize code with GitHub. You will master the core workflow of staging specific file modifications, creating discrete local commits, and pushing or pulling updates across remotes.

What You'll Be Able To Do

• Verify local Git installation and environment pathing using terminal commands.
• Initialize a new Git repository directly within the VS Code workspace.
• Stage specific file changes selectively to build atomic, isolated commits.
• Commit staged changes locally with clear, descriptive commit messages.
• Publish and push local repository branches to remote GitHub repositories.
• Synchronize and pull upstream remote changes into the local working directory.

Detailed Concept Walkthrough

1. Git vs GitHub Architecture

Git is a local command-line version control engine, whereas GitHub is a cloud-hosted platform for storing and sharing Git repositories. Git tracks code revisions entirely on your local machine without needing an active internet connection.

• Mechanism: Git records snapshots of your local workspace in a hidden internal database whenever you commit changes. GitHub provides remote storage hosting those snapshots, enabling team collaboration, backup, and pull request workflows.
• Under the Hood: Local Git operations write directly to disk within the project workspace, requiring zero network bandwidth. Synchronizing with GitHub initiates network requests to authenticate and transfer object blobs over HTTPS or SSH.
• Best Practice: Always treat Git as your primary revision tracker and GitHub as the remote distribution hub. Verify your local Git installation path before configuring remote connections in VS Code.

# Check installed Git version
git --version

# Locate the executable path in Windows PowerShell
where.exe git

Key Takeaway: Git manages versions locally on your machine, while GitHub hosts and shares those repositories remotely.

2. Workspace Initialization and Tracking

Initializing a repository converts a standard folder into a version-controlled Git workspace by creating a hidden metadata directory. VS Code detects this metadata to surface source control features natively.

• Mechanism: Initializing via the VS Code Source Control tab executes the setup required to monitor workspace file states. Once initialized, Git classifies files into untracked, modified, or staged categories based on changes relative to the latest snapshot.
• Under the Hood: Git creates a hidden .git folder at the root of the project to store commit histories, references, and configuration settings. Deleting the .git directory removes version control history without deleting your actual source code files.
• Best Practice: Initialize repositories only at the true root folder of a project rather than nesting repositories inside existing tracked directories.

# Initialize a repository via command line (equivalent to VS Code UI)
git init

# View file tracking statuses
git status

Key Takeaway: A Git repository is simply a project directory containing a hidden .git tracking database.

3. Selective Staging and Committing

Staging acts as a preparation area where you select exact file modifications to include in your next snapshot. Committing permanently records those staged changes into the local repository history.

• Mechanism: Moving a modified file to 'Staged Changes' marks its current state for inclusion in the upcoming commit while leaving unstaged changes untouched. The commit operation seals all staged changes with an author metadata tag and a descriptive log message.
• Under the Hood: Staging builds an index tree that captures file snapshots before writing the permanent commit object. Unstaged changes remain in the working tree and are ignored by the commit operation until explicitly added.
• Best Practice: Use selective staging to create focused, atomic commits that encapsulate a single logical change rather than bundling unrelated edits together.

# Stage a specific file selectively
git add test.py

# Commit staged changes with a descriptive message
git commit -m "Add initial test script for data pipeline"

# Discard changes in working directory for a specific file
git checkout -- test.py

Key Takeaway: Staging lets you craft precise, atomic commits by separating ready changes from work-in-progress edits.

4. Remote Synchronization: Push and Pull

Synchronizing bridges the local Git repository with the remote GitHub host by pushing local commits upstream and pulling remote commits downstream. This keeps local and cloud versions aligned.

• Mechanism: Pushing uploads local commit snapshots from your branch to the linked GitHub repository origin. Pulling fetches new commit objects created on GitHub (or by collaborators) and merges them into your local active branch.
• Under the Hood: The VS Code 'Sync Changes' action performs a bidirectional exchange by running fetch/pull followed by push over an authenticated OAuth or credential helper session.
• Best Practice: Pull remote changes before starting new work or pushing local commits to prevent synchronization conflicts with remote commits.

# Push local master/main branch commits to remote origin
git push -u origin main

# Fetch and merge updates from remote into local branch
git pull origin main

Key Takeaway: Commits remain strictly local until explicitly pushed to GitHub, and remote edits require pulling to update local files.

Topics Covered in Using Git & GitHub in VSCode: Stage, Commit, and Push

1. Git vs GitHub Fundamentals (0:23 - 1:07) — Explains the distinction between local version control with Git and remote cloud hosting with GitHub.
2. Environment Verification (1:07 - 1:55) — Demonstrates terminal commands to check Git installation status and resolve system path issues.
3. Repository Initialization (1:55 - 3:48) — Initializes a Git repository in VS Code to establish local workspace tracking and generate metadata.
4. Local Tracking and Commits (3:48 - 6:07) — Creates a script file, reviews tracking states, discards changes, and makes an initial commit.
5. GitHub Publishing and Pushing (6:07 - 9:55) — Authenticates VS Code with GitHub, creates a private remote repository, and pushes local commits.
6. Pulling Remote Changes (10:26 - 11:45) — Edits a file on GitHub and uses the synchronize feature to pull updates into VS Code.
7. Selective Staging Workflow (11:45 - 14:51) — Separates multiple modified files to stage and commit one change while leaving others unstaged.

Git Cheat Sheet

• git --version — Prints installed Git version to verify CLI availability

  git --version
  

• where.exe git — Displays exact executable path of Git on Windows systems

  where.exe git
  

• git init — Creates new .git metadata folder in current workspace

  git init
  

• git add <file> — Moves specified file modifications to staging index area

  git add test.py
  

• git commit -m "<msg>" — Records staged changes permanently with descriptive message

  git commit -m "Initial commit of analysis script"
  

• git push — Uploads local branch commits to linked remote repository

  git push origin main
  

• git pull — Fetches and integrates remote repository changes locally

  git pull origin main
  

Comparison Table

Common Pitfalls

• Mistake: Assuming a local commit automatically updates GitHub. Avoid: Explicitly push commits using the VS Code Sync button or git push.
• Mistake: Committing all modified files at once without review. Avoid: Selectively stage individual files to maintain atomic and clean history.
• Mistake: Writing vague commit messages like 'fixed stuff'. Avoid: Provide concise, imperative messages explaining what was changed and why.
• Mistake: Editing remote files on GitHub without pulling locally. Avoid: Run git pull or synchronize changes before resuming local edits.

FAQs

• What is the difference between committing and pushing? Committing saves changes to your local Git database on your computer. Pushing uploads those local commits over the internet to GitHub.
• Why should I stage files instead of committing everything at once? Staging allows you to selectively choose which file modifications belong together, keeping each commit focused on a single task.
• What happens if I discard changes in VS Code? Discarding changes reverts the file to its last committed state, permanently erasing any uncommitted edits in that file.
• Where does Git store repository tracking history? Git stores all revision data, history, and config in a hidden .git folder located in the root of your workspace.