### 1. [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

![prettier-banner.png](https://res.cloudinary.com/dm0o149sc/image/upload/v1630765326/prettier_banner_56046cc54c.png)

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary. 

&nbsp;
&nbsp;
&nbsp;

### 2. [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)

![better-comments.png](https://res.cloudinary.com/dm0o149sc/image/upload/v1630804339/better_comments_aca46fa641.png)


The Better Comments extension will help you create more human-friendly comments in your code.
With this extension, you will be able to categorise your annotations into:

- Alerts
- Queries
- TODOs
- Highlights
- Commented out code can also be styled to make it clear the code shouldn't be there
- Any other comment styles you'd like can be specified in the settings

![better-comments-example.png](https://res.cloudinary.com/dm0o149sc/image/upload/v1630804516/better_comments_example_8bf251bdf8.png)

&nbsp;
&nbsp;
&nbsp;

### 3. [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)

![error-lens.png](https://res.cloudinary.com/dm0o149sc/image/upload/v1630804746/error_lens_75b4023f8a.png)

Even before I can find errors myself, this awesome extension helps me identify potential bugs.

&nbsp;
&nbsp;
&nbsp;

### 4. [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

![gitlens.png](https://res.cloudinary.com/dm0o149sc/image/upload/v1630809684/gitlens_87355890ff.png)

GitLens helps you better understand code. Quickly glance into who, why and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Effortlessly explore the history and evolution of a codebase.

![gitlens.gif](https://res.cloudinary.com/dm0o149sc/image/upload/v1630809838/gitlens_f01c1363de.gif)

&nbsp;
&nbsp;
&nbsp;

### 5. [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)

![import-cost.png](https://res.cloudinary.com/dm0o149sc/image/upload/v1630810314/import_cost_7d1c079ca3.png)

Using big packages may potentially increase our apps build size by adding more code than necessary. But thanks to this extension. It helps me to decide whether I should use the package or not based on its size. This is because it will show you inline in the editor how much space a particular imported package takes up so that you can better determine if such packages are worth including with your app build. It does this using webpack and babili-webpack-plugin behind the scenes

&nbsp;
&nbsp;
&nbsp;

### 6. [JSON to TS](https://marketplace.visualstudio.com/items?itemName=MariusAlchimavicius.json-to-ts)
![jsontots.png](https://res.cloudinary.com/dm0o149sc/image/upload/v1630811833/jsontots_d0b6377082.png)

&nbsp;

Self-explanatory. I absolutely love this extension. This saves a lot of development time when working with APIs.

![jsontots.gif](https://res.cloudinary.com/dm0o149sc/image/upload/v1630812080/jsontots_dab3c88621.gif)

&nbsp;
&nbsp;
&nbsp;

### 7. [Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock)

![peacock.png](https://res.cloudinary.com/dm0o149sc/image/upload/v1630812304/peacock_775388c41e.png)

&nbsp;

A handy tool to differentiate different window instances.

![peacock.png](https://res.cloudinary.com/dm0o149sc/image/upload/v1630812465/peacock_230a8d7a16.png)

&nbsp;
&nbsp;
&nbsp;

### 8. [px to rem](https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem)
![pxtorem.png](https://res.cloudinary.com/dm0o149sc/image/upload/v1630812882/pxtorem_b778e48c48.png)

&nbsp;

`rem` is a way to add support for Accessibility to your website. This extension allows us to convert px to rem, and vice versa.


![pxtorem.gif](https://res.cloudinary.com/dm0o149sc/image/upload/v1630813136/pxtorem_a430667567.gif)

&nbsp;
&nbsp;
&nbsp;

### 9. [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)

![tailwindcss.png](https://res.cloudinary.com/dm0o149sc/image/upload/v1630813603/tailwindcss_b825c8a1d2.png)

&nbsp;

Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting.

![autocomplete.png](https://res.cloudinary.com/dm0o149sc/image/upload/v1630813726/autocomplete_09d05ded48.png)

&nbsp;
&nbsp;
&nbsp;

### 10. [Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)
![thunderclient.png](https://res.cloudinary.com/dm0o149sc/image/upload/v1630814157/thunderclient_2296419848.png)

&nbsp;

Lightweight yet fairly powerful rest client. This one is perfect as I am used to using Insomnia. Unfortunately, Insomnia it is getting bigger and bigger and doesn't serve the basic purpose of just rest and dirty rest testing. 

![thunder-client-tests.png](https://res.cloudinary.com/dm0o149sc/image/upload/v1630814425/thunder_client_tests_0105253495.png)


VS Code is awesome and boosts our development experience, but we can take advantage of its extensive list of extensions to support our workflow.
Here are my top 10 suggested VS Code extensions that will make the lives of both new and veteran users easier.

Top 10 Essential VS Code Extensions

The lightweight and powerful code editor VS Code offers many benefits such as IntelliSense autocomplete, debugging tools, the ability to write in almost any language from C++ all the way to Python. Furthermore, it is versatile with its library of extensions available for Windows, Linux or macOS users making it one of today's most used text editors! 

This category has all VS Code extensions, tools, themes and more under it.