💻 VS Code Shortcuts & Extensions Guide

📝 Platform Keys

Windows/Linux: Ctrl = Control key, Alt = Alt key, Shift = Shift key

macOS: Cmd = Command key (⌘), Alt = Option key (⌥), Shift = Shift key (⇧)

💡 Tip: Access all commands with Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)

⚡ Essential Shortcuts

Command Palette
Ctrl/Cmd + Shift + P
Access all commands
Quick Open File
Ctrl/Cmd + P
Open files by name
Settings
Ctrl/Cmd + ,
Open settings
Toggle Terminal
Ctrl/Cmd + `
Show/hide integrated terminal
Toggle Sidebar
Ctrl/Cmd + B
Show/hide sidebar
Save All
Ctrl/Cmd + K S
Save all open files

✏️ Editing Shortcuts

Cut Line
Ctrl/Cmd + X
Cut entire line (empty selection)
Copy Line Down/Up
Alt + Shift + ↓/↑
Duplicate line
Move Line Up/Down
Alt + ↓/↑
Move entire line
Delete Line
Ctrl/Cmd + Shift + K
Delete entire line
Comment Line
Ctrl/Cmd + /
Toggle line comment
Block Comment
Alt + Shift + A
Toggle block comment
Format Document
Alt + Shift + F
Format entire file
Format Selection
Ctrl/Cmd + K F
Format selected code

🎯 Multi-Cursor & Selection

Add Cursor
Alt + Click
Insert cursor at click position
Add Cursor Above/Below
Ctrl/Cmd + Alt + ↓/↑
Add cursor on lines above/below
Select Next Match
Ctrl/Cmd + D
Add selection to next match
Select All Occurrences
Ctrl/Cmd + Shift + L
Select all occurrences of selection
Expand Selection
Alt + Shift + →
Expand selection by scope
Column Selection
Shift + Alt + Drag
Select column/box

# Multi-cursor example

const user| = "John";

const user| = "Jane";

const user| = "Bob";

// Edit all at once!

🔍 Search & Navigation

Find
Ctrl/Cmd + F
Find in file
Find & Replace
Ctrl/Cmd + H
Replace in file
Find in Files
Ctrl/Cmd + Shift + F
Search across files
Go to Line
Ctrl/Cmd + G
Jump to line number
Go to Symbol
Ctrl/Cmd + Shift + O
Go to symbol in file
Go to Definition
F12
Jump to definition
Peek Definition
Alt + F12
Show definition inline
Navigate Back/Forward
Alt + ←/→
Navigate cursor history

🧠 Code Intelligence

Trigger IntelliSense
Ctrl/Cmd + Space
Show suggestions
Quick Fix
Ctrl/Cmd + .
Show quick fixes
Rename Symbol
F2
Rename all occurrences
Show Hover
Ctrl/Cmd + K I
Show hover information
Find References
Shift + F12
Find all references
Extract Method
Ctrl/Cmd + .
Refactor: Extract to method

🔌 Essential Extensions for React & WordPress Development

ES7+ React/Redux/React-Native snippets
React
dsznajder.es7-react-js-snippets
  • React component snippets (rafce, rfc, rcc)
  • Hook snippets (useState, useEffect)
  • Redux snippets
  • PropTypes snippets

# Quick snippets:

rafce → React Arrow Function Component Export

usf → useState Hook

uef → useEffect Hook

Prettier - Code formatter
Formatting
esbenp.prettier-vscode
  • Auto-format on save
  • Consistent code style
  • Supports JS, CSS, HTML, JSON
  • Configurable via .prettierrc
ESLint
Linting
dbaeumer.vscode-eslint
  • Real-time error detection
  • Auto-fix on save
  • React hooks rules
  • Custom rule configuration
Auto Rename Tag
HTML/JSX
formulahendry.auto-rename-tag
  • Automatically rename paired HTML/JSX tags
  • Works with React components
  • Saves time on refactoring
Tailwind CSS IntelliSense
CSS
bradlc.vscode-tailwindcss
  • Autocomplete for Tailwind classes
  • Hover preview of CSS
  • Linting for class conflicts
  • Color decorators
WordPress Snippets
WordPress
wordpresstoolbox.wordpress-toolbox
  • WordPress function snippets
  • Hook suggestions
  • WP-CLI commands
  • Custom post type snippets
GitLens
Git
eamodio.gitlens
  • Inline blame annotations
  • File history exploration
  • Compare branches/commits
  • Visual commit graph
Live Server
Development
ritwickdey.liveserver
  • Local development server
  • Live reload on save
  • HTTPS support
  • Customizable port
Thunder Client
API Testing
rangav.vscode-thunder-client
  • REST API testing
  • Collections & environments
  • GraphQL support
  • No external dependencies
Path Intellisense
Navigation
christian-kohler.path-intellisense
  • Autocomplete file paths
  • Works with imports
  • Supports all file types
Bracket Pair Colorizer
Visual
CoenraadS.bracket-pair-colorizer-2
  • Color-matched brackets
  • Easier code navigation
  • Customizable colors
  • Note: Now built into VS Code!

⚙️ Recommended VS Code Settings

settings.json Configuration

{
  // Editor Settings
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": true,
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.linkedEditing": true,
  "editor.bracketPairColorization.enabled": true,
  
  // Terminal
  "terminal.integrated.fontSize": 14,
  
  // Files
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  
  // Prettier
  "prettier.singleQuote": true,
  "prettier.semi": true,
  "prettier.tabWidth": 2,
  
  // Emmet for JSX
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  
  // Git
  "git.autofetch": true,
  "git.confirmSync": false,
  
  // Explorer
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false
}

🎨 Useful Command Palette Commands

Command Description
> Show all commands
@ Go to symbol in file
# Go to symbol in workspace
: Go to line number
? Show help
task Run tasks
ext install Install extensions
reload window Reload VS Code window
zen mode Toggle zen mode
theme Change color theme

💡 Productivity Tips