Best VS Code Extensions I Wish I Found Out Sooner
Tags: vscode, productivity, webdev
Published: 2021-11-27 13:54:18

Hey folks! I'm Mandeep and this is the first ever blog post that I'm writing here, with this I intend to kick start my blogging journey. So, here I wanna share the best VS Code extensions, which are **FREE**, that I found a little late in my coding journey.

I'm a frontend developer, currently learning React, and VS Code has been the only editor that I've been using for a long time. And it is just awesome. I'm sure you will agree if you use it too.

This list will consist of two parts:
- Best VS Code themes
- Extensions for productivity

---

## Best VS Code Themes
As you work on a project you are meant to look at your computer screen for a long long time. And as you code it's very important that the look of your editor isn't heavy on the eyes.

Although themes are very subjective and a different person might like a different theme based on how he likes his environment, here I've listed a few themes which are easy to eyes, gives a good feel to your editor and anyone can use them.

### [Make Apps Theme](https://marketplace.visualstudio.com/items?itemName=dannyconnell.make-apps-theme)

![theme 1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638017617276/tLixDjZID.png)

A relaxed, easy-on-the-eyes theme based on the Hybrid Next Theme. I came across this awesome theme after trying out a few different themes, and I've been using it ever since. It has the best color combinations and my eyes feel relaxed even if I keep looking at the screen for a longer time.

This theme was developed by  [Danny Connell](https://twitter.com/danny__connell).

### [Cobalt2 Theme](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2) 

![theme2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638018076135/aCYxEO8Ce.png)

One of the most used themes in the marketplace made by non-other than  [Wes Bos](https://twitter.com/wesbos). This one is a very popular theme and I'm sure you already know about it. It's a bluish-looking theme that gives a very relaxing vibe to your environment. 

### [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) 

![icontheme.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638018423989/CK13DxDsL.png)

The theme that you need for your icons and your folders. As your project gets bigger and you have multiple folders and files, you need a way to distinguish each file type quickly. For this you need an icons theme.

With this theme, you can change the color, design, opacity and saturation values of the folder icons, and much more. It was made by  [Philipp Keif](https://twitter.com/PhilippKief).

---

## Extensions for Productivity

### [Quokka.js](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode) 

![quokka.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1638018888083/ZqsJbYIZZ.gif)

Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.

### [Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client) 

![thunder-client.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1638018997706/3UILe6IS5.gif)

Thunder Client is a lightweight Rest API Client Extension for Visual Studio Code, hand-crafted by [Ranga Vadhineni](https://twitter.com/ranga_vadhineni) with a simple and clean design. It has features like a lightweight HTTP client with simple and clean UI, activity, collections, and environment tabs in the Action Bar View for quick access.

### [Todo Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight) 

![todo highlight.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638019431181/oedhOIqYY.png)

Highlight TODO, FIXME, and other annotations within your code. Sometimes you forget to review the TODOs you've added while coding before you publish the code to production. So I've been wanting an extension for a long time that highlights them and reminds me that there are notes or things not done yet.

### [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) 

![todotree.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638019402947/8q1-fMM0t.png)

Similar to the previous one, this extension quickly searches your workspace for comment tags like TODO and FIXME and displays them in a tree view in the explorer pane. Clicking a TODO within the tree will open the file and put the cursor on the line containing the TODO.

###  [Code Time](https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-vscode) 

![code time.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638019724180/woFYRluni.png)

Code Time is an open-source plugin for automatic programming metrics and time tracking in Visual Studio Code. Join our community of over 200,000 developers who use Code Time to reclaim time for focused, uninterrupted coding. Protect valuable code time and stay inflow.

---

That's all for this post. I hope you liked it and if you've read this far please provide your valuable comment so that I can improve my writing or add some extensions which I might not know of yet.

Do follow me on Twitter [@MandeepDebnath](https://twitter.com/MandeepDebnath)  where I share what I know within 280 characters. I'd love to connect with you there!