DEV Community

Cover image for Recommend some VS Code extensions for frontend development
KazooTTT
KazooTTT

Posted on

Recommend some VS Code extensions for frontend development

I won't recommend language-related extensions since most people already have them installed.

These extensions work with vscode, cursor, trae, windsurf and other editors.

1. Development

1.1. File Nesting Updater - Visual Studio Marketplace

Automatically syncs and updates file nesting configurations maintained by the author, making the file explorer cleaner.

Pasted image 20251020141840

1.2. Turbo Console Log - Visual Studio Marketplace

Quickly generates meaningful logs (showing file line numbers, function names, variable names) and allows one-click deletion of added logs.

IMG-8BE5636A37F380C6C86B708C0C2BD3AD

1.3. Pretty TypeScript Errors - Visual Studio Marketplace

Makes TypeScript errors more readable and allows direct navigation to TypeScript documentation for better error understanding.

IMG-B938B0F373C7753BD8D87DDBC89341B3

1.4. JSON to TS - Visual Studio Marketplace

Quickly converts JSON to TypeScript types.

1.5. Error Lens - Visual Studio Marketplace

Displays errors and warnings directly inline.

IMG-509CA7645B9A6ADCA902128F8A22C777

1.6. Better Comments - Visual Studio Marketplace

Displays different styles for different types of comments.

IMG-F5711D684B9A167E973583F479F4E5CF

1.7. Inline Parameters for VSCode

Shows parameter names as inline hints at function call sites.

IMG-8F7FDFC33C5E909EBAC0A635E444B553

2. Themes

2.1. Symbols Icons

https://marketplace.visualstudio.com/items?itemName=miguelsolorio.symbols

IMG-6A98552CAB5B5E5F85C1FA4EDEAFB900

IMG-B02157769E89B2ED3FC6C805D4520B47

2.2. Vibrancy Continued - Visual Studio Marketplace

May impact performance and report editor corruption warnings. Use with caution (only for experimentation).

IMG-901A2A5BDD5CBA21A441C499CDAB2C13

3. Others

3.1. WakaTime - Dashboards for developers

Tracks coding time.

IMG-3C2F5219C3F196F6E60542674C31DE29

4. How to download when non-VSCode editors can't access the VSCode marketplace

VSCode has disabled offline download functionality and doesn't allow non-VSCode editors to use its source. These non-VSCode editors use mirrored sources to download extensions, so some extensions may not be available for download.

You can use this Coze agent by entering the Unique Identifier to download offline files.

or you can also use the VSIX_download_url to download offline files.

Pasted image 20251020162148

Top comments (0)