Commonly Used Extensions - Visual Studio Code

I originally used VS Code only as a file browser for WSL, with very few extensions installed. However, as I have recently started working on Vue development, I decided to compile this list of my go-to extensions to ensure I don't miss any when reinstalling VS Code in the future.

General & Appearance

• Chinese (Traditional) Language Pack for Visual Studio Code: The Traditional Chinese language pack for VS Code.
• Visual Studio Keymap: Enables Visual Studio keyboard shortcuts in VS Code. Since I primarily use Visual Studio for development, this helps maintain a consistent experience across both, reducing the cost of context switching.
• Material Icon Theme: Provides a rich and highly recognizable file icon theme.
• EditorConfig for VS Code: Supports .editorconfig files, ensuring consistent code styles (such as indentation and line endings) across different editors and IDEs.

Developer Experience

• Error Lens:
  • Displays errors, warnings, and diagnostic messages directly at the end of the code line and highlights the entire line.
• Code Spell Checker:
  • Checks for spelling errors in your code (supports naming conventions like CamelCase).

Markdown Editing

• Markdown All in One: Provides comprehensive support for Markdown writing, including shortcuts, Table of Contents (TOC) generation, and list editing.
• Markdown Preview Enhanced: A feature-rich Markdown preview extension that supports mathematical formulas (KaTeX/MathJax), Mermaid diagrams, code execution, and various export formats (PDF, HTML, etc.).
• markdownlint: Checks Markdown syntax and formatting issues in real-time based on the markdownlint rule set and provides auto-fix functionality.

Frontend Development

• Vue - Official: The official development tool recommended for Vue (formerly Volar).
  • Provides syntax highlighting, IntelliSense, and TypeScript support for Vue 3.
• ESLint: Integrates ESLint into VS Code to display syntax errors and style issues in real-time.
• Prettier - Code formatter: A code formatting tool.
• Auto Close Tag: Automatically closes HTML/XML tags.
• Auto Rename Tag: Automatically renames the closing tag when the opening tag is modified.
• Pretty TypeScript Errors: Formats and syntax-highlights long, hard-to-read TypeScript error messages.

Testing

• Playwright Test for VSCode:
  • The official Playwright testing extension.
  • Supports running tests, debugging, recording new tests, and generating selectors directly within the editor.
  • A must-have if you are using Playwright for E2E testing.

Containers & DevOps

• Container Tools:
  • Replaces the legacy Docker extension.
  • Includes all features from the Docker extension, with additional Podman support and other capabilities.
  • If you only need container tools, this is the only one you need to install.
• Docker DX:
  • Focused on Developer Experience, providing IntelliSense, syntax checking, and debugging for Dockerfile and Compose files.
  • Supports BuildKit integration and syntax hints.
• Dev Containers:
  • Allows developers to use a container as their "development environment."
  • Through the .devcontainer configuration in your project, it ensures all developers use a consistent toolchain and runtime without needing to install various dependencies on their local machines.
• WSL:
  • Allows VS Code to connect directly to WSL (Windows Subsystem for Linux).
  • This lets you run the VS Code UI on Windows while all terminal commands, compilation, and execution happen in the Linux environment—the best solution for Windows developers using Linux toolchains.

AI Assistance

• GitHub Copilot: AI code completion tool to improve writing efficiency.
• GitHub Copilot Chat: An AI chat interface integrated into the sidebar for asking about code explanations, refactoring, and debugging.

Other VS Code-based Editor Tools

The following are extensions for editors based on VS Code. Since the extension ecosystem for these editors is largely identical to VS Code, I refer to this note when using them and have recorded them here as well.

• Antigravity Cockpit:
  • Used to check usage quotas for various Antigravity models.

Changelog

1. 2026-01-15

   • Initial document created.
2. 2026-03-25

   • Added Markdown Preview Enhanced and markdownlint extensions, removed Markdown Preview Mermaid Support (functionality covered by the former), and separated Markdown-related extensions into a "Markdown Editing" section.