Useful VScode Extension for Front-end dev
Tags: vscode, webdev, frontend
Published: 2023-11-15 14:14:03

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7bpn0laagegsjtm8tfg1.png)

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!](https://marketplace.visualstudio.com/items?itemName=BeardedBear.beardedtheme)

### Community Material Theme
![Community Material Theme in use](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/540iitv1t582kv93n2s5.png)

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!](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-community-material-theme)

### Chalice Icon Theme
![Chalice Icons list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ce613t4tkhitaiur3et.png)

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!](https://marketplace.visualstudio.com/items?itemName=artlaman.chalice-icon-theme)

---

## 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!](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)

### 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!](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

### 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!](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension)

### GitLens 
![GitLens branches](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qhns0raqm6xnvcksku0a.png)

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!](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

### 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!](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

### 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!](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)

### 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!](https://marketplace.visualstudio.com/items?itemName=zhhlwd.openTheWebPage)

---

## 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.