Visual Studio Code (VS Code) has thousands of extensions, add-ons that enhance developer experience and allow you to tailor the IDE to your specific needs.
That said, only a few deserve space in my daily setup. After over a decade of writing code across stacks, these are the ones I’ve found genuinely improve day-to-day flow. Here’s what they fix for me and a few quick setup tips so you can see value quickly.
How to evaluate VS Code extensions
Before you add any extension to VS Code, start with a quick gut check.
- Who built it, and can you trust them? Look for verified publishers with active open‑source repos.
- Is it actively maintained? Check recent updates and patch notes.
- Will it slow you down or ask for broad permissions? Skim the changelog for telemetry and watch performance.
If it feels heavy, install it only in one workspace, exclude folders like node_modules, and add a keyboard shortcut so you can toggle it when needed.
Also, keep in mind that some features, such as linting or language support, may not require a separate extension because they’re already built into VS Code or included in official extension packs.
A note on AI assistants in 2026
2025 was the year of the AI agent in code, and now most developers already use an AI IDE like Cursor or Claude Code. This list focuses on extensions that work well alongside your existing AI-powered code editors.
You can read our breakdown of the best agentic IDEs, and we’ll cover the best MCP servers in a later article.
Quick picks: 2026 essentials you probably already use
These are the basics most projects rely on. If you’re missing one, think about adding it first. Everything else will work better after that.
- ESLint: Lint JavaScript/TypeScript with your project rules; pair with Prettier to format on save.
- Prettier: Removes style debates in code review; turn it on for this project to avoid conflicts.
- GitLens: See who changed a line and why, and jump from code to the commit with a click (on top of VS Code’s built-in Git support).
- Live Server: Quick HTML/CSS/JS previews with auto‑reload; great for fast experiments and mocking up websites.
- Docker & Dev Containers: Same environment for everyone; matches what continuous integration (CI) uses.
- GitHub Pull Requests & Issues: Review and manage pull requests (PRs) without leaving VS Code.
With those out of the way, here’s today's full list by category:
| Category | Extensions |
|---|---|
API & Data | Thunder Client; Paste JSON as Code / Quicktype |
AI | Fusion; Claude Code; Cody |
TypeScript & Quality | Pretty TypeScript Errors; Error Lens |
Frontend & CSS | CSS Peek; Import Cost; Tailwind CSS IntelliSense |
Git & Collaboration | Better Comments; TODO Tree; GitHub PRs & Issues; Git Graph; File Utils |
Docs | Markdown All in One; Paste Image |
API and data modeling VS Code extensions
These extensions are the fastest way to validate an endpoint and model responses without leaving the editor. They replace “open Postman, copy JSON, jump to a web converter” with quick, reproducible steps inside VS Code.
Thunder Client: Quick REST calls without leaving VS Code
Thunder Client is a lightweight REST client in the editor, which is great for quick checks and small collections without the weight of Postman/Insomnia. Use it to validate local endpoints during feature work and keep a small set of checks to test dev and staging before merging.
It stores requests and environments in your workspace, so collections live with the code, and you can reuse variables.
Some tips:
- Keep a small collection in the repo to document critical flows.
- Define environments early (dev/stage/prod) and reuse base URLs.
- Add a short smoke sequence (login, me, update, logout) before risky changes.
- Don’t commit secrets; use environment variables or VS Code secrets.
Paste JSON as Code: Turn JSON into typed models fast
With Paste JSON as Code, turn a real JSON response into TypeScript types so your code matches the API. Copy a sample response from your test server, and it creates the types for you. You can edit them if something looks off.
It infers a schema from your sample JSON and generates TypeScript interfaces/types.
Some tips:
- Prefer JSON Schema when available for stability across samples.
- Turn on enum generation for fixed value lists.
- Keep generated types in
types/generated/and layer your custom types on top.
AI VS Code extensions
Fusion: Visual + AI edits on your real repo with PRs
Fusion lets you edit real code with a visual canvas and AI that generates small, reviewable pull requests that reuse your design tokens and components. Stay inside VS Code while you visually prompt changes, inspect diffs, and raise a PR—perfect for prototyping and designing.
With Fusion, you can:
- Open a repo, sign in with GitHub, choose a branch, and connect your design system (tokens, components, or Storybook). It's far more full-featured than the Figma MCP server for design-to-code.
- Open a page in the preview and prompt a single change, like “add a compact variant of this button for mobile.”
- Review the proposed diff. Fusion maps rendered UI to source files and reuses existing code instead of generating new components.
- Open a PR. Your CI, tests, and linters run as usual. (AI TDD works great!)
Developers like Fusion because it focuses on keeping pull requests small and reviewable, prioritizing the use of your existing components, tokens, and formatting rules. Every change produces a clear, standard PR with an easy-to-follow summary and list of files touched, so your workflow stays transparent.
Fusion also has a web version made especially for designers and PMs, which reduces developer work when it comes time for design handoffs. Everything works with your current git setup, so collaboration is native.
It’s free to get started, so install the extension in VS Code and sign up.
Claude Code: Context-aware coding inside VS Code
Claude Code brings Anthropic’s model directly into VS Code, acting as a teammate that edits, explains, and refactors with the full context of your open files. Unlike generic chat assistants, it understands your repo’s structure, dependencies, and comments, so suggestions feel grounded in your actual codebase.
We’ve written a lot about how much we like Claude Code as a Cursor alternative, and it’s one to keep an eye on.
Some tips:
- Use Claude Code like a pair programmer, not a code generator. Give it goals (“make this async-safe”) rather than tasks (“rewrite this in async”).
- Scope chats to one file or function for faster, more relevant results. For multi-file reasoning, open related files and let Claude pull that context automatically.
- When reviewing large changes, use “Explain” and “Summarize diff” commands to get natural-language overviews before diving into code.
- Keep prompts conversational and iterative: refine rather than reissue. Claude tracks the chain of reasoning, which leads to better refactors and docstrings.
We’ve also published a deeper dive on all our best tips on optimizing Claude Code for repos at any scale.
Sourcegraph Cody: Code graph context across repos
Cody brings Sourcegraph’s code graph into VS Code, so chat and completions can pull context from multiple repos, symbols, and references, and not just the current file.
Cody is different than Cursor and Claude Code, because it focuses on repo‑scale knowledge (cross‑repo search, embeddings, and symbols) with enterprise controls (SSO/RBAC, policy). That makes it a strong teammate when your projects span many services.
To get started, connect to your Sourcegraph instance, open the Cody panel to ask questions about a feature across repos, and paste suggested snippets into your changes. Use chat “Explain” on unfamiliar files and “Generate tests” on touched modules.
Tips:
- Scope Cody to the org repos you actually use to keep answers focused.
- Use Cody for “where is X used?” and refactor planning; keep Cursor/Claude for in‑file edits.
- If you’re on a big monorepo, let indexing finish before large queries.
TypeScript and code quality VS Code extensions
These help you spot problems sooner and make TypeScript errors make sense. Quick, in-editor signals keep quality high without slowing you down.
Pretty TypeScript Errors: Readable TS diagnostics
Pretty TypeScript Errors makes TypeScript compiler messages readable with concise code frames, so fixes are faster.
Behind the scenes, it reformats TypeScript diagnostics into focused messages and code frames right in the editor.
Some tips:
- Pair with Error Lens to surface messages inline as you type.
- Keep your workspace’s TypeScript version pinned to avoid mismatch warnings.
- Use with
tsc --watchor your dev server to catch issues early.
When errors are dense or nested types get noisy, this keeps the important part obvious.
Shipping AI features? Add evals to CI.
Error Lens: Inline errors/warnings
Error Lens shows errors and warnings inline so you don’t need to hover or open the Problems panel. With the right settings, it saves time without adding visual noise.
It listens to VS Code diagnostics and decorates lines with severity‑aware highlights, virtual text, and gutter icons.
Some tips:
- Cap signal/noise with
errorLens.maxProblemsanderrorLens.maxProblemLength. - Lower
errorLens.opacityand prefer italics to keep highlights subtle. - Exclude
dist,build, andnode_modulesto avoid vendor noise.
Some suggested settings to keep things from getting too noisy:
"errorLens.maxProblems": 250,
"errorLens.maxProblemLength": 140,
"errorLens.opacity": 50,
"errorLens.fontStyleItalic": true,
"errorLens.exclude": ["**/dist/**", "**/build/**", "**/node_modules/**"]Frontend and CSS VS Code extensions
CSS Peek: Jump to styles from markup/JSX
CSS Peek lets you jump straight from class/className to the selector definition across your workspace. Great for large codebases where styles are spread out.
It resolves class names to selector definitions across linked stylesheets and opens the definition location.
Some tips:
- Keep stylesheet imports easy to find; behavior differs with CSS Modules or Tailwind.
- Prefer stable class naming conventions so jumps are predictable.
- In large monorepos, give it a moment to index new folders.
Import Cost: Surface bundle size of imports
Import Cost shows the approximate size each import adds to your bundle, inline beside the import—typically two numbers for minified and gzipped.
It works by resolving the module you’re importing, running a quick tree‑shaken bundle of just the referenced symbols, and reporting the sizes. Values update as you type, are cached per file, and it works with JS/TS/TSX.
Some tips:
- Treat the numbers as directional; your actual bundler, plugins, and module format (ESM vs CJS) can change results.
- Packages with side effects or missing proper "sideEffects" flags can appear larger.
- Prefer path or named imports (e.g.,
lodash/debounceorimport { debounce } from "lodash"), but verify in your real build. - TS path aliases and monorepos may need a bit of config for perfect resolution.
When optimizing bundles, validate changes with your real build analyzer before deciding.
Tailwind CSS IntelliSense: Class autocomplete and hovers
Tailwind CSS IntelliSense provides autocomplete for Tailwind classes with hovers and linting, so you spend way less time in the docs. Class name suggestions and quick info speed up UI work.
It reads your Tailwind config and scans class attributes to provide completions, hovers, and linting.
Some tips:
- Enable
tailwindCSS.classAttributesfor your stack (e.g.,class,className,ngClass). - Point it at your Tailwind config if it isn’t at the repo root.
- For macro/utility wrappers, configure class regex support so suggestions show up.
- Bonus tip: if you are super bothered by long class strings like me, get an extension like Tailwind Fold, which you can map to a key command (mine is
cmd+shift+/) to toggle class strings open and shut.
Git and collaboration VS Code extensions
These keep reviews, TODOs, and sharing inside the editor. Less context switching, faster feedback, cleaner follow-ups.
Better Comments: Color-coded annotations
Better Comments makes TODO/FIXME/NOTE stand out to guide reviews and follow‑ups. Keep a small convention (TODO, FIX, NOTE) to avoid noise.
It parses tagged comments and styles them with severity‑aware decorators so they’re easy to spot in diffs and reviews.
Some tips:
- Align on 2–3 tags max and document them in
CONTRIBUTING.md. - Pair with TODO Tree to aggregate across the repo.
- Avoid sensitive info in comments; link to tickets or docs instead.
An example config:
"better-comments.tags": [
{ "tag": "TODO", "color": "#ffd166" },
{ "tag": "FIX", "color": "#ef476f" },
{ "tag": "NOTE", "color": "#06d6a0" }
]GitHub Pull Requests & Issues: Review PRs without leaving VS Code
GitHub Pull Requests & Issues lets you manage PR reviews, comments, and check statuses directly in the editor so you can stay in flow during code review sessions. Useful for triaging feedback, running checks, and navigating diffs without context switching.
It uses the GitHub API to list PRs/issues, fetch checks, and post comments without leaving the editor.
Some tips:
- Pin frequently reviewed repos for quick access.
- Map review actions (approve/comment/request changes) to keyboard shortcuts.
- For long reviews, check out the PR locally to run tests and linters.
TODO Tree: Collect TODO/FIXME in one panel
TODO Tree centralizes action items for quick sweeps before releases. A light regex and filter config keeps it useful without becoming noise.
It scans your files for tagged comments and organizes them into a searchable tree view.
Some tips:
- Keep the regex focused to avoid false positives.
- Exclude
node_modules, build output, and generated code. - Pair with Better Comments so tags are readable in files and aggregated in the panel.
Suggested settings:
"todo-tree.tree.showScanModeButton": false,
"todo-tree.regex.regex": "(//|#|<!--|;|/\\\\*)\\\\s*(TODO|FIXME|NOTE)\\\\s*:?.*",
"todo-tree.general.excludeGlobs": ["**/node_modules/**", "**/dist/**", "**/build/**"]Git Graph: Visualize commit history and branches
Git Graph provides an interactive graph for commits, branches, and merges right in VS Code. Great for understanding history, comparing branches, and making clean merges.
It renders your git log as an interactive graph with branch actions.
Some tips:
- Pin your main repos and enable commit details on hover for quick context.
- Filter by author or branch when history gets noisy.
- Use compare mode before merging to spot unexpected changes.
File Utils: Faster file operations (create/move/duplicate)
File Utils enables keyboard‑first create/move/rename from the command palette, ideal for fast test cycles and creating nested paths.
It adds commands for common file operations and respects your workspace’s git moves/renames.
A shortcut I use all the time, for example:
{
"key": "cmd+alt+n",
"command": "fileutils.newFileAtRoot"
}Some tips:
- Bind shortcuts for create/move and use path‑based create (e.g.,
src/feature/X.tsx). - Prefer “rename” over delete+create to preserve git history.
Docs and Markdown VS Code extensions
These make writing docs feel light. Shortcuts and a solid preview help you move from draft to done.
Markdown All in One: Shortcuts, table of contents (TOC), formatting
Markdown All in One provides everyday Markdown ergonomics: headings/lists shortcuts, table of contents (TOC) generation, and preview enhancements. One simple README flow: add headings, write, generate the TOC, preview, commit.
It adds commands and keybindings for common Markdown actions and auto‑generates a TOC from your headings.
Some tips:
- Turn on TOC auto‑update so links stay in sync.
- Use the extension’s shortcuts for headings/lists to keep formatting consistent.
- Align with Prettier’s Markdown rules to avoid churn in diffs.
Paste Image: Paste screenshots into Markdown with organized paths
Paste Image lets you quickly drop screenshots into your doc without leaving VS Code. It saves the file and inserts the markdown link for you.
It captures from the clipboard, writes the image to your configured path, and inserts the Markdown reference.
Some tips:
- Point it at your draft’s
graphicsfolder to keep assets organized. - Use a readable default name template so filenames sort nicely.
- Keep paths relative to the doc so links work when moving folders.
Example config:
"pasteImage.path": "graphics/sources",
"pasteImage.defaultName": "${currentFileNameWithoutExt}-${date}-${time}",
"pasteImage.prefix": "./"Honorable mentions (listed, minimal commentary)
Here are a few other solid extensions that didn’t make our top picks:
- REST Client: Send HTTP requests from
.http/.restfiles; perfect for quick API checks. - Prisma: Schema syntax highlighting/formatting, jumps, and validation for data workflows.
- Path IntelliSense: Autocomplete file paths in imports/strings; fewer typos and broken imports.
- Auto Rename Tag: Automatically updates the closing tag when you rename the opening tag.
- Color Highlight: Shows color previews inline; handy for tokens and CSS variables.
- Git Graph: Visual commit graph and branch actions without leaving the editor.
- Indent Rainbow: Colorized indent levels make structure obvious; turn off where it’s noisy.
- CodeSnap: Clean code screenshots for docs and social posts; customizable styles.
- YAML: Better YAML editing with schema validation and hovers; ideal for CI/CD configs.
- Even Better TOML: Syntax highlighting, validation, and formatting for TOML files.
- MarkdownLint: Lints Markdown for consistent headings, lists, and spacing; supports quick fixes and team configs.
- Code Spell Checker — Code‑aware spell check with dictionaries and ignores for identifiers.
And, of course, we mustn’t forget VS Code Pets:
Choosing the best VS Code extensions for your workflow
Pick 4–5 extensions to try for a week and notice the time saved: quicker fixes, fewer times you leave VS Code, fewer trips to other tools.
Set a calendar reminder in a week to remove anything you didn’t use and keep the winners.
And if you work on UI, try Fusion in VS Code to turn visual prompts into small, reviewable PRs without leaving your repo.
