Useful VScode Extension for Front-end dev

VScode extension are some tools, plugin or just customisation packs that you can install and use while coding with your favorite IDE...
MOHAMMED DAKIR| November 20, 2023
Useful VScode Extension for Front-end dev

#vscode #webdev #frontend #tools

What are extension ?

VScode extension are some tools, plugin or just customisation packs that you can install and use while coding with your favorite IDE (VScode obviously).

These extension can be really helpful to quickify your workflow, let your eyes take a break from ugly themes and more.

There is an embed panel in VScode that let you manage your installed extension and find new one. You can also visit their marketplace - all the links in this post.


The key of a great developer is their "Themes". Just some .JSON lines that spice your IDE.

Bearded Theme

vs code bearded theme

If you're a colourful person, this theme library should be perfect! With more than 40 different theme, you'll find your style.

Install it!

Chalice Icon Theme

Chalice Icon Theme vscode extention

Are you disapointed about all these icons and logos of languages or file format. Chalice have the solution, a minimalist icon theme, less distraction, more focus.

Install it!

Tool for code

If you're struggling about rethinking all of your links or have to be on several app at the same time. I have some solutions for you.

Color Highlight

Very useful to see the colours you're using in code.

Install it!

Auto Rename Tag

This one is incredible only usable in XML/HTML but it lets you code and not worrying about unclosed tags.

Install it!

Figma for VS Code

Yes, it's not a joke. You can literally open, see, copy content, attributs, exports your figma projects in VS Code.

Install it!


GitLens Free Git Extension for Visual Studio Code

Already known by the entire VS Code community but still useful to place here.

Install it!

Prettier & Prettier+

Same as GitLens, very famous but still interesting.

If you don't know what prettier do, just imagine someone who is enough good a code but only to indent correctly your code.

Install it!

Markdown All in One

This extension allow you to use some shortcut and enhanced the markdown creation to have a cool and simple tool, like

Install it!

Open the web page

Simple as its name is, this extension let you open url in your IDE. So now you only have to open VS Code to work.

Install it!


Obviously, nobody ask me to make this post, it is not an advertising and I'm not paid to do this. I only wanted to help the community as much as I can.

Thank you for reading this post and let me know if it was useful by a comment below !!

This website uses cookies to enhance your browsing experience, analyze site traffic, and serve better user experiences. By continuing to use this site, you consent to our use of cookies. Learn more in our cookie policy

Explore the latest insights, articles,free components, and expert advice on programming and software development

© Copyright 2024 MED DAKIR. All rights reserved./privacy policy