VS Code Extensions for Full-Stack Development: Formatting, Debugging, and Daily Workflow

Here’s a rundown of the extensions I have installed in VS Code, organized by category. Together they make up my complete dev environment — from appearance and general utilities to language-specific tooling.

Appearance and Interface

These are the first things you see when VS Code opens — themes, icons, and interface enhancements that make long coding sessions more comfortable.

Material Icon Theme

Makes file icons in VS Code much more recognizable. Different file types and folders get corresponding Material Design icons, which makes it easier to navigate complex project structures at a glance.

One Dark Pro

The theme I use — comfortable colors, balanced contrast, easy on the eyes over long sessions. It’s ported from the classic One Dark theme from the Atom editor. I pair it with Roboto Mono, which I settled on after testing various monospace fonts across different sites. If you want to find the right font for yourself, try Dev Fonts and Coding Font for side-by-side comparisons.

Chinese (Traditional) Language Pack

Translates the VS Code interface to Traditional Chinese, lowering the language barrier for navigation.

Indent Rainbow

Colors each indentation level differently, making it much easier to track where you are in deeply nested structures and catch indentation mistakes.

General Purpose

Extensions that are useful regardless of language — covering Git management, file operations, API testing, and remote development.

GitLens

A Git enhancement extension that shows inline blame annotations — who changed each line and when — directly alongside your code. Also great for quickly browsing a file’s full change history, which is really handy when tracking down the source of a bug.

Git Graph

A visual representation of your Git branch history — merges, forks, and commit logs laid out as a graph. Much more intuitive than the command line when dealing with complex branching workflows.

Path Intellisense

Auto-completes file paths as you type — no need to memorize the full path or dig through the folder structure manually. Especially convenient when writing imports.

Todo Tree

Scans the project for all TODO, FIXME, and similar markers, then organizes them in a tree view in the sidebar. Makes it easy to track unfinished work without things slipping through the cracks.

Bookmarks

Lets you place bookmarks in code and jump back to them instantly. Very useful when reading through large codebases or needing to frequently switch between different sections.

filesize

Shows the current file’s size in the status bar. Useful when you need to keep an eye on file weight — images, bundled output files, etc.

Remote - SSH

Connect to remote servers over SSH and edit files directly inside VS Code — the experience feels almost identical to working locally.

Draw.io Integration

Open and edit Draw.io diagrams directly in VS Code without switching to the browser. Keeps flowcharts and architecture diagrams right alongside the code they describe.

Markdown PDF

Converts Markdown files to PDF directly inside VS Code — currently the best extension I’ve found for this task. Layout and formatting fidelity is high, which is great when you need to produce polished documents.

AI Dev Tools

I use several AI tools in combination — Claude Code for primary development, Codex for a secondary review pass, and Roo Code and CodeRabbit as supporting tools. For the full strategy behind this setup, see the AI Tools Usage Strategy article.

Claude Code

Anthropic’s AI development tool, usable directly inside VS Code for writing, refactoring, and debugging code. This is my primary AI dev tool right now.

Codex

OpenAI’s AI development tool, available directly in VS Code. I primarily use it for code review — paired with Claude Code for cross-model checking to catch more issues.

Roo Code

An open-source AI coding assistant that supports multiple AI models — code generation, editing, and chat inside VS Code. Highly flexible; you choose which model and API to use.

CodeRabbit

An AI-powered code review tool that automatically reviews pull requests and provides suggestions on code quality, security, and performance.

Python

Python-related VS Code extensions are covered in the Dev Environment: Python article — including Python, Black Formatter, Ruff, Jupyter, Postman, REST Client, and more.

React Frontend / Astro

React frontend and Astro-related VS Code extensions are covered in the Dev Environment: Frontend article — including Prettier, ESLint, Tailwind CSS, PostCSS, Figma, Pencil, Astro, MDX, and more.