Why VS Code Mastery Matters
Visual Studio Code is the most popular code editor among web developers for good reason. It is fast, extensible, and deeply integrated with modern development workflows. But most developers use only a fraction of its capabilities. Mastering VS Code shortcuts and features can save you hours every week.
Essential Keyboard Shortcuts
These shortcuts work on macOS. Replace Cmd with Ctrl on Windows/Linux.
File Navigation
# File Navigation
Cmd+P # Quick Open - fuzzy search for files by name
Cmd+Shift+P # Command Palette - search all commands
Cmd+Shift+E # Toggle Explorer sidebar
Cmd+Shift+F # Search across all files
Cmd+Shift+H # Search and replace across all files
Cmd+B # Toggle sidebar visibility
Cmd+J # Toggle bottom panel (terminal, output, problems)
Cmd+\ # Split editor
Cmd+1/2/3 # Focus editor group 1, 2, or 3
Cmd+W # Close current tab
Cmd+Shift+T # Reopen last closed tab
Ctrl+Tab # Cycle through open tabs
Cmd+Shift+O # Go to symbol in current file
Cmd+T # Go to symbol in workspaceCode Editing
# Line Operations
Cmd+Shift+K # Delete entire line
Alt+Up/Down # Move line up/down
Alt+Shift+Up/Down # Copy line up/down
Cmd+Enter # Insert line below
Cmd+Shift+Enter # Insert line above
Cmd+Shift+\ # Jump to matching bracket
# Selection
Cmd+D # Select next occurrence of current word
Cmd+Shift+L # Select ALL occurrences of current word
Cmd+L # Select entire line
Alt+Shift+Drag # Column (box) selection
Cmd+Shift+Space # Trigger parameter hints
# Code Intelligence
F12 # Go to Definition
Alt+F12 # Peek Definition (inline preview)
Shift+F12 # Find All References
F2 # Rename Symbol (refactors all references)
Cmd+. # Quick Fix / Code Actions
Cmd+/ # Toggle line comment
Alt+Shift+A # Toggle block comment
Cmd+K Cmd+F # Format selection
Alt+Shift+F # Format entire documentMulti-Cursor Editing
Multi-cursor editing is one of the most powerful features in VS Code. It lets you edit multiple locations simultaneously, turning repetitive edits into a single action.
# Multi-Cursor Shortcuts
Alt+Click # Add cursor at click position
Cmd+Alt+Up/Down # Add cursor above/below
Cmd+D # Add selection for next occurrence
Cmd+Shift+L # Add cursors to ALL occurrences
Cmd+U # Undo last cursor addition
Escape # Exit multi-cursor mode
# Example workflow: Rename a CSS class across a file
# 1. Select "old-class" with Cmd+D
# 2. Press Cmd+D repeatedly to select each occurrence
# 3. Type "new-class" - all selections update simultaneouslyIntegrated Terminal
# Terminal Shortcuts
Ctrl+` # Toggle terminal panel
Cmd+Shift+` # Create new terminal
Cmd+Shift+[/] # Switch between terminals (macOS)
Cmd+K # Clear terminal (when terminal is focused)
# Split terminals
Cmd+\ # Split terminal horizontally
# Terminal profiles in settings.json
# "terminal.integrated.profiles.osx": {
# "zsh": { "path": "/bin/zsh" },
# "node": { "path": "node" }
# }Workspace Configuration
VS Code settings can be configured at three levels: User (global), Workspace (project-specific), and Folder. Workspace settings live in .vscode/settings.json and are committed to version control so the whole team shares the same configuration.
// .vscode/settings.json - Recommended project settings
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.organizeImports": "explicit"
},
"editor.tabSize": 2,
"editor.wordWrap": "on",
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true,
"editor.inlineSuggest.enabled": true,
"editor.minimap.enabled": false,
"editor.renderWhitespace": "boundary",
"editor.suggest.preview": true,
"editor.stickyScroll.enabled": true,
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,
"files.exclude": {
"**/.git": true,
"**/node_modules": true,
"**/.next": true,
"**/dist": true
},
"search.exclude": {
"**/node_modules": true,
"**/dist": true,
"**/.next": true,
"**/coverage": true,
"**/*.min.js": true
},
"typescript.preferences.importModuleSpecifier": "relative",
"typescript.updateImportsOnFileMove.enabled": "always",
"typescript.suggest.autoImports": true,
"typescript.tsdk": "node_modules/typescript/lib",
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}Snippets
Custom snippets let you insert boilerplate code with a few keystrokes. Go to Cmd + Shift + P > "Configure User Snippets" to create them.
// typescriptreact.json - Custom React snippets
{
"React Functional Component": {
"prefix": "rfc",
"body": [
"interface ${1:Component}Props {",
" $2",
"}",
"",
"export function ${1:Component}({ $3 }: ${1:Component}Props) {",
" return (",
" ",
" $0",
" ",
" );",
"}"
],
"description": "React functional component with TypeScript"
},
"useState Hook": {
"prefix": "us",
"body": "const [$1, set${1/(.*)/${1:/capitalize}/}] = useState<$2>($3);",
"description": "React useState hook"
},
"useEffect Hook": {
"prefix": "ue",
"body": [
"useEffect(() => {",
" $1",
"",
" return () => {",
" $2",
" };",
"}, [$3]);"
],
"description": "React useEffect hook with cleanup"
}
}Tasks and Launch Configurations
// .vscode/tasks.json - Automated build tasks
{
"version": "2.0.0",
"tasks": [
{
"label": "dev",
"type": "npm",
"script": "dev",
"group": "build",
"isBackground": true,
"problemMatcher": ["$tsc-watch"]
},
{
"label": "test:watch",
"type": "npm",
"script": "test:watch",
"group": "test",
"isBackground": true
},
{
"label": "lint",
"type": "npm",
"script": "lint",
"group": "build",
"problemMatcher": ["$eslint-stylish"]
}
]
}Power User Tips
- Zen Mode: Press
Cmd+K Zfor distraction-free coding. Press Escape twice to exit. - Sticky Scroll: Enable
editor.stickyScroll.enabledto keep function/class headers visible as you scroll. - Timeline View: Right-click a file in Explorer to see its local edit history, even without Git.
- Emmet: Type HTML abbreviations like
div.container>ul>li*5and press Tab to expand. - Cmd+K Cmd+S: Open keyboard shortcuts editor to customize any shortcut.