I’ve tried hundreds of VS Code extensions over the years. Most are mediocre, some actively slow down your editor, and a precious few genuinely transform your workflow. After years of ruthless pruning, here are the 20 extensions that survived — each one earns its place by saving me time every single day.

I’ll also share the extensions I’ve removed and why, because knowing what NOT to install is just as valuable.

The Essential Tier (Install These First)

1. GitHub Copilot

Why: Inline AI completions that actually work. After using it for two years, I can’t imagine coding without it.

// Type a comment describing what you want:
// Sort users by last login date, most recent first
// Copilot generates:
const sortedUsers = users.sort((a, b) => 
  new Date(b.lastLogin).getTime() - new Date(a.lastLogin).getTime()
);

For a deep comparison of all AI coding tools, see our dedicated article.

Pro Tip: Create a .github/copilot-instructions.md in each project root. Include your coding conventions, preferred libraries, and patterns. Copilot reads this for context-aware suggestions.

2. GitLens

Why: Git blame inline, file history, visual diff, branch comparison — everything Git without leaving your editor.

My most-used GitLens features:

  • Inline blame — See who wrote each line and when
  • File history — Visual timeline of all changes to a file
  • Commit graph — Replace git log --graph with a beautiful visual
  • Worktrees support — Manage Git worktrees from the sidebar

3. Error Lens

Why: Shows errors and warnings inline, right next to the problematic code. No more squinting at the underline trying to figure out what’s wrong.

const x: string = 42; // ← Error Lens shows: "Type 'number' is not assignable to type 'string'" right here

4. Pretty TypeScript Errors

Why: Makes TypeScript errors readable. Transforms the cryptic multi-line type errors into formatted, syntax-highlighted explanations.

Before: A wall of unreadable nested type text After: Clear formatting with the expected vs received types highlighted

5. ESLint + Prettier (or Biome)

Why: Automatic code formatting and linting on save. Non-negotiable for team consistency.

// settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

Pro Tip: In 2025, consider replacing ESLint + Prettier with Biome. It’s a single tool that does both, runs 35x faster, and requires almost zero configuration.

Productivity Tier

6. Auto Rename Tag

Rename an HTML opening tag, and the closing tag updates automatically. Simple but saves hundreds of keystrokes daily when working with React components or HTML.

7. Multiple Cursor Case Preserve

When you use multi-cursor rename (Ctrl+D), this preserves the casing of each match. Rename user and it correctly updates User, USER, user, and userId all at once.

8. TODO Highlight

Highlights TODO, FIXME, HACK, BUG comments in your code with bright colors. Makes technical debt visible.

// TODO: Implement caching layer (bright orange highlight)
// FIXME: Race condition when multiple users save (red highlight)
// HACK: Temporary workaround for API bug (yellow highlight)

9. Import Cost

Shows the size of imported packages inline:

import { format } from 'date-fns';     // 5.2K (gzipped)
import moment from 'moment';            // 72.1K (gzipped) ← yikes!
import { z } from 'zod';               // 13.4K (gzipped)

Essential for web performance awareness.

10. Path Intellisense

Autocompletes file paths in import statements. Sounds minor, but eliminates the “was it ../ or ../../?” guessing game.

Language & Framework Tier

11. Tailwind CSS IntelliSense

Autocomplete for Tailwind CSS classes, color previews, and hover documentation. Shows you what CSS each utility generates.

Feature What It Does
Autocomplete Suggests classes as you type
Color preview Shows actual color next to color utilities
Hover docs Displays generated CSS on hover
Linting Catches conflicting classes
Class sorting Auto-sorts classes on save

12. Prisma

Syntax highlighting, auto-completion, and formatting for Prisma schema files. If you use Prisma ORM, this is non-negotiable.

13. vscode-styled-components / CSS Modules

For styled-components: syntax highlighting and IntelliSense inside template literals. For CSS Modules: autocomplete for .module.css class names in JSX.

14. REST Client (Thunder Client)

Test APIs directly from VS Code without switching to Postman. I use this for quick endpoint testing during API development.

### Get all users
GET http://localhost:3000/api/users
Authorization: Bearer {{token}}

### Create user
POST http://localhost:3000/api/users
Content-Type: application/json

{
  "name": "Michael",
  "email": "[email protected]"
}

15. Docker

Manage Docker containers, images, and compose files from VS Code. View logs, attach shells, and manage Docker configurations without leaving the editor.

Testing & Debugging Tier

16. Vitest / Jest Runner

Run individual tests with a click. See pass/fail status inline. Debug specific tests with breakpoints. For teams with proper testing strategies, this is essential.

17. Console Ninja

Shows console.log output directly in your editor, next to the line that produced it. No more switching to the terminal to see output:

