Git Workflow in VS Code — A Visual Recap

# Git Workflow in VS Code — A Visual Recap Both videos showed you the VS Code interface for Git. Here's a written reference so you don't have to rewatch. ## The Source Control Panel Click the **Source Control** icon in the left activity bar (or press `Ctrl + Shift + G`). This is your Git headquarters. The panel shows: - **Changes** — files you've modified but haven't staged yet - **Staged Changes** — files ready to be committed - The commit message box at the top ## Initialize a Repository If you open a folder that isn't tracked by Git, VS Code shows a "Initialize Repository" button in the Source Control panel. Click it — it creates a `.git` folder and you're ready to go. *(Video 1: 0:35-0:55, Video 2: 1:55-3:48)* ## Staging and Committing This is the core loop: 1. **Edit a file** — it appears under "Changes" with a `U` (untracked) or `M` (modified) 2. **Stage it** — click the `+` icon next to the file (or "Stage All Changes" `+` at the top) 3. **Write a commit message** — type in the message box at the top 4. **Commit** — click the checkmark icon above the message box (or `Ctrl + Enter`) The file moves from "Changes" → "Staged Changes" → committed. *(Video 1: 1:25-2:04, Video 2: 3:48-6:07)* ## Gutter Annotations — See What Changed VS Code shows colored indicators right in the gutter (the column to the left of line numbers): - **Green bar** — new lines added - **Blue bar** — existing lines modified - **Red triangle** — lines deleted - Click any gutter indicator to open a diff view comparing old vs new This is your instant visual audit before committing. Never commit without scanning the gutters. *(Video 1: 2:40-4:04)* ## Branch Management ### Create a new branch 1. Open the Command Palette (`Ctrl + Shift + P`) 2. Type "Git: Create Branch" 3. Name it (e.g., `feature/exploratory-analysis`) 4. The status bar in the bottom-left now shows your branch name ### Switch branches Click the branch name in the status bar → select another branch. *(Video 1: 2:10-2:33, 4:20-4:29)* ## Merging Branches When you're done experimenting on a branch: 1. Switch to `main` (click status bar branch name) 2. Open Command Palette → "Git: Merge Branch" 3. Select the branch you want to merge in VS Code merges the changes. If there are conflicts, you'll see "Merge Conflicts" in the Source Control panel with inline buttons to accept incoming/current/both changes. *(Video 1: 4:30-4:52)* ## Publish to GitHub (First Time) 1. Click the **"Publish to GitHub"** button in the Source Control panel 2. VS Code asks you to sign in to GitHub (OAuth in the browser) 3. Choose **Public** or **Private** visibility 4. VS Code creates the remote repo and pushes your code You'll also see a "Publish Changes" button after committing. *(Video 1: 5:00-5:43, Video 2: 6:07-9:55)* ## Pulling and Syncing To get the latest changes from GitHub: - Use the **"Pull"** button in the Source Control panel (or click the sync icon in the status bar) - VS Code fetches and merges remote changes For a full sync (pull first, then push), use the **"Sync Changes"** button in the status bar. *(Video 2: 10:26-11:45)* ## Selective Staging You don't always have to stage every change. The **"Stage Selected Ranges"** option (click a file → right-click in the diff view → "Stage Selected Range") lets you commit only specific lines within a file. This keeps your commit history clean — one bug fix per commit, one feature per commit. *(Video 2: 11:45-14:51)* ## Cloning an Existing Repo 1. Open VS Code 2. Press `Ctrl + Shift + P` → "Git: Clone" 3. Paste the repo URL from GitHub 4. Choose where to save it 5. VS Code opens the cloned folder automatically *(Video 1: 5:44-6:20)* ## Quick Reference | Action | VS Code Way | CLI Equivalent | |---|---|---| | Init repo | Source Control → "Initialize Repository" | `git init` | | Stage file | `+` icon next to file | `git add ` | | Commit | Message box + checkmark icon | `git commit -m "msg"` | | Create branch | Palette → "Git: Create Branch" | `git checkout -b ` | | Merge branch | Palette → "Git: Merge Branch" | `git merge ` | | Push | "Publish Changes" or sync button | `git push` | | Pull | "Pull" or sync button | `git pull` | | Clone | Palette → "Git: Clone" | `git clone ` | | See diff | Click gutter indicator | `git diff` | ## Takeaway You can go your whole career without typing a single git command in the terminal. VS Code's UI covers everything an analyst needs. Use the gutters for a visual audit before every commit, keep your messages meaningful, and sync regularly so your GitHub contribution graph stays active.