DEV Community

Cover image for Useful VScode Extension for Front-end dev
a frank
a frank

Posted on • Edited on

Useful VScode Extension for Front-end dev

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 (Integrated development environment e.g. VScode).

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.


Customisation

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

Bearded Theme

bearded theme in use

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!

Community Material Theme

Community Material Theme in use

You are more "classic" but still like colours and better visuals. There you go, this theme library is a little bit smaller than the first one but still incredible. (I'm using it so it's the best).

Install it!

Chalice Icon Theme

Chalice Icons list

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

GitLens branches

Already known by the entire VS Code community but still useful to place here. GitLens provide you to see in a comfortable way your commits, branches and modified code. Very useful when you're not sure on which branch you are.

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 dev.to.

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!


Disclaimer

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.

Top comments (2)

Collapse
 
sebastianccc profile image
Sebastian Christopher

Excellent examples. But "Auto Rename Tag" can be replaced with linked editing, just letting you know 😜

Collapse
 
a-frank profile image
a frank

I didn't know that! thank you for sharing