const result = calculate(42);
console.log(result); // ← Console Ninja shows "84" right here inline

Appearance & UX Tier

18. Catppuccin Theme (or One Dark Pro)

Clean, readable, eye-friendly. I’ve used Catppuccin Mocha for a year with no desire to switch.

19. Material Icon Theme

File icons that help you instantly identify file types in the explorer. Distinguishes between .ts, .tsx, .test.ts, .config.ts visually.

20. Indent Rainbow

Colors each indentation level differently. Makes deeply nested code easier to parse visually — especially helpful for YAML (looking at you, GitHub Actions workflows).

Extensions I Removed (And Why)

Extension Why I Removed It
Bracket Pair Colorizer Built into VS Code now
Live Server Using Vite/Next.js dev server instead
Settings Sync Built into VS Code now
Path Autocomplete Path Intellisense is better
Turbo Console Log Console Ninja replaced it
TabNine GitHub Copilot is better
Bookmarks VS Code’s built-in sticky scroll replaced most uses
Code Spell Checker Too many false positives on tech terms

My settings.json (The Important Bits)

{
  "editor.fontSize": 14,
  "editor.fontFamily": "JetBrains Mono, Fira Code, Menlo",
  "editor.fontLigatures": true,
  "editor.lineHeight": 1.6,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.stickyScroll.enabled": true,
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.guides.bracketPairs": true,
  "editor.inlineSuggest.enabled": true,
  
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  
  "files.autoSave": "onFocusChange",
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
  
  "terminal.integrated.fontFamily": "JetBrains Mono",
  "terminal.integrated.fontSize": 13,
  
  "workbench.colorTheme": "Catppuccin Mocha",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.startupEditor": "none",
  
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  
  "git.autofetch": true,
  "git.confirmSync": false,
  "git.enableSmartCommit": true
}

Performance Tips: Keep VS Code Fast

Tip Impact
Disable unused extensions per workspace High
Set "files.watcherExclude" for node_modules High
Disable minimap Medium
Use workspace-specific extension recommendations Medium
Keep extensions under 25 Medium
Disable telemetry extensions Low 
// Exclude heavy directories from file watcher
{
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/.git/objects/**": true,
    "**/dist/**": true,
    "**/.next/**": true
  }
}

Pro Tip: Use VS Code’s built-in extension bisect feature (Developer: Start Extension Bisect) when your editor feels sluggish. It disables half your extensions at a time to identify the performance culprit.

Common Mistakes with VS Code Extensions

1. Installing Too Many

Every extension adds startup time and memory usage. I aim for under 25 active extensions. Use workspace-specific extensions to only enable what each project needs.

2. Not Using Workspace Recommendations

// .vscode/extensions.json
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss",
    "prisma.prisma"
  ]
}

This ensures everyone on the team has the right extensions for the project.

3. Conflicting Formatters

If you have multiple formatters installed (Prettier, Beautify, format-on-save extensions), they’ll fight each other. Set explicit defaultFormatter per language:

{
  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
}

4. Not Checking Extension Memory Usage

Open Command Palette → “Developer: Show Running Extensions” to see which extensions are using the most memory and causing the most activation time.

5. Using Deprecated Extensions

Many popular extensions from 2020-2022 are now either unmaintained or replaced by VS Code built-in features. Audit your extensions quarterly.

FAQ

How many extensions should I have installed?

I recommend 15-25 for most developers. Beyond 30, you’ll likely notice performance degradation and conflicting behaviors. Quality over quantity — every extension should earn its place by saving you time daily. Use workspace-specific enabling for project-specific tools.

Does VS Code get slower with more extensions?

Yes. Each extension adds to startup time and can impact editor responsiveness. The impact varies — some extensions are lightweight (themes, icons) while others are heavy (language servers, AI tools). Use the built-in “Running Extensions” panel to monitor impact.

Should I use VS Code or switch to Cursor/Zed?

If you’re happy with VS Code and GitHub Copilot, there’s no urgent reason to switch. Cursor adds better AI multi-file editing (see our comparison). Zed is faster but has fewer extensions. Try Cursor if you want more powerful AI assistance; try Zed if performance is your top priority.

What’s the best free alternative to GitHub Copilot?

Codeium offers free AI completions and chat that work well in VS Code. Sourcegraph Cody’s free tier is also solid. Neither matches Copilot’s quality in my testing, but for developers who can’t expense Copilot, they’re good options.

How do I sync extensions across machines?

VS Code has built-in Settings Sync (sign in with GitHub or Microsoft account). It syncs extensions, settings, keybindings, and snippets across all your machines. Enable it in Settings → Turn on Settings Sync.