Git and GitHub with VS Code: The Perfect Development Workflow

Why VS Code + Git = Developer Happiness

VS Code isn't just a text editor - it's a complete Git command center that makes version control visual, intuitive, and powerful.

Setting Up Git in VS Code

Initial Setup Checklist

graph LR A[Install VS Code] --> B[Git Already Installed?] B -->|No| C[Install Git] B -->|Yes| D[Configure Git] C --> D D --> E[Install GitHub Extension] E --> F[Sign in to GitHub] F --> G[Ready to Code!] style A fill:#f9f,stroke:#333,stroke-width:2px style G fill:#9f9,stroke:#333,stroke-width:2px

Step 1: Verify Git Installation

# In VS Code Terminal (Ctrl+`)
git --version
git version 2.39.0

# If not installed, download from git-scm.com

Step 2: Configure Git in VS Code

# Open Command Palette: Ctrl+Shift+P (Cmd+Shift+P on Mac)
> Git: Configure User Name
> Git: Configure User Email

# Or use terminal:
git config --global user.name "Your Name"
git config --global user.email "you@example.com"

VS Code Git Interface Tour

Essential VS Code Git Operations

Visual Git Workflow in VS Code

sequenceDiagram participant WD as Working Directory participant SC as Source Control Panel participant SA as Staging Area participant LR as Local Repo participant GH as GitHub WD->>SC: Edit files (auto-detected) SC->>SC: Shows changes with +/- SC->>SA: Click + to stage SA->>SC: Type commit message SC->>LR: Ctrl+Enter to commit LR->>GH: Click Sync/Push GH->>LR: Pull changes (auto/manual)

Common Operations

🌿 Creating & Switching Branches

# Method 1: Status Bar
Click branch name (bottom-left) → Create new branch

# Method 2: Command Palette
Ctrl+Shift+P → "Git: Create Branch"

# Method 3: Source Control
... menu → Branch → Create Branch

📝 Staging & Committing

# Stage individual files
Click + next to filename

# Stage all changes
Click + next to "Changes" header

# Commit with message
Type message → Ctrl+Enter

# Amend last commit
... menu → Commit → Amend

🔄 Syncing with Remote

# Push/Pull in one click
Click sync icon (↻) in status bar

# Pull only
... menu → Pull

# Push only
... menu → Push

# Push to specific remote
... menu → Push to...

👀 Viewing Differences

# View file changes
Click on modified file in Source Control

# Inline diff in editor
Click gutter indicators

# Compare with any commit
Right-click file → Open Timeline

# Side-by-side diff
Settings → Diff Editor → Side by Side

GitHub Integration Features

GitHub Pull Requests and Issues Extension

Installing GitHub Extension

1. Open Extensions (Ctrl+Shift+X)
2. Search "GitHub Pull Requests and Issues"
3. Click Install
4. Sign in to GitHub when prompted
5. Authorize VS Code

# Now you can:
- See PR status in status bar
- Review PRs without leaving VS Code
- Create PRs from current branch
- Link commits to issues: "fixes #123"

Advanced VS Code Git Features

Git Lens: Supercharge Your Git Experience

GitLens is the ultimate VS Code extension for Git power users, adding blame annotations, commit search, and visualization.

GitLens Features

📍 Current Line Blame
John Doe, 3 days ago • Fix calculation error
    return total * 1.08; // Added tax
🕐 File History
Right-click file → Open File History
- See all commits
- Compare versions
- Restore old versions
🔍 Commit Search
Search commits by:
- Message
- Author
- File
- Changes
📊 Visualizations
- Commit graph
- Branch comparisons
- Contributors
- Heatmaps

Interactive Rebase in VS Code

VS Code makes interactive rebase visual and intuitive!

# Start interactive rebase
1. Open Command Palette (Ctrl+Shift+P)
2. "Git: Rebase Branch..."
3. Select target branch

# VS Code opens a visual editor:
pick abc123 Add feature
squash def456 Fix typo     ← Change 'pick' to 'squash'
reword ghi789 Update docs  ← Change commit message

