DEV Community

Cover image for 10 VS Code extensions for maximum frontend development productivity

10 VS Code extensions for maximum frontend development productivity

Opajobi Oyegoke on April 24, 2024

Undoubtedly, VS Code extensions make a difference to your front-end development experience, drastically improving efficiency and facilitating seaml...
Collapse
 
amanbhoria profile image
amanbhoria

Bookmark is really a game changer. Nice work!

Collapse
 
tyisi profile image
TyIsI

Btw, VSC's find function has a case preserving option!

Before:
Image description

After:
Image description

I also recommend the Editor Config extension! VSC and Prettier will both use it and it provides some great general formatting options across the board. Especially when Prettier does not support the language:

marketplace.visualstudio.com/items...

I could get into my linting and formatting stack... But I feel I could write an article about that by itself! :D

Definitely trying Error Lens!

Thanks for the post!

Collapse
 
zakari714 profile image
Zakari Adamu

Nice 1 bro, this is really helpful. I'll definitely try some out, meanwhile am already using most of them but not all at the moment. Thank you

Collapse
 
plxel profile image
Aleksei Mikhailov

thanks for sharing!

could you please upload more high resolution pictures? the one in #3 (about errors) is not readable at all

Collapse
 
oyegoke profile image
Opajobi Oyegoke

Thanks for pointing that out mate, it's been fixed.

Collapse
 
tungbq profile image
Tung Leo

Nice summary 🔥

Collapse
 
viktorle1294 profile image
Viktor Le

I like some of them, especially prettier, time is taken for formatting html and js and messy when files gets longer

Collapse
 
happilyai profile image
Happily.ai

Nice

Collapse
 
milkymaru profile image
junyiwang • Edited

Error lens is so handy,i like it! (❁´◡`❁) I’ve also tried out some other AI-powered plugin like Codeium and MarsCode. They’re compatible with VS code and helpful for code comments and reviews~

Collapse
 
ezekiel_77 profile image
Ezekiel • Edited

Nice Blog ⭐
Replace Live Server with Live Preview by Microsoft....
Enables developers to see frontend changes in VSCode

Collapse
 
wewake-dev profile image
Wewake

I would also suggest a genAI in-editor extension like WebChatForGemini so that you can chat with a genAI model without even leaving the editor. It also supports image upload.

Gemini offers FREE api key for both pro 1.0 and vision-pro models.

PS: I created this extension.

Collapse
 
chaudharidevam profile image
Devam Chaudhari

Hey everyone, I found this really insightful. I wrote an article covering some must-have onces and how they can supercharge your workflow. If you’re interested , you can check it out here:

dev.to/chaudharidevam/10-must-try-...

Let me know what you think or if you hav any favourite extensions of you own!

Happy coding!!

Collapse
 
georgewl profile image
Info Comment hidden by post author - thread only accessible via permalink
George WL

yay another low effort listicle, this site has sooo few of these /sarcasm

Collapse
 
earnstein profile image
bakare damilola

You can add Codeium to the list.
It's like GitHub copilot but absolutely free

Some comments have been hidden by the post's author - find out more