Arpit Gupta

Posted on Jan 20

10 VSCode Hidden Powers You’ll Wish You Knew Earlier!

#vscode #frontend #backend #programming

Visual Studio Code (VSCode) has undoubtedly become the ultimate code editor for millions of developers worldwide. Its lightning-fast speed, versatility, and ever-expanding ecosystem of extensions make it a true powerhouse. But here’s the thing—even if you’ve been using VSCode for years, there are hidden features and tricks that can make your coding experience even more powerful. Let’s dive into 10 of these game-changing gems that will elevate your productivity and transform the way you code.

1. Multi-Cursor Magic: Edit Like a Pro

Tired of making repetitive edits? VSCode’s multi-cursor feature lets you edit multiple lines at once, saving you tons of time. Here’s how:

Press Alt + Click (or Option + Click on Mac) to add cursors wherever you want.
Use Ctrl + D (or Cmd + D) to select the next occurrence of a word.

With this feature, you can rename variables, update HTML attributes, or refactor code in a matter of seconds.

2. Zen Mode: Your Focus Sanctuary

When distractions are eating up your time, Zen Mode is your secret weapon. It hides everything except the editor, giving you a clean slate to focus entirely on your code.

Activate it with Ctrl + K Z (or Cmd + K Z on Mac).
Exit by pressing Esc twice.

Pair this with a soothing playlist, and you’ll be in the zone, writing code like never before.

3. Command Palette: Your All-in-One Shortcut

The Command Palette (Ctrl + Shift + P or Cmd + Shift + P) is your one-stop-shop for everything in VSCode. Whether you’re looking to install extensions, change settings, or execute commands, this is where it all happens.

Pro Tip: Type > to run a command or ? to access settings-related actions.

4. Snippets: Code Faster, Smarter

Snippets are your best friend when you need to write repetitive code faster. Define custom code blocks and insert them with just a few keystrokes.

Go to File > Preferences > User Snippets.
Choose a language and add your snippet:

{
  "Print to Console": {
    "prefix": "log",
    "body": [
      "console.log('$1');"
    ],
    "description": "Log output to console"
  }
}

Now, typing log expands into console.log(''); in a heartbeat.

5. Peek Definition: Skip the Jumping Around

With Peek Definition (Alt + F12 or Option + F12), you can view function or variable definitions right in the editor without jumping back and forth. This feature is a lifesaver when navigating large codebases.

6. Integrated Terminal Tweaks: Maximize Your Productivity

The integrated terminal isn’t just for running commands—it’s a productivity booster. Open it with Ctrl + \(orCmd + `` on Mac). You can:

Split terminals with Ctrl + \ (or Cmd + \).
Change shell types (PowerShell, Bash, Zsh, etc.) in settings.

This makes managing your workflows so much easier.

7. Live Server Extension: Instant Feedback for Web Development

If you’re a web developer, the Live Server extension is a game-changer. It auto-refreshes your browser as you save changes to your HTML, CSS, or JavaScript files. I’ve personally used this a lot for ArpitStack.com, and it’s been a huge time-saver!

Install the Live Server extension.
Right-click your index.html and select Open with Live Server.

Say goodbye to manual refreshes and hello to instant updates!

8. Code Navigation with Breadcrumbs: Navigate Like a Pro

Breadcrumbs at the top of your editor provide a roadmap of your code. Enable it via:

View > Show Breadcrumbs.

Click on a breadcrumb to quickly jump between files, functions, or classes. It’s like having a map to navigate your code effortlessly.

9. GitLens: Supercharge Your Git Workflow

If you’re working in a team, GitLens is an absolute must-have. This extension brings Git to life inside VSCode by showing:

Who last modified a line of code.
A detailed history of file changes.
Inline blame annotations.

It’s a powerful tool for collaborating on complex projects and understanding the evolution of your code.

10. Settings Sync Across Devices: Stay Consistent Everywhere

Switching machines? No problem! Keep your VSCode setup consistent with Settings Sync. This syncs your extensions, themes, and settings across devices, so you never have to waste time reconfiguring.

Go to File > Preferences > Turn on Settings Sync.
Sign in with GitHub or Microsoft.

Your setup will follow you wherever you go.

Bonus: Custom Themes for VSCode

Spending long hours coding? Make it visually appealing with custom themes. Try popular ones like:

One Dark Pro
Dracula Official
Palenight Theme

Combine this with icons like Material Icon Theme for a polished, aesthetically pleasing look.

Final Thoughts: Unlock Your VSCode Potential

VSCode isn’t just a code editor—it’s a productivity powerhouse. By unlocking these hidden gems, you can write code faster, debug smarter, and collaborate more efficiently. Which of these gems are you adding to your workflow today? Let me know in the comments!

About ArpitStack

I’m passionate about creating innovative, open-source solutions to simplify and enhance developer workflows. ArpitStack.com is my personal portfolio where I showcase my work, including projects like SecretStack, CloudStack, and more.

Feel free to explore my GitHub Repos for innovative solutions, and if you find my work valuable, consider supporting me through GitHub Sponsors or by buying me a coffee. Your support is greatly appreciated ❤️!

DEV Community