VS Code Extensions

Essential VS Code Extensions

The VS Code extension ecosystem is massive, with over 40,000 extensions available. Choosing the right ones can dramatically improve your development experience, while installing too many can slow down the editor. This guide covers the essential extensions for modern TypeScript and React development, organized by category.

// .vscode/extensions.json - Team extension recommendations
{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "bradlc.vscode-tailwindcss",
    "formulahendry.auto-rename-tag",
    "streetsidesoftware.code-spell-checker",
    "eamodio.gitlens",
    "GitHub.copilot",
    "usernamehw.errorlens",
    "christian-kohler.path-intellisense"
  ],
  "unwantedRecommendations": []
}

Code Quality Extensions

ESLint (dbaeumer.vscode-eslint)

Integrates ESLint directly into the editor. Shows linting errors and warnings inline as you type. Supports auto-fix on save. Works with flat config (eslint.config.js) and legacy .eslintrc configurations.

Prettier (esbenp.prettier-vscode)

The official Prettier extension. Formats code automatically on save, ensuring consistent style across your entire team. Supports TypeScript, JavaScript, JSX, CSS, JSON, Markdown, and many more formats. Configure it as the default formatter in workspace settings.

Error Lens (usernamehw.errorlens)

Displays diagnostic messages (errors, warnings, info) inline at the end of the affected line. This eliminates the need to hover over red squiggles - you see the full error message immediately. Highly recommended for catching TypeScript errors quickly.

Code Spell Checker (streetsidesoftware.code-spell-checker)

Catches spelling mistakes in code, comments, and strings. Supports camelCase splitting, so it correctly checks each word in calculateTotalPrice. Add project-specific words to .vscode/cSpell.json.

Language and Framework Extensions

Tailwind CSS IntelliSense (bradlc.vscode-tailwindcss)

Essential for Tailwind CSS development. Provides autocomplete for utility classes, hover previews showing the generated CSS, linting for invalid classes, and class sorting. Works with className, class, and custom attributes.

Auto Rename Tag (formulahendry.auto-rename-tag)

Automatically renames the paired HTML/JSX tag when you edit one. Change an opening <div> to <section>, and the closing tag updates instantly.

Path Intellisense (christian-kohler.path-intellisense)

Provides autocomplete for file paths in import statements, require calls, and HTML src attributes. Supports path aliases configured in tsconfig.json.

Pretty TypeScript Errors (yoavbls.pretty-ts-errors)

Reformats complex TypeScript error messages into a more readable format with syntax highlighting. Makes deeply nested generic type errors actually comprehensible.

Git Extensions

GitLens (eamodio.gitlens)

The most comprehensive Git extension for VS Code. Shows inline git blame annotations, file and line history, commit search, visual branch comparisons, and much more. Key features:

• Current Line Blame: Shows who last modified the current line, when, and the commit message - right in the editor.
• File History: View the complete history of any file with diffs for each change.
• Commit Graph: Visual representation of branch history and merges.
• Interactive Rebase Editor: Visual editor for git interactive rebase operations.

Git Graph (mhutchie.git-graph)

Displays a visual graph of your Git repository. Shows branches, tags, merges, and commits in a clean timeline view. Right-click commits to cherry-pick, revert, or create branches.

Productivity Extensions

GitHub Copilot (GitHub.copilot)

AI-powered code completion that suggests entire functions, test cases, and documentation. It learns from your codebase context and can generate code from natural language comments. Covered in depth in a dedicated topic.

TODO Highlight (wayou.vscode-todo-highlight)

Highlights TODO, FIXME, HACK, and other annotation keywords in your code. Makes it easy to spot incomplete work during code review.

Bookmarks (alefragnani.Bookmarks)

Lets you bookmark lines in your code and quickly jump between them. Essential when working across multiple files on a complex feature.

# Install essential extensions from the command line
code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension bradlc.vscode-tailwindcss
code --install-extension usernamehw.errorlens
code --install-extension eamodio.gitlens
code --install-extension GitHub.copilot
code --install-extension formulahendry.auto-rename-tag
code --install-extension christian-kohler.path-intellisense
code --install-extension streetsidesoftware.code-spell-checker
code --install-extension yoavbls.pretty-ts-errors

Theme and Appearance Extensions

Popular Themes

• One Dark Pro: The most popular dark theme, ported from Atom.
• Catppuccin: A pastel theme available in four flavors (Latte, Frappe, Macchiato, Mocha).
• GitHub Theme: Official GitHub theme matching github.com light and dark modes.
• Dracula Official: A popular dark theme with vibrant colors.

File Icons

• Material Icon Theme: Adds distinct icons for every file type and folder, making the explorer much easier to navigate.
• Catppuccin Icons: Matching file icons for the Catppuccin theme.

Testing Extensions

Jest Runner (firsttris.vscode-jest-runner)

Adds "Run" and "Debug" code lens links above each test case. Click to run or debug a single test without leaving the editor. Shows pass/fail status inline.

Vitest (vitest.explorer)

Official Vitest extension with test explorer integration, inline results, and debugging support. Automatically discovers and runs Vitest test files.