Visual Studio Code: Never-Known Tricks and Tips

Visual Studio Code (VS Code) is one of the most versatile and powerful code editors available today. While many developers are familiar with its basic functionalities, there are numerous hidden tricks and tips that can significantly enhance your productivity.

1. Multi-Cursor Magic

• Alt + Click: Add multiple cursors by holding down Alt (or Option on Mac)
• Ctrl + D: Select the next occurrence of the current word
• Shift + Alt + Down/Up: Duplicate the current line or selection

2. Integrated Terminal Shortcuts

• Toggle Terminal: Ctrl + ` (backtick)
• Split Terminal: Ctrl + Shift + 5
• Run Selected Code: Ctrl + Enter

3. Zen Mode

Activate Zen Mode with Ctrl + K Z to remove all distractions and focus entirely on your code. It hides all UI elements except the editor.

Press Esc twice to exit Zen Mode.

4. File Navigation Secrets

• Quick Open: Press Ctrl + P to bring up a search bar and quickly jump to any file in your workspace.
• Navigate Symbols: Use Ctrl + Shift + O to search for functions, classes, or variables within a file.
• Recent Files: Press Ctrl + Tab to cycle through recently opened files.

5. IntelliSense Customization

• Use Ctrl + Space to manually trigger IntelliSense suggestions.
• Customize IntelliSense by tweaking the editor.suggestSelection setting in your settings.json file to prioritize specific suggestions.

6. Extensions You Can’t Miss

• Prettier - Code formatter: Automatically format your code.
• Live Server: Launch a local development server with live reload functionality.
• GitLens - Git supercharged: Get powerful insights into Git repositories and history.

7. Command Palette Mastery

Open the Command Palette with Ctrl + Shift + P. From here, you can access virtually every command in VS Code.

Use fuzzy search terms to find commands quickly—no need to memorize exact names.

8. Debugging Like a Pro

• Use breakpoints to pause execution by clicking next to the line numbers.
• Press F5 to start debugging, F10 to step over, and F11 to step into functions.
• View variables, call stacks, and debug console all within the Debug panel.

9. Workspace Management

• Workspaces: Save your project configurations by creating a workspace file (File > Save Workspace As...).
• Split Editors: Drag a tab to the side or use Ctrl + \ to view multiple files simultaneously.

10. Settings Sync

Sync your settings across devices by enabling Settings Sync under the gear icon. You’ll never lose your customizations again.

11. Emmet Abbreviations

Use Emmet for rapid HTML and CSS coding. For instance, typing div.container>ul>li*5 and pressing Tab will expand to:

<div class="container">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

12. Peek and References

• Use Alt + F12 to peek at a definition without leaving your current file.
• Press Shift + F12 to find all references to a symbol in your project.

13. Markdown Preview

• Open a Markdown file and press Ctrl + Shift + V to see a live preview.
• Use Ctrl + K V to open the preview in a separate tab side-by-side.

14. Custom Snippets

Create reusable code snippets by navigating to File > Preferences > User Snippets.

Define your own snippets for any programming language to speed up repetitive tasks.

15. Advanced Search and Replace

• Open search with Ctrl + Shift + F and use regex for advanced searches.
• Replace across multiple files by enabling the replace option in the search bar.

By mastering these tricks and tips, you can unlock the full potential of Visual Studio Code and supercharge your coding workflow.