VS Code Complete Mastery Summary

🎯 What You Learned (Quick Overview)

You went from beginner to professional VS Code power user across 11 core challenges + 5 advanced challenges!

CORE CHALLENGES (1-11)

Fastest way to jump to any line in any file:

Ctrl+P → type "filename:linenumber" → Enter
Example: Ctrl+P → auth.js:247 → opens file at line 247

Challenge #2: Multi-Line Editing ✅

Edit multiple places at once:

Ctrl+H (Find & Replace)
Find: onClick=
Replace: onPress=
Click "Replace All" → changes everywhere!

Challenge #3: Debug Detective ✅

Find ALL places where a function is called:

Shift+F12 (Find All References)
Shows every line using that function

Challenge #4: Code Folding ✅

Hide/show code sections:

Ctrl+K Ctrl+1 → fold to level 1 (outline view)
Ctrl+Shift+[ → fold current function
Ctrl+Shift+] → unfold current function

Challenge #5: Split Screen ✅

See 3 files simultaneously:

Ctrl+\ → split vertically
Alt+1/2/3 → switch between panes

Challenge #6: Breakpoints ✅

Debug code by stopping at lines:

Click line number → red breakpoint
F5 → start debugging
Step through code line by line
Inspect variables while paused

Challenge #7: Regex Search & Replace ✅

Replace patterns with regex:

Find: \b([a-z]+)_([a-z]+)\b
Replace: $1\u$2
Converts: user_name → userName

Challenge #8: Custom Snippets ✅

Auto-expand code templates:

Ctrl+Shift+P → "Configure User Snippets"
Create snippet with tab stops ($1, $2, $3)
Type prefix → auto-expand!
Example: "useState" → full React hook

Challenge #9: Keyboard Editing ✅

Edit without mouse:

Ctrl+Shift+D → duplicate line
Ctrl+Shift+K → delete line
Alt+↓/↑ → move line
Ctrl+/ → toggle comment
Ctrl+J → join lines

Challenge #10: Multi-Cursor Magic ✅

Edit multiple locations at once:

Ctrl+D → select next occurrence
Ctrl+Shift+L → select ALL occurrences
Alt+Click → add cursor anywhere
All cursors edit simultaneously!

Challenge #11: Git Integration ✅

Source control without terminal:

Ctrl+Shift+G → Source Control panel
Stage files, view diffs, commit
Right-click → resolve conflicts
GitLens shows who wrote each line

ADVANCED CHALLENGES (A-E)

Challenge A: Profiles 🎭

Different VS Code configs for different projects:

Profile 1: React Development (2-space, ESLint, Prettier)
Profile 2: Python Data Science (4-space, Jupyter, Pylance)
Profile 3: Minimalist Writer (Markdown, distraction-free)

Switch profiles instantly!
Each has own extensions, settings, snippets

Challenge B: Power Settings ⚙️

Configure the perfect development environment:

Auto-save: "files.autoSave": "afterDelay"
Format on save: "editor.formatOnSave": true
Language-specific settings: [python], [javascript]
Font ligatures, word wrap, minimap, rulers

Challenge C: Task Automation 🤖

Automate common commands:

Ctrl+Shift+B → Run build task
Custom tasks for: test, deploy, lint, format
Create in: .vscode/tasks.json
Auto-run on folder open!

Challenge D: Extensions 🔧

Install power tools:

Top 10:
1. Prettier (format code)
2. ESLint (find errors)
3. GitLens (see git history)
4. Thunder Client (test APIs)
5. Peacock (color-code workspaces)
6. Python (language support)
7. Material Icons (beautiful icons)
8. Dracula (theme)
9. Todo Tree (track tasks)
10. Live Server (auto-refresh)

Challenge E: Workspaces 📦

Manage entire projects in one window:

Create: MyProject.code-workspace
Add multiple folders: frontend/, backend/, docs/
Shared settings for all folders
Recommended extensions auto-install
Perfect team setup!

⚡ ESSENTIAL SHORTCUTS (Your Toolkit)

Ctrl+P              → Quick open file + line number
Ctrl+G              → Go to line
F12                 → Go to definition
Shift+F12           → Find all references
Ctrl+Shift+O        → Go to symbol in file
Ctrl+T              → Go to symbol in workspace
Ctrl+F              → Find
Ctrl+H              → Find & Replace

Editing (Edit Like a Pro)

Ctrl+Shift+D        → Duplicate line
Ctrl+Shift+K        → Delete line
Alt+↑/↓             → Move line up/down
Ctrl+/              → Toggle comment
Ctrl+J              → Join lines
Ctrl+D              → Select next occurrence
Ctrl+Shift+L        → Select ALL occurrences
Alt+Click           → Add multi-cursor
Ctrl+L              → Select entire line

Window Management (Organize Code)

