Skip to main content
TellaDev
Blog engineering-craft

Top 15 VS Code Extensions for 2026

Biplab Adhikari Mar 1, 2026 5 min read
vscode tools
Top 15 VS Code Extensions for 2026

VS Code has become the default editor for millions of developers, largely because of its extension ecosystem. The right set of extensions can turn an already capable editor into a productivity powerhouse. Here are fifteen worth installing in 2026.

Productivity and Navigation

1. GitLens — Goes far beyond the built-in Git support. See who last modified any line, browse the full commit history of a file, and compare branches without leaving the editor.

2. Project Manager — Switch between projects instantly from a sidebar panel. Essential if you juggle more than a handful of repositories.

3. Todo Tree — Scans your workspace for TODO, FIXME, and HACK comments and displays them in a tree view. No more losing track of deferred work.

4. Bookmarks — Add named bookmarks anywhere in your codebase and jump between them with keyboard shortcuts. Invaluable when working in large files.

Code Quality

5. ESLint — The standard JavaScript and TypeScript linter integration. Inline warnings as you type catch issues before the CI pipeline does.

6. Prettier — Opinionated code formatter. Configure it to format on save and stop thinking about whitespace forever.

7. Error Lens — Displays diagnostics (errors, warnings, hints) inline at the end of each affected line rather than requiring a hover. Problems become impossible to miss.

8. SonarLint — Detects code quality and security issues beyond what ESLint covers, including common vulnerability patterns.

Language and Framework Support

9. Astro — Official extension for Astro projects. Syntax highlighting, completions, and diagnostics for .astro files.

10. Tailwind CSS IntelliSense — Autocompletes Tailwind class names, shows color previews, and warns about invalid classes.

11. REST Client — Send HTTP requests directly from .http files inside VS Code. A lightweight alternative to Postman for quick API testing.

12. Thunder Client — A full-featured API testing GUI built into the sidebar, with collections and environment variables.

Visual and UX

13. indent-rainbow — Colors each level of indentation in alternating shades, making nested code structure immediately visible—especially helpful in Python and YAML.

14. Material Icon Theme — Replaces the default file icons with expressive, language-specific icons that make the Explorer sidebar much easier to scan.

15. GitHub Copilot — AI pair programmer that suggests completions for entire functions, test cases, and boilerplate. Even if you don’t accept every suggestion, it accelerates exploration of unfamiliar APIs.

Getting the Most Out of Extensions

Install extensions selectively—too many active extensions slow startup and can cause conflicts. Use the built-in workspace recommendations feature (.vscode/extensions.json) to share your project’s required extensions with teammates so everyone has a consistent setup from day one.

ℹ️Note

VS Code updates monthly. Check the release notes after each update — new built-in features sometimes replace the need for third-party extensions.

⚠️Warning

Installing too many extensions at once can degrade editor performance. Profile your startup time with the Developer: Startup Performance command if things feel sluggish.

💡Tip

Use VS Code Profiles to create different extension sets for different project types — a lean profile for writing and a full-featured one for development.

How To Evaluate An Extension

Before installing an extension, check three things: maintenance, permissions, and overlap. A useful extension should be actively maintained, have a clear publisher, and solve a problem that VS Code or your existing toolchain does not already solve.

Maintenance matters because editor extensions run inside a tool you use every day. If an extension has not been updated in years, it may still work, but it may also lag behind language server changes, security expectations, or VS Code APIs. Prefer extensions with recent releases, clear issue activity, and documentation that matches the current version.

Overlap is the hidden source of editor slowdown. Developers often install several formatters, linters, import organizers, and AI helpers that all try to modify the same file. The result is flickering diagnostics, formatting churn, and hard-to-debug save behavior. Decide which tool owns formatting, which tool owns linting, and which tool owns code actions.

A Lean Setup For Most Developers

For a TypeScript or web project, I would start with a small base:

  1. ESLint for project-specific code quality.
  2. Prettier only if the project uses it.
  3. GitLens if you regularly inspect history and blame.
  4. Error Lens if inline diagnostics help you move faster.
  5. A framework extension only when the project benefits from it, such as Astro, Svelte, Vue, or Tailwind CSS IntelliSense.

That is enough for most work. Add database, Docker, remote, or cloud extensions only when they are part of your daily workflow.

Extensions I Avoid Installing By Default

I avoid installing multiple theme packs, snippet packs for languages I rarely use, abandoned language extensions, and heavy all-in-one productivity bundles. Snippets can be useful, but too many of them make autocomplete noisy. Themes are personal, but constantly changing them rarely improves output.

I am also careful with extensions that upload code or context to remote services. That does not make them bad, but it does mean you should understand what data leaves your machine, whether your employer allows it, and how the provider handles retention.

Performance Tips

If VS Code starts feeling slow, run the built-in extension bisect command. It disables groups of extensions and helps identify the culprit. You can also inspect startup performance from the command palette. Do this before blaming the editor itself.

Use workspace recommendations intentionally. A .vscode/extensions.json file can suggest the extensions a project genuinely needs without forcing every developer to copy your personal setup. Keep that list short and project-specific.

What I Would Do In Practice

I would keep a small global extension set and let each repository recommend project-specific tools. For this Astro and TypeScript site, the useful set would be Astro support, ESLint, Prettier if formatting is enforced, Tailwind CSS IntelliSense, and a Git history tool. Everything else should earn its place.

The best extension setup is boring in the best way: diagnostics are clear, formatting is predictable, autocomplete is relevant, and the editor starts quickly. If an extension does not help with one of those outcomes, remove it.

More in

engineering-craft

Stop Planning the AI Replatform: Add LLMs Without Rebuilding Your Stack

engineering-craft

Stop Planning the AI Replatform: Add LLMs Without Rebuilding Your Stack

11 min read

WASM on the Server: Why Your Next Microservice Might Not Need Docker (and What It Means for Cloud Costs)

engineering-craft

WASM on the Server: Why Your Next Microservice Might Not Need Docker (and What It Means for Cloud Costs)

10 min read

The Little's Law Fallacy: Why Your CI/CD Pipelines Are Slow (and How to Fix Them)

engineering-craft

The Little's Law Fallacy: Why Your CI/CD Pipelines Are Slow (and How to Fix Them)

10 min read