A Curated Collection of Over 60 VSCode Extensions to Boost Productivity

Better Comments

A comment‑highlighting extension that colors annotations based on type, customizable via vscode settings.

Bracket Pair Colorizer / Bracket Pair Colorizer 2

Highlights matching brackets with distinct colors and draws a line between paired brackets when one is selected.

Highlight Matching Tag

Shows an underline under matching HTML tags when the cursor is placed on a tag.

Chinese

Localizes the vscode UI to Chinese, improving readability for non‑English speakers.

Color Highlight

Displays CSS color values directly in the editor, making color codes visually identifiable.

Community Material Theme / Material Theme

Provides a collection of themes; the author uses Material Theme Palenight High Contrast for a dark, high‑contrast look.

Material Theme Icons

Replaces default file icons with a Material‑style set.

Error Gutters

Shows red wavy underlines for linting errors, offering immediate visual feedback.

Image preview

Displays a small preview window when hovering over image URLs in code.

indent‑rainbow

Colors indentation levels with a rainbow palette to improve code structure visibility.

Indenticator

Draws a vertical line indicating the current indentation level when a block is selected.

Trailing Spaces

Visually marks trailing whitespace characters.

VSCode Great Icons

Another icon theme alternative to Material Theme Icons.

AZ AL Dev Tools / AL Code Outline

Provides an outline view for AL files, showing template, script, style, DOM nodes, and methods.

Code Runner

Runs code snippets directly in the editor and shows output in the console.

CodeIf

Searches GitHub/Bitbucket/GitLab for common variable names and suggests them via a right‑click menu.

Color Info

Shows detailed color information (RGB, HSL, HEX, etc.) in a small popup.

Code Spell Checker

Detects misspelled words in code and offers suggestions, with customizable dictionaries.

Debugger for Chrome

Enables Chrome‑style debugging inside vscode without opening the browser console; similar extensions exist for Firefox and Edge.

Git History

Displays file commit history via Git: View File History .

GitLens — Git supercharged

Shows inline Git blame information for each line of code.

LeetCode

Allows solving algorithm problems directly within vscode .

Local History

Tracks local file changes in a hidden .history folder, enabling version comparison.

open in browser

Opens HTML files in the default browser via a right‑click command.

Partial Diff

Compares selected text blocks without leaving the editor.

Postcode

Integrates Postman functionality inside vscode for API testing.

Project Manager

Facilitates quick switching between multiple projects via a sidebar icon.

Quokka.js

Shows real‑time evaluation results of JavaScript/TypeScript code.

Auto Import

Automatically suggests and inserts import statements for TypeScript.

Auto Rename Tag

Renames matching HTML tags simultaneously.

change‑case

Converts selected text between various case styles (camelCase, snake_case, etc.).

CSS Peek

Allows jumping from a class name to its CSS definition.

ECMAScript Quotes Transformer

Converts between template literals and regular string concatenation.

embrace

Wraps selected code with quotes, brackets, or parentheses quickly.

File Utils

Provides commands for creating, copying, moving, renaming, and deleting files/folders.

javascript console utils

Generates console.log statements for selected variables (Ctrl+Shift+L) and removes them (Ctrl+Shift+D).

json2ts

Converts JSON data into TypeScript type definitions (Ctrl+Alt+V).

koroFileHeader

Automatically inserts file and function header comments based on settings.json configuration.

Mithril Emmet

Generates Mithril component scaffolding (now largely built‑in to vscode ).

Path Intellisense

Provides autocomplete for file paths during imports.

Npm Intellisense

Offers autocomplete suggestions for npm package names.

px to rem & rpx (cssrem)

Automatically converts pixel units to rem/rpx with a quick‑accept prompt.

Turbo Console Log

Generates customizable console.log statements with file, line, and emoji information (Ctrl+Alt+L).

Code Snippet Extensions

Various extensions that expand short abbreviations into full code blocks for JavaScript, Jest, HTML, Vue, etc.

Beautify

Formats code, though the author prefers eslint + prettier .

ESLint

Lints JavaScript/TypeScript code according to configurable rules.

Prettier – Code formatter

Formats code consistently; often used together with ESLint.

Vetur / Volar

Provides Vue language support; Volar is optimized for Vue 3.

Fun Extensions

Includes a retro game controller ( 小霸王 ) and an Emoji picker for inserting emojis into code.

Settings Sync

Synchronizes vscode extensions and settings across machines via the cloud.