Top VS Code Extensions For Web Developers
Tags: html, css, javascript, vscode
Published: 2021-10-21 00:45:07

Hello everyone! 💙

In this article, I will discuss some of the Visual Studio code extensions I find helpful as a web developer. These Vs. Code extensions will assist you in working faster and being more productive. 

let's get started 💃

## **What is Vs. Code Extension?**

Vs. Code extensions let you add languages, debuggers, and tools to your installation to support your development workflow. Vs. Code's rich extensibility model lets extension authors plug directly into the Vs. Code UI and contribute functionality through the same APIs used by Vs. code.

## **How to Download Vs. Code Extensions**

- You can browse and install extensions from within Vs. code. Bring up the extensions view by clicking on the extensions icon in the activity bar on the side of Vs. code or the View: Extensions command (Ctrl+Shift+X).

- Click on the extension icon on Vs. code: 
![extensions-view-icon.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1630798551634/Mo9aXV_Vr.png)

- This will show you a list of the most popular Vs. Code extensions. Click the install button to download any Vs. Code extension of your choice.

Check out this article to know more about downloading and installing [Vs. Code extensions](https://code.visualstudio.com/docs/editor/extension-marketplace#:~:text=VS%20Code%20extensions%20let%20you,APIs%20used%20by%20VS%20Code.) 

## Top Vs. Code Extensions for Web Developers

Here is a list of Vs. code extensions that will make your life as a web developer a lot easier:

1.
**Live Server**


![live server.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1630798935583/z_4ZJ7J1h.png)


The live server extension provides a live preview of your web application. It provides a live preview right within the editor. 

This extension makes your work easier as it enforces auto-reload. It displays your code results on your web browser without refreshing the page. You don't have to save your work and refresh the browser every minute to see results.



![lives.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1630884099413/jqHLMBkap.gif)

2.
**JavaScript (ES6) Code Snippets**

This extension contains code snippets for JavaScript in ES6 syntax. To speed up your javascript coding, use Javascript ES6 code snippets.


![javascript es6 code snippets.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1630799797008/MYJHsSE_t.png)

3.
**Prettier**

This extension performs the formatting of the javascript, CSS, and HTML. It tidies up the code and makes it readable every time you save the changes.

![prettier.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1630800339194/rLf0JlrY6.png)

To Use Prettier:

- Click on the extension icon on Vs. code
- Search and download prettier
- Go to settings or press `Ctrl` + `,` to open the settings tab after downloading prettier
- Use the settings search bar to look for `format`
-  To make prettier your default formatter, scroll down to `Editor: Default formatter`.  Select `prettier - code formatter` from the list of alternatives on the drop box menu
-  Scroll to `Enable Editor: format on save` and Toggle the checkbox to enable it. When you do this, prettier will format your code when you press `Ctrl `+ `S` on your code sheet. 
- Scroll to `Enable Editor: format on paste` and toggle the checkbox to enable it. You don't have to arrange your code by yourself when you copy and paste codes. Press `Ctrl` + `S`, and prettier will take care of it.

To customize prettier:

- Click settings 
- Search for prettier
- Click on the `prettier: single quote` if you want just single quotes and not double-quotes. This option is handy when working with a team, as it allows everyone to use the same number of quotations

There are several ways to customize prettier. For more information, go to the prettier settings tab.


4.
**Path Intellisense**

This extension makes the development time faster by autocompleting file names. You type the name of the files in statements, and it will search and give you suggestions.


![path intelisense.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1630801018697/aei10C6qf.png)

5.
**Code time**


![Code time.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1630801203063/ISiNHbnSo.png)

Code Time is an open-source plugin for automatic programming metrics and time tracking. 
It tracks your development and provides you with valuable stats. It tells you how many hours you spend coding. It is a helpful extension to keep track and see your progress.


![code time2.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1630801228452/gpAks2ed5.png)

6.
**Polacode**


![polacode.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1630881865527/oLwoW8VgO.png)

This extension helps you take beautiful screenshots of your code.

**To take a screenshot of your code:**

- Open the command palette (ctrl + shift + p on windows) or (cmd + shift + p on mac).

- Search for polacode and select polacode.

- Highlight the part you want to screenshot, copy and paste the code on the displayed screen and press the polacode icon to save it on your device.


![pola.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1630884183236/B7nAXgDZ8.gif)






7.
**Auto Rename Tags**

![autorename tag.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1630884405835/W6pk0pQmI.png)

This extension allows you to rename both opening and closing tags at once. When you change the starting tag, it will change the closing tag, making the renaming of tags easier.



![rename.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1630884870994/riz3q7ypg.gif)



8.
**Px to rem**

![px to rem.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1630884997991/MHvmxydYF.png)

This extension helps you to convert px to rem and rem to px. You don't need to do mathematical conversions by yourself.

All you need to do is:

- Highlight the 20px in `Font-size: 20px`

-  Press `alt + Z` keys to convert from Px to rem.

- Press and hold the `alt + Z` keys to convert from rem to Px.

The problem with this extension is that it only uses the standard size: 16px. All conversions you make using this extension will be divided by 16px.  


![px to .gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1630884955349/h4h-aDtb8.gif)


9.
**VS Code Icons**


![vs code icons.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1630887197993/pX_HLhe-l.png)

This extension adds a set of icons to each of the files and folders in the Explorer view. It makes the editor look more colorful. 


![20210906_010837.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1630887537822/25X6sTx0o.gif)

10.
**Image preview**


![image preview.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1635725337296/c9UFO-r0k.png)

**Image Preview** shows image preview in the gutter and on hover. You see the image preview when you hover over the `<img>` tag.   


![image preview.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1635725509060/aXbkzJXwt.gif)


11.
**Colorize**


![Colorize](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v54ovyhjiy3z5hupaw6r.PNG)

Colorize creates a colorful background for each color in CSS to help you visualize them. It works whenever you type in color on the border, CSS variables, text shadow, etc. 

When you enter `color: red` in your CSS code sheet, for example, it creates a red background where you typed red.



![colorize example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwex15x9wubpo1xdhg1i.PNG)



## **Conclusion**

These Vs. Code extensions will make your life easier as a web developer. If you have questions or helpful extension suggestions, drop them in the comments. I will attend to them shortly.

If you found this article helpful, please like and share it ❤️.

That's all for today! 😁 You reached the end of the article 😍.