Our Favorite VS Code Extensions

Extension bloat is real. Install 50 extensions that sound useful, and suddenly VS Code takes 10 seconds to start and your CPU fan never stops. We've been there.

This list is intentionally short. These are extensions we've used for months or years, not things we installed last week. If an extension doesn't earn its resource usage, it's gone.

The Essentials

ESLint

Shows linting errors inline as you type. Red squiggly lines under problems, auto-fix on save. No excuses for shipping lint errors when they're highlighted in real-time.

Configure it to fix on save: in settings, enable "editor.codeActionsOnSave": { "source.fixAll.eslint": true }

Prettier

Format on save. Stop thinking about code formatting. Stop arguing about it. Let Prettier decide and move on with your life.

Set it as your default formatter and enable format on save. Your code will look consistent without effort.

GitLens

Git blame inline, commit history, branch comparisons. When you need to know who wrote a line and why, GitLens tells you without leaving the editor.

The free version is plenty. The inline blame is the killer feature. Some people find it distracting, but you can customize what shows.

GitHub Copilot

Yes, it costs money. Yes, it's worth it. The autocomplete suggestions save enough time to pay for themselves within a week.

It's not magic. It gets things wrong. But it's like having a junior developer who can type really fast. Review what it suggests, accept the good stuff, reject the rest.

Language Specific

ES7+ React/Redux/React-Native snippets

Type rafce, hit tab, get a React functional component. Type useS, get a useState hook. Saves countless keystrokes for React developers.

Learn the common snippets: rfc, rafce, imp, exp. They become muscle memory fast.

Tailwind CSS IntelliSense

If you use Tailwind, this is mandatory. Autocomplete for class names, hover preview of the CSS, linting for invalid classes. Makes Tailwind much more ergonomic.

Prisma

Syntax highlighting and formatting for Prisma schema files. If you use Prisma, install it. Simple.

Python (by Microsoft)

The official Python extension. Linting, IntelliSense, debugging, Jupyter notebooks. If you write Python, you need this.

Productivity Boosters

Error Lens

Shows errors and warnings inline at the end of the line. You see the message immediately without hovering. Some find it noisy, we find it useful. Errors shouldn't be hidden.

Todo Tree

Finds all TODO, FIXME, and other comment tags across your project and shows them in a tree view. Good for finding things you meant to come back to.

You can customize the tags and colors. We use TODO for minor stuff, FIXME for things that need attention, and HACK for things we're not proud of.

Auto Rename Tag

Rename an HTML/JSX opening tag and the closing tag updates automatically. Small feature, saves real time when refactoring templates.

Path Intellisense

Autocomplete for file paths. Start typing a path and it suggests files. Especially useful in larger projects where you can't remember every file location.

Visual Improvements

One Dark Pro or GitHub Theme

Pick a theme you like looking at for 8 hours. One Dark Pro is popular for a reason. GitHub Theme is clean if you want something lighter. Whatever makes you comfortable.

Material Icon Theme

Better file icons in the explorer. Folders and files are easier to distinguish at a glance. Purely cosmetic but surprisingly helpful for navigation.

Indent Rainbow

Colorizes indentation levels. Helpful in deeply nested code or languages where indentation matters. Some people hate it. Try it and see.

Collaboration

Live Share

Real-time collaborative editing. Share your session and code together with someone in their own VS Code. Way better than screen sharing for pair programming.

Also useful for debugging. Instead of describing a problem, share your session and show it.

What We Don't Use

Extensions we've tried and removed:

• Bracket pair colorization - VS Code has this built-in now. Enable it in settings.
• Import cost - Useful concept, but the inline display got annoying. We check bundle size separately.
• Multiple cursor extensions - VS Code's built-in multi-cursor is good enough.
• Spell checkers - Too many false positives in code. We check docs separately.
• Formatters for languages we don't use - If you're not writing Go, don't install the Go formatter.

Settings Over Extensions

Before installing an extension, check if VS Code can do it natively. Many extensions exist for features that are now built-in:

• Bracket pair colorization - "editor.bracketPairColorization.enabled": true
• Minimap - Built-in, just enable in settings
• Word wrap - "editor.wordWrap": "on"
• Auto save - "files.autoSave": "afterDelay"
• Inlay hints - Native TypeScript inlay hints in settings

Performance Check

If VS Code feels slow, run the "Developer: Show Running Extensions" command. It shows how much time each extension takes to start and their ongoing CPU impact.

Sort by startup time and question whether you need the slow ones. Some popular extensions are surprisingly heavy.

Our Actual Setup

Here's our current extension list:

• ESLint
• Prettier
• GitLens
• GitHub Copilot
• Tailwind CSS IntelliSense
• ES7+ React snippets
• Prisma
• Error Lens
• Auto Rename Tag
• One Dark Pro theme
• Material Icon Theme

That's it. Around 11 extensions. VS Code starts fast, runs smooth, and we have everything we need. Quality over quantity.

The Bottom Line

Start with minimal extensions and add only when you feel a specific pain. It's easier to add extensions than to figure out which one is causing problems later.

Every few months, look at your extension list and ask: did I use this in the last month? If not, disable it. Your editor will thank you.