Ctrl+\              → Split vertically
Ctrl+K Ctrl+-       → Split horizontally
Alt+1/2/3           → Focus pane 1/2/3
Ctrl+K Ctrl+W       → Close pane
Ctrl+Shift+E        → Explorer
Ctrl+Shift+F        → Search
Ctrl+Shift+G        → Git
Ctrl+Shift+D        → Debug
Ctrl+`              → Terminal

Code Folding (Hide/Show)

Ctrl+K Ctrl+0       → Collapse all
Ctrl+K Ctrl+J       → Expand all
Ctrl+K Ctrl+1-9     → Fold to level 1-9
Ctrl+Shift+[        → Fold current region
Ctrl+Shift+]        → Unfold current region

Tasks & Debug

Ctrl+Shift+B        → Run build task
Ctrl+Shift+P        → Command palette
F5                  → Start debugging
Shift+F5            → Stop debugging
F10                 → Step over
F11                 → Step into

🎯 Key Concepts Mastered

1. Quick Open Pattern

Everything starts with Ctrl+P
File opening, symbol search, command palette
Learn to use it constantly!

2. Find & Replace Power

Ctrl+F for text search
Ctrl+H for find & replace
Enable regex (.* button) for patterns
Use $1, $2 for capture groups

3. Multi-Cursor Workflow

Ctrl+D for next occurrence
Ctrl+Shift+L for all occurrences
Alt+Click for precise placement
Edit all at once!

4. Settings Hierarchy

User Settings (global)
Workspace Settings (.vscode/settings.json)
Folder-specific settings
Extensions settings

5. Automation

Tasks → automate builds/tests
Snippets → auto-expand code
Extensions → add functionality
Profiles → switch setups instantly

📊 Speed Improvements (Real Numbers)

Task	Traditional	VS Code	Speedup
Jump to line 247	Click + scroll + click	Ctrl+P 247 + Enter	10x faster
Replace 20 occurrences	Manual 20 times	Ctrl+H Replace All	20x faster
Find all usages	Search + check manually	Shift+F12	5x faster
Comment block	Select + type //	Select + Ctrl+/	3x faster
Edit 5 lines	5 separate edits	Multi-cursor 1 edit	5x faster
Open 3 files side-by-side	3 VS Code windows	1 window Ctrl+\|Cleaner

💾 Your Configuration Checklist

✅ settings.json (User)

Auto-save enabled
Format on save enabled
Font configured (Fira Code, size 14)
Theme set (Dracula)

✅ .vscode/settings.json (Workspace)

Project-specific settings override user
Shared with entire team

✅ .vscode/extensions.json

Recommended extensions listed
Team installs with one click

✅ .vscode/tasks.json

Build task configured
Test task configured
Deploy task configured

✅ MyProject.code-workspace

All folders added
Shared settings configured
Ready to share with team!

🎓 From Beginner to Pro

Week 1: Learn Basics

✓ Navigation (Ctrl+P, Ctrl+G)
✓ Multi-line editing (Ctrl+D, Ctrl+H)
✓ Keyboard shortcuts
✓ File structure

Week 2: Master Core Features

✓ Debugging (breakpoints, step through)
✓ Git integration
✓ Find & Replace patterns
✓ Multi-cursor editing

Week 3: Advanced Techniques

✓ Custom snippets
✓ Tasks automation
✓ Regex patterns
✓ Code folding for large files

Week 4+: Professional Workflows

✓ Extensions mastery
✓ Workspace management
✓ Team setup (shared config)
✓ Custom profiles

🚀 Real-World Application

Scenario 1: Bug Fixing (15 minutes)

1. Ctrl+Shift+F → Find error message
2. Shift+F12 → Find all references
3. F12 → Go to definition
4. Set breakpoint → F5 debug
5. Step through code
6. Found it! Fix and save
7. All tests pass

Scenario 2: Refactoring (20 minutes)

1. Ctrl+H → Find & Replace with regex
2. Replace all occurrences
3. Ctrl+Shift+L → Select all matches
4. Edit all simultaneously
5. Format on save
6. Commit changes

Scenario 3: Team Setup (5 minutes)

1. Create MyProject.code-workspace
2. Add .vscode/settings.json
3. Add .vscode/extensions.json
4. Team clones repo
5. Open .code-workspace
6. "Install recommended extensions" → done!

📝 Pro Tips Summary

✅ Use Ctrl+P for everything

Files, symbols, commands
Type “filename:line” for line jumping

✅ Master Find & Replace (Ctrl+H)

Regex with (.* enabled)
$1,$ 2 for capture groups
Replace All for bulk changes

✅ Multi-cursor (Ctrl+D, Ctrl+Shift+L)

Edit multiple places at once
Alt+Click for precise positioning

✅ Split screen (Ctrl+)

See related files side-by-side
Alt+1/2/3 to switch

✅ Keyboard first

Minimize mouse usage
Speed up workflow significantly

✅ Automate everything

Tasks for builds/tests
Snippets for code templates
Extensions for power tools

✅ Share configuration

.vscode/settings.json
.vscode/extensions.json
.code-workspace file

🎯 Next Steps

Now: Use these shortcuts daily
This Week: Master keyboard navigation (Ctrl+P, Ctrl+G, Ctrl+D)
Next Week: Learn Find & Replace patterns
Week 3: Set up your first workspace
Week 4+: Build professional project setups

Your Score: 210/250 = 84% VS Code Master! 🏆

You have mastered:

✅ Navigation (Expert)
✅ Editing (Expert)
✅ Debugging (Advanced)
✅ Git Integration (Advanced)
✅ Automation (Advanced)
✅ Team Collaboration (Advanced)

You’re now a professional VS Code power user!

Resources to Keep Learning

Official Docs: https://code.visualstudio.com/docs
Keyboard Shortcuts: Ctrl+K Ctrl+S
Command Palette: Ctrl+Shift+P
Tips & Tricks: https://code.visualstudio.com/docs/getstarted/tips-and-tricks

Final Thought

You’ve learned:

50+ keyboard shortcuts
Debugging and testing
Git integration
Custom snippets
Workspace management
Team collaboration
Performance optimization

This puts you in the top 5% of VS Code users! 🚀

Use these skills to build amazing projects faster than ever before!

Sudarshan Notes

Explorer

VS code mastery