Essential VSCode Extensions for Frontend Development

Essential VSCode Extensions for Frontend Development

The author, a frontend developer, shares a curated list of VSCode extensions that improve development efficiency, covering language support, Git management, code formatting, and various productivity tools.

Chinese Language Plugin

Chinese (Simplified) – Provides Chinese language support in VSCode.

Vue Official (Volar)

The official Vue extension (formerly Volar) offers .vue file recognition, code completion, and intelligent suggestions.

Git Graph

A free Git visualization tool that displays commit history and enables quick Git operations.

Prettier

Code formatter that automatically formats source files.

ESLint

Integrates project ESLint rules into the editor, highlighting non‑compliant code.

Code Efficiency Tools

Chinese Punctuation to English

Automatically converts Chinese punctuation entered in the editor to English characters, eliminating the need to switch input methods.

Auto Rename Tag

When an HTML tag is renamed, the matching closing tag is updated automatically.

Spell Checker

Detects misspelled English words directly in the code.

CSS Peek

Allows quick navigation to CSS class definitions by Ctrl‑clicking the class name.

Highlight Matching Tag

Visually highlights matching HTML tags.

Console Utils

Provides a shortcut (Cmd+Shift+L) to output selected values to the console.

IntelliSense for CSS Class Names

Offers intelligent suggestions for CSS class names within HTML files.

Remove Unused Imports

Command that automatically deletes imports that are not used in the current file.

CamelCase Translation Helper

Assists with translating camel‑case identifiers.

Postcode (API Testing)

A lightweight alternative to Postman for testing APIs.

Code Management

Todo Tree

Helps manage TODO comments by marking them in the code and displaying them in a tree view. Custom highlight colors can be configured in settings.json as shown below:

"todo-tree.highlights.customHighlight": {
    "todo": {"icon": "alert", "background": "#c9c552", "rulerColour": "#c9c552", "iconColour": "#c9c552"},
    "bug": {"background": "#eb5c5c", "icon": "bug", "rulerColour": "#eb5c5c", "iconColour": "#eb5c5c"},
    "tag": {"background": "#38b2f4", "icon": "tag", "rulerColour": "#38b2f4", "iconColour": "#38b2f4", "rulerLane": "full"},
    "done": {"background": "#5eec95", "icon": "check", "rulerColour": "#5eec95", "iconColour": "#5eec95"},
    "mark": {"background": "#f90", "icon": "note", "rulerColour": "#f90", "iconColour": "#f90"}
},

Project Tree

Generates a tree view of the project structure, useful for creating README outlines.

Project Manager

Allows organizing, tagging, and quickly switching between multiple local projects.

Code Beautification

Indent Rainbow

Colors indentation levels to make code hierarchy clearer.

Better Comments

Enables colorful, categorized comment tags; configuration can be added to settings.json as demonstrated.

Color Highlight

Shows color swatches for color values directly in the code.

Image Preview

Displays a preview of image files when hovering over their paths.

Additional Utilities

Exception Highlighting

Highlights errors and warnings in the code for faster issue detection.

CodeSnap

Captures beautiful screenshots of code snippets.

Overall, the article serves as a practical guide to enhancing VSCode for frontend development.