# Save and close to execute rebase

Productivity Tips & Tricks

⚡ Speed Up Your Git Workflow

Keyboard Shortcuts

Ctrl+Shift+GOpen Git panel
Ctrl+EnterCommit staged
Ctrl+Shift+PCommand palette
Ctrl+K Ctrl+Alt+SStage selected lines
Alt+←/→Navigate history

Settings to Enable

// settings.json
{
  "git.enableSmartCommit": true,
  "git.autofetch": true,
  "git.confirmSync": false,
  "git.postCommitCommand": "push",
  "git.pruneOnFetch": true
}

Pro Workflows

🎯 Partial Staging (Stage Selected Lines)
  1. Open a modified file
  2. Select specific lines you want to stage
  3. Right-click → "Stage Selected Ranges"
  4. Only those lines will be included in commit!
🔄 Quick Branch Switching
  1. Click branch name in status bar
  2. Start typing to filter branches
  3. Use arrow keys and Enter to switch
💾 Auto-save with Git
  1. Enable auto-save: File → Auto Save
  2. Set up commit message template
  3. Use "Smart Commit" to auto-stage all changes

Troubleshooting VS Code Git Issues

Common Issues and Solutions

❌ Issue: "Git not found"

Solution:
1. Install Git from git-scm.com
2. Restart VS Code
3. If still not working:
   Settings → Search "git.path"
   Set to Git installation path
   (e.g., C:\Program Files\Git\bin\git.exe)

❌ Issue: "Authentication failed"

Solution:
1. Clear credentials:
   Windows: Credential Manager
   Mac: Keychain Access
   Linux: git config --global credential.helper ""
   
2. Re-authenticate:
   Ctrl+Shift+P → "GitHub: Sign Out"
   Then sign in again

❌ Issue: "Changes not showing"

Solution:
1. Refresh Source Control: Click refresh icon
2. Check .gitignore file
3. Initialize repository if needed:
   Ctrl+Shift+P → "Git: Initialize Repository"
4. Check Git output:
   Output panel → Select "Git" from dropdown

VS Code Git Extensions Ecosystem

Must-Have Extensions

🔍 GitLens

Supercharges Git - blame, history, comparisons

ext install eamodio.gitlens

📊 Git Graph

Visual commit history and branch management

ext install mhutchie.git-graph

🐙 GitHub Pull Requests

Manage PRs without leaving VS Code

ext install GitHub.vscode-pull-request-github

📝 Conventional Commits

Helps write standardized commit messages

ext install vivaxy.vscode-conventional-commits

🎨 Git Emoji

Add emojis to commit messages

ext install seatonjiang.git-emoji

📚 Git History

View and search file/line history

ext install donjayamanne.githistory

Complete VS Code Git Workflow Example

🚀 Real Project Workflow

Starting a New Feature

1. Pull latest changes: Click Sync button (↻)

2. Create feature branch: 
   - Click "main" in status bar
   - Select "Create new branch"
   - Name: "feature/user-authentication"

3. Make changes:
   - Edit files normally
   - See changes in Source Control panel
   - Green = added, Blue = modified, Red = deleted

4. Stage changes:
   - Review each file (click to see diff)
   - Stage files with + button
   - Or stage individual lines (right-click)

5. Commit with message:
   - Type: "feat: add user login functionality"
   - Press Ctrl+Enter

6. Push to GitHub:
   - Click Publish Branch (first time)
   - Or click Sync for updates

7. Create Pull Request:
   - Click "Create Pull Request" in Source Control
   - Fill in description
   - Submit for review

8. After approval, merge:
   - Switch to main: Click branch → main
   - Pull latest: Click Sync
   - Delete old branch locally

You're Now a VS Code Git Power User! 🎉

VS Code + Git + GitHub = The ultimate development workflow

Quick Command Reference Card

Keep these handy while coding:

Remember: The best way to learn is by doing. Start using VS Code's Git features in your next project!