VS Code Ninja Tricks: 10 Hidden Features That’ll 10x Your Productivity

#webdev #programming #javascript #vscode

We all love VS Code—it’s fast, customizable, and packed with features. But even seasoned developers miss some of its hidden gems. Here are 10 underrated features that’ll turbocharge your workflow:

1. Emmet in Non-HTML Files

What it does: Expands shorthand syntax (like CSS abbreviations) in JS, TS, JSX, and more.

How to use: Type m10 → press Tab → becomes margin: 10px; in a CSS file.

Pro Tip: Enable it via emmet.includeLanguages in settings (e.g., "emmet.includeLanguages": {"javascript": "html"}).

2. Command Palette Deep Dives

What it does: Run advanced commands like >Git: Stash or >Debug: Start Without Debugging directly.

Secret: Type ? in the Command Palette (Ctrl/Cmd+Shift+P) to browse all available commands.

3. Multi-Cursor Magic with `Ctrl/Cmd+D`

What it does: Select next occurrence of the current word—no mouse needed.

Power Move: Press Ctrl/Cmd+D repeatedly to select multiple matches, then edit all at once.

4. Inline Debugging Values

What it does: Pin variable values during debugging without switching contexts.

How: Hover over a variable → click the pin icon. Value stays visible even as you step through code!

5. Task Auto-Detection

What it does: VS Code auto-detects npm/gulp/grunt tasks in your project.

Access: Terminal > Run Task → see all detected scripts (e.g., build, lint).

6. Timeline View

What it does: Track file history (local saves + Git commits) in the Explorer sidebar.

Why it’s gold: Revert to yesterday’s version without touching Git!

7. Bracket Pair Colorization

What it does: Color-matches nested brackets for visual clarity.

Enable: Add "editor.bracketPairColorization.enabled": true to settings.json.

8. Custom Snippets with Placeholders

What it does: Insert dynamic templates (e.g., React components).

Example:

"Component Template": {  
  "prefix": "rfce",  
  "body": [  
    "import React from 'react';",  
    "",  
    "const ${1:Component} = () => {",  
    "  return (",  
    "    <div>${2:content}</div>",  
    "  );",  
    "};",  
    "",  
    "export default ${1:Component};"  
  ]  
}

9. Diff Editor in Terminal

What it does: Compare files directly from the terminal.

Try: Run code -d file1.js file2.js to open a diff view.

10. Settings Sync via GitHub

What it does: Sync extensions, settings, and keybindings across machines.

Set up: Click the gear icon → Turn on Settings Sync → sign in with GitHub.

Wrapping Up

VS Code is a treasure trove of productivity boosts—if you know where to look. Try these tricks today, and watch your coding speed soar! 🚀

Which feature blew your mind? Share your favorites below! 👇

DEV Community