Recommended Extensions - Visual Studio Code

TLDR

• Use EditorConfig to ensure consistent code style across different editors and IDEs.
• Use Error Lens to display error messages in real-time, improving debugging efficiency.
• For frontend development, it is recommended to install Vue - Official, ESLint, and Prettier to ensure correct syntax and formatting.
• For test automation, Playwright Test for VSCode is the top choice, allowing you to run and debug tests directly within the editor.
• For containerized development, it is recommended to use Container Tools to replace the legacy Docker extension, and use Dev Containers to standardize the development environment.
• Use the WSL extension for seamless integration between Windows and Linux development environments.
• For AI-assisted development, GitHub Copilot and GitHub Copilot Chat are recommended.

General & Appearance

These extensions are primarily used to optimize the editor interface and maintain development standards.

• Chinese (Traditional) Language Pack for Visual Studio Code: Traditional Chinese language pack for VS Code.
• Visual Studio Keymap: Unifies the keyboard shortcut experience between Visual Studio and VS Code.
• Material Icon Theme: Provides rich and highly recognizable file icons.
• EditorConfig for VS Code: Supports .editorconfig configuration files to ensure consistent indentation and line endings across different editors.

Developer Experience

These extensions are used to improve the efficiency and accuracy of daily coding.

• Error Lens:
  • Function: Displays errors, warnings, and diagnostic messages directly at the end of the code line.
  • When to use: When you need to quickly locate code errors without frequently switching to the "Problems" panel.
• Code Spell Checker:
  • Function: Checks for spelling errors in code, supporting CamelCase naming conventions.

Markdown Editing

These extensions are used to optimize the writing and preview experience of Markdown documents.

• Markdown All in One: Provides support for keyboard shortcuts, Table of Contents (TOC) generation, and list editing.
• Markdown Preview Enhanced: Supports mathematical formulas (KaTeX/MathJax), Mermaid diagrams, and various export formats.
• markdownlint: Checks Markdown syntax and formatting in real-time based on rule sets and provides auto-fixes.

Frontend Development

These extensions are used to handle development requirements for Vue and TypeScript projects.

• Vue - Official: The official tool recommended for Vue, providing Vue 3 syntax highlighting, IntelliSense, and TypeScript support.
• ESLint: Displays 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 synchronizes the closing tag when the opening tag is modified.
• Pretty TypeScript Errors: Formats and highlights verbose and hard-to-read TypeScript error messages.

Testing

These extensions are used to simplify the testing process.

• Playwright Test for VSCode:
  • Function: Supports running and debugging tests, recording new tests, and generating selectors within the editor.
  • When to use: This is a must-have extension when using Playwright for E2E testing in a project.

Containers & DevOps

These extensions are used to manage containerized environments and cross-platform development.

• Container Tools:
  • Function: Replaces the legacy Docker extension, integrating support for both Docker and Podman.
  • When to use: When you need to manage container lifecycles and want a single tool to integrate Docker and Podman.
• Docker DX: Provides IntelliSense, syntax checking, and debugging for Dockerfile and Compose files.
• Dev Containers: Uses containers as a development environment to ensure a consistent toolchain for the team.
• WSL:
  • Function: Allows VS Code to connect directly to the inside of WSL.
  • When to use: When developers use Linux toolchains on Windows for compilation and execution.

AI Assistance

These extensions are used to improve coding and comprehension efficiency.

• GitHub Copilot: AI code completion tool.
• GitHub Copilot Chat: An AI chat interface integrated into the sidebar for code explanation, refactoring, and debugging.

Other VS Code-based Editor Tools

Tools specific to certain editor ecosystems.

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

Changelog

• 2026-01-15 Initial document creation.
• 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.