VS Code Extensions For Front-end Developers
Tags: vscode, productivity, frontend
Published: 2021-08-19 00:45:08

Hello Dev, today we'll look into the world of extensions.

As a developer, we all know that VS code is great, super cool IDE to write code. To make it super amazing and productivity friendly, we must install some extensions. And in this blog, I am going to help you in making your VS Code super cool.

I'm ready to share my list of extensions. So let's begin -

##VS Code Theme

This is my VS Code theme - [teacher theme dark](https://marketplace.visualstudio.com/items?itemName=HiteshChoudhary.teacher-theme-dark) created by Hitesh Choudhary.

![theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2typhdgkbmpb4tjihkuy.png)
 

##Live Server

[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) helps in launching local development server with live reload for both static and dynamic web pages.

![live-server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6b73dw6dwcpr22euqrqt.png)


##Auto Import

We import different files, modules using the import statement. But finding the path is a headache. [Auto Import](https://marketplace.visualstudio.com/items?itemName=steoates.autoimport) helps in the completion of the import statement automatically.

![auto-import](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxmgye2qsk3u6knvbbya.png)


## Bracket Pair Colorizer

While working with loops and functions, finding pair curly braces is another headache. This time [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2) comes to the rescue by colorizing matching brackets.

![bracket-pair](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/blr2cid4e3f8r2ol4w36.png)


##Color Highlight

[Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight) highlights the colors written in hex value or RGB to give you an overview of the color.

![color-highlight](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38kqb0vpo6fjvivj3fm3.png)


##Prettier

[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) formats the whole code with proper indentation and wrapping.

![prettier](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkebbvx9b5iwfm8595d4.png)


##Todo Highlight

Sometimes we forget to review the TODOs we've added while coding before we publish the code to production. Now, we can highlight our TODOs using [Todo Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight).

![todo-highlight](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xew6inhpmjhpp7xho1fp.png)

##Auto Rename Tag

[Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) automatically rename paired HTML/XML tag. You just need to edit one tag and other will changed automatically. We just saved 2s of our time.

![auto-rename](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6cj12kb3r0dograk5h0.png)

##vscode-faker

We are front-end developers. We need fake data to test our front-end skills. Our friend, [vscode-faker](https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-faker) provides us with fake data from different categories. **Data is here, where are you?**

![vscode-faker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/krftwgkmei3rems747mc.png)

##Code Time

> Hey, Today I write code for 5 hrs.

How do I come to know about my coding hours? My ultimate time tracker, [Code Time](https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-vscode) provides programming metrics. It also sends mail every week with all the data.

![code-time](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4pa0pdw2cxu7sob8f2gf.png)

##Thunder Client

[Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client) is a lightweight Rest API Client Extension that works like **Postman** where you test your server requests.

![thunder-client](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s60eebirzm9bsnvrwr1l.png)


## Conclusion


I hope above mentioned extensions help you with frontend programming and productivity. If you find this blog as helpful, don't forget to share it.

Thank you 🙂

Connect with me on - [Twitter](https://twitter.com/helloAbhishekk)  [Instagram](https://instagram.com/abhishekgautam.ig)