10 VS Code Extensions That Actually Make You a Better Developer

Most "best extensions" lists are just people listing the same 20 popular extensions everyone already knows about. This isn't that.

These are the 10 I can't work without, and more importantly, why each one earns its place.

1. Error Lens

What it does: Displays error and warning messages inline, right next to the problematic code.

Without Error Lens, you have to hover over red squiggles or check the Problems panel. With it, errors are visible at a glance without breaking your focus.

const user = getUser()
             ~~~~~~~~~ Object is possibly 'undefined'  ← shown inline

Install: usernamehw.errorlens

2. Pretty TypeScript Errors

What it does: Makes TypeScript's notoriously verbose errors readable.

TypeScript errors can span 40 lines and be nearly unreadable. Pretty TypeScript Errors collapses and formats them into something human-readable.

[!TIP] Pair this with Error Lens and you get inline errors that are also readable. Especially useful in TypeScript-heavy codebases.

Install: yoavbls.pretty-ts-errors

3. GitLens

What it does: Extends VS Code's built-in Git support well beyond the basics.

The killer feature: inline blame annotations. Every line shows who wrote it and when, without leaving the editor. Also adds a full commit history timeline, file annotations, and branch comparisons.

Install: eamodio.gitlens

4. GitHub Copilot

What it does: AI pair programming built into the editor.

Yes, everyone knows Copilot. But in 2026 the chat-based interface for explaining code, generating tests, and refactoring whole functions is genuinely useful. The inline suggestions remain hit-or-miss for complex logic, but for boilerplate and repetitive patterns it's excellent.

Install: GitHub.copilot

5. REST Client

What it does: HTTP requests directly in .http files, no Postman or Insomnia needed.

### Get user profile
GET https://api.example.com/users/1
Authorization: Bearer {{token}}

### Create post
POST https://api.example.com/posts
Content-Type: application/json

{
    "title": "Hello World",
    "body": "My first post"
}

Click "Send Request" and the response opens in a side panel. Check these .http files into source control alongside your code.

Install: humao.rest-client

6. Thunder Client

What it does: Lightweight Postman alternative, fully inside VS Code.

If you prefer a GUI over .http files, Thunder Client is the answer. Minimal, fast, and stores collections as JSON that you can commit to git.

Install: rangav.vscode-thunder-client

7. Turbo Console Log

What it does: ctrl+alt+L to instantly insert a console.log for the selected variable.

It generates a log message with the variable name, file name, and line number automatically:

console.log("user.js ~ line 47 ~ user:", user);

Sounds small. Saves enormous time during debugging sessions.

Install: ChakrounAnas.turbo-console-log

8. Auto Rename Tag

What it does: Automatically renames the paired HTML/JSX closing tag when you rename the opening tag.

Every JSX developer needs this. Renaming <div> to <section> without manually updating the closing tag is friction that adds up.

Install: formulahendry.auto-rename-tag

9. Path Intellisense

What it does: Autocompletes file paths in import statements and src attributes.

import { Button } from '../../../  // → autocomplete shows your file tree

Works with aliases (@/components/...) when configured with pathMappings.

Install: christian-kohler.path-intellisense

10. Todo Tree

What it does: Aggregates all TODO, FIXME, HACK, and NOTE comments across your codebase into a sidebar tree.

// TODO: Replace this with a proper caching layer
// FIXME: This breaks when the array is empty
// HACK: Temp workaround until API v2 ships

All of these show up in a browsable tree, searchable, filterable by type. Essential for keeping tech debt visible.

Install: Gruntfuggly.todo-tree

My Settings for a Clean Setup

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "errorLens.enabledDiagnosticLevels": ["error", "warning"],
    "gitlens.blame.format": "${author|10} ${date|14}",
    "todoTree.highlights.enabled": true
}

The settings that matter more than any extension

Most of the speed people attribute to extensions comes from a handful of built-in settings that ship disabled. Worth doing before installing anything.

Format and fix on save. The single highest-value setting in the editor, because it removes an entire category of review comment:

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  }
}

Exclude build output from search and watching. On a large repo this is the difference between instant search and a spinner, and it cuts the file watcher's memory noticeably:

{
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/.next/**": true,
    "**/dist/**": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/*.lock": true
  }
}

search.exclude only hides results; files.watcherExclude stops the OS-level watcher, which is the one that costs you CPU.

Use the workspace TypeScript version. A project pinned to one TypeScript version and an editor using its own bundled version produce different errors for the same file, which is a genuinely confusing afternoon:

{ "typescript.tsdk": "node_modules/typescript/lib" }

Then run "TypeScript: Select TypeScript Version" and pick the workspace copy.

Commit a .vscode/extensions.json. New contributors get prompted to install exactly what the project expects, which beats a paragraph in the README nobody reads:

{
  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
}

Extension count is a performance budget

Every extension costs startup time, and the cost is measurable rather than theoretical. Developer: Startup Performance in the command palette prints an activation breakdown per extension, and code --disable-extensions gives you a clean baseline to compare against.

Two habits keep this under control. Use workspace-level enablement so language-specific extensions only activate in projects that use that language, via "Enable (Workspace)" on the extension. And check the activation events on anything you install: an extension activating on * runs at every startup regardless of what you opened, whereas one activating on onLanguage:python costs nothing in a JavaScript project.

If the editor feels slow, measure before uninstalling. The usual culprit is one extension doing something expensive at activation, not the total count.

What I Deliberately Left Out

• Prettier: install it as a project dependency, not just an extension
• ESLint: same
• Bracket Pair Colorizer: VS Code has this built in now (editor.bracketPairColorization.enabled)
• Live Server: use Vite's dev server instead

The best extension list is a short one. Every extension you add is a startup time cost and a potential conflict surface.

If you install nothing from this list, turn on format-and-fix on save and exclude your build directories from the watcher. Those two changes take a minute, apply to every project you open, and remove more friction than any extension here.