VS Code Tips
- 1. Introduction to VS Code
- 2. Command Palette & Navigation
- 3. Multi-Cursor & Advanced Editing
- 4. Workspace & Global Search
- 5. Keyboard Shortcuts Customization
- 6. Integrated Terminal Secrets
- 7. Custom Snippets & Emmet
- 8. Advanced Git Integration
- 9. Theme & Font Customizations
- 10. Essential Productivity Extensions
- 11. Debugging in VS Code
- 12. Task Automation (tasks.json)
- 13. Remote Development (SSH, Docker, WSL)
- 14. Profiles & Settings Sync
- 15. Best Practices & Speed Up
2. Command Palette & Navigation
The secret to coding fast is minimizing mouse interaction. Reaching for your mouse to find a file, trigger a settings change, or split a window slows down your thought flow. VS Code provides high-efficiency navigation tools to perform all workspace tasks straight from your keyboard.
The Heart of VS Code: The Command Palette
The **Command Palette** is your central portal to trigger any action, configuration, or extension command in VS Code. You can open it instantly using the following shortcut:
| Platform | Shortcut Key |
|---|---|
| Windows / Linux | Ctrl + Shift + P |
| macOS | Cmd + Shift + P |
When you type a command (e.g. "Toggle Sidebar" or "Install Extensions"), the palette filters options instantly. It also displays the associated hotkey right next to the command, helping you learn them over time!
Rapid File Switching
Searching for files manually through the nested folders of your explorer sidebar is highly inefficient. Use the **Quick Open** palette to open any file in your active workspace in milliseconds:
- Trigger Quick Open using: Ctrl + P (or Cmd + P on macOS).
- Type characters from the filename. VS Code supports fuzzy matching—e.g. typing `usrctr` matches `userController.js`!
- Press Enter to open.
Navigating by Symbols and Lines
Once inside a massive code file containing thousands of lines, how do you find a specific function or class definition quickly? Use these targeted search operators inside the Quick Open bar:
- Go to Symbol: Type @ inside the bar (or press Ctrl + Shift + O / Cmd + Shift + O). This lists all functions, classes, and variables in the current file. Group them by typing a colon:
@:. - Go to Workspace Symbol: Type # inside the bar to search for symbol declarations across your *entire* folder structure.
- Go to Line Number: Type : followed by the line number (e.g.,
:142) to jump straight to that line. (Shortcut: Ctrl + G).
Editor Screen Partitioning (Split Editor)
Comparing files or referencing a component schema while writing code is easy using split-screen layouts:
- Split Screen: Press Ctrl + \ (or Cmd + \ on macOS) to split your active editor vertically.
- Toggle Split Orientation: Switch split direction from vertical to horizontal using Shift + Alt + 0 (Cmd + Option + 0).
- Switch Focus: Jump between editor panels using Ctrl + 1, Ctrl + 2, or Ctrl + 3.
