Introduction
VS Code is the most popular code editor, but most developers barely scratch the surface of its capabilities. The right extensions, keyboard shortcuts, and settings can dramatically speed up your workflow.
This guide focuses on the highest-impact productivity improvements — the 20% of features that give you 80% of the speed boost.
From essential extensions to custom snippets and multi-cursor editing, these tips apply whether you're writing React, CSS, or any web technology.
Key Concepts
Essential Keyboard Shortcuts
plain
// Navigation
Cmd+P — Quick file open
Cmd+Shift+P — Command palette
Cmd+Shift+F — Search across files
Ctrl+G — Go to line
Cmd+D — Select next occurrence
Cmd+Shift+L — Select all occurrences
// Editing
Alt+Up/Down — Move line up/down
Shift+Alt+Down — Duplicate line
Cmd+Shift+K — Delete line
Cmd+/ — Toggle comment
Cmd+Shift+[ — Fold region
Cmd+Shift+] — Unfold region
Multi-Cursor Editing
Hold Alt and click to place multiple cursors. Select a word and press Cmd+D to select the next occurrence. Use Cmd+Shift+L to select all occurrences at once. This is faster than find-and-replace for targeted edits.
Practical Examples
1. Essential Extensions
bash
// Install via command line:
code --install-extension bradlc.vscode-tailwindcss
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension formulahendry.auto-rename-tag
code --install-extension wix.vscode-import-cost
code --install-extension usernamehw.errorlens
code --install-extension GitHub.copilot
2. Custom Snippets
json
// .vscode/snippets.code-snippets
{
"React Functional Component": {
"prefix": "rfc",
"body": [
"export function ${1:${TM_FILENAME_BASE}}(${2:props}) {",
" return (",
" <div>",
" $0",
" </div>",
" );",
"}"
]
}
}
3. Workspace Settings
json
// .vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true,
"editor.minimap.enabled": false,
"files.autoSave": "onFocusChange"
}
4. Terminal Integration
plain
// Split terminal: Cmd+\
// New terminal: Ctrl+Shift+`
// Toggle terminal: Ctrl+`
// Run tasks: Cmd+Shift+B
// Create custom tasks in .vscode/tasks.json
// Use terminal profiles for different environments
Best Practices
- ✅ Learn Cmd+P and Cmd+Shift+P — they're the gateway to everything
- ✅ Set up format-on-save with Prettier and ESLint
- ✅ Create project-specific snippets for repeated patterns
- ✅ Use multi-cursor editing instead of find-and-replace
- ✅ Customize keyboard shortcuts for frequent actions
- ❌ Don't install too many extensions — they slow startup
- ❌ Don't ignore the integrated terminal — it's context-aware
Common Pitfalls
- 🚫 Extension bloat — disable extensions you don't actively use
- 🚫 Not using workspace settings — project-specific config prevents conflicts
- 🚫 Manual formatting — set up auto-format and never think about it again
- 🚫 Ignoring the Problems panel — it shows errors across all open files
Related Guides
Designdesign
Was this article helpful?