DEV Community

Lucas M Dev
Lucas M Dev

Posted on

The VS Code Extensions I Actually Use Every Day in 2026

#webdev #vscode #productivity #tools

I've been using VS Code as my main editor for 5+ years. In that time, I've installed (and uninstalled) hundreds of extensions.

Here are the ones that actually stuck — extensions I use in every project.

Productivity Boosters

1. GitLens — Git supercharged

Why it's essential: See who wrote every line, when, and why — without leaving your editor.

GitLens shows inline blame annotations, a git history sidebar, and lets you compare branches, commits, and more. The free tier is incredibly powerful.

Install: eamodio.gitlens
Enter fullscreen mode Exit fullscreen mode

My favorite feature: Hovering over a line to see the full commit message and diff.

2. GitHub Copilot (or Codeium for free)

I use Codeium instead of Copilot because it's free and surprisingly good.

  • Suggests entire functions based on context
  • Completes repetitive patterns automatically
  • Works with 70+ languages 
Copilot: GitHub.copilot
Codeium (free): Codeium.codeium
Enter fullscreen mode Exit fullscreen mode

3. Prettier — Code formatter

Stop arguing about formatting. Prettier handles it automatically.

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}
Enter fullscreen mode Exit fullscreen mode 
Install: esbenp.prettier-vscode
Enter fullscreen mode Exit fullscreen mode

4. ESLint

Catch bugs before they happen. Works with React, Vue, Node.js, TypeScript.

Install: dbaeumer.vscode-eslint
Enter fullscreen mode Exit fullscreen mode

5. Error Lens — Inline errors

Makes errors and warnings impossible to miss by showing them inline on the problematic line.

Before Error Lens: squiggly underlines you might miss.
After Error Lens: bright red text right where the problem is.

Install: usernamehw.errorlens
Enter fullscreen mode Exit fullscreen mode

Language-Specific

6. Tailwind CSS IntelliSense

If you use Tailwind, this is not optional. Autocomplete for every class, hover to see the generated CSS.

Install: bradlc.vscode-tailwindcss
Enter fullscreen mode Exit fullscreen mode

7. Prisma

Official extension for Prisma schema files. Syntax highlighting, formatting, autocompletion for models and fields.

Install: Prisma.prisma
Enter fullscreen mode Exit fullscreen mode

8. Docker

Manage containers, images, and docker-compose from VS Code. View logs, run commands, inspect containers — all without a terminal.

Install: ms-azuretools.vscode-docker
Enter fullscreen mode Exit fullscreen mode

Navigation & Search

9. Auto Rename Tag

Rename an HTML/JSX tag and the closing tag updates automatically. Sounds small. Saves a surprising amount of time.

Install: formulahendry.auto-rename-tag
Enter fullscreen mode Exit fullscreen mode

10. Path IntelliSense

Autocomplete for file paths in import statements. No more typos in ../../components/Button.

Install: christian-kohler.path-intellisense
Enter fullscreen mode Exit fullscreen mode

11. Todo Tree

Scans your project for TODO, FIXME, HACK comments and shows them in a tree view. Great for not forgetting things mid-feature.

Install: gruntfuggly.todo-tree
Enter fullscreen mode Exit fullscreen mode

Visual Improvements

12. One Dark Pro (theme)

The most downloaded VS Code theme. Clean, easy on the eyes, works well with every language.

Install: zhuangtongfa.material-theme
Enter fullscreen mode Exit fullscreen mode

13. Material Icon Theme (icons)

Replace the default file icons with colorful, recognizable icons for every file type.

Install: PKief.material-icon-theme
Enter fullscreen mode Exit fullscreen mode

14. Bracket Pair Colorizer 2 (built-in in VS Code now)

Actually, VS Code now has bracket pair colorization built in. Enable it in settings:

{
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true
}
Enter fullscreen mode Exit fullscreen mode

Remote & Advanced

15. Remote - SSH

Work on remote servers as if they're local. Edit files, run terminals, debug — all through SSH. Game-changing for cloud development.

Install: ms-vscode-remote.remote-ssh
Enter fullscreen mode Exit fullscreen mode

16. REST Client

Send HTTP requests directly from VS Code. Write your requests in .http files, see responses inline.

GET https://api.example.com/users HTTP/1.1
Content-Type: application/json

###

POST https://api.example.com/users HTTP/1.1
Content-Type: application/json

{
  "name": "Test User",
  "email": "test@example.com"
}
Enter fullscreen mode Exit fullscreen mode

Much better than switching to Postman for quick tests.

Install: humao.rest-client
Enter fullscreen mode Exit fullscreen mode

My VS Code settings worth sharing 

{
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6,
  "editor.fontFamily": "JetBrains Mono, Fira Code, monospace",
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.minimap.enabled": false,
  "editor.wordWrap": "on",
  "editor.cursorBlinking": "smooth",
  "editor.smoothScrolling": true,
  "editor.bracketPairColorization.enabled": true,
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  "terminal.integrated.fontSize": 13,
  "files.autoSave": "onFocusChange",
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
Enter fullscreen mode Exit fullscreen mode

The ones I deliberately left out

Emmet — Built into VS Code, no extension needed.

IntelliCode — It's fine, but Copilot/Codeium is better.

Color Highlight — CSS variables in frameworks make this less useful now.

Quick tool tip

If you're formatting code or converting between case styles, I built DevToolkit — 31 free browser tools for developers including a Text Case Converter, JSON Formatter, and more. No signup required.

What extensions am I missing? Drop them in the comments.

Top comments (0)