Make your web development workflow smooth with these 5 VS Code Extensions
Tags: webdev, vscode, plugins, tools
Published: 2021-03-14 15:18:34

---
title: Make your web development workflow smooth with these 5 VS Code Extensions
published: true
description: Top five vs code extensions
tags: webdev,vscode,plugins,tools
//cover_image: https://miro.medium.com/max/875/0*EVTrtO_k_wPajGv0
canonical_url: https://sameerkatija.medium.com/make-your-web-development-workflow-smooth-with-these-5-vs-code-extensions-c394ab5ca19b
---
It’s awful when you are working on a project, but unnecessary things start to interrupt you. I was recently working on a project, where I had to create a front-end responsive design. Along CSS hectic, my HTML formatting was disturbed and things got messed up and made me angry. There was only one option left for me, leave what you are doing and start from scratch. It is always easy to start from scratch than to fix something which is perplexed. I had extensions installed that were needed to help me, but they were not working in the way they were supposed to work. Obviously, they needed some configuration.

After configuring, It became easy for me to start working again. So, I thought let’s share this with other fellows to help them make their web development workflow easy. Here are some of the extensions from my list. Let’s start.

## Cobalt2 Theme Official


When the Ide which you are using for coding doesn’t attract you, you are not gonna stick with it. The same is the case with me, all the pre-installed themes were kinda boring to me. So, I started looking for a theme, which is attractive and suits my eyes.

So, I found the [Cobalt2 Theme official](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2). I really liked this theme and thought to share it with other you guys.

![Cobalt2 Theme official](https://miro.medium.com/max/875/1*y19d0heOGOGtv_oiRFxf8g.png)

You just need to install it and reload the window, you will see the changes. If you didn’t see then you should try changing from **CTRL+ K and CTRL+ T** simultaneously (If you are using a mac, then replace ctrl with command key). You will see a pop-up, there select the cobalt 2.

![Picture of Color themes](https://miro.medium.com/max/875/1*pi55av56xojtznTcXJdFZA.png)

## Auto Rename Tag

This extension is used to automatically rename the HTML closing tag when you change the opening tag and vice versa.

![Auto Rename tag](https://miro.medium.com/max/875/1*DDvxT-D74-9scNsLOYX5pQ.png)

If you are working on a big project, finding the tags can be difficult and time-wasting. So, isn’t it better to let the [auto rename tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) do it for you?

## Live Server

While working on projects whenever we change something, we have to reload the web browser to see the changes. There comes the [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) to do this job for you.

![Live Server Extension](https://miro.medium.com/max/875/1*ncKQaiaMgt6SQLVgLQS3dQ.png)

To use the live server, open the workspace, and then at the bottom-right corner, you will find “Go live”. Click on that and you will see the live changes.

![Go Live](https://miro.medium.com/max/778/1*MJax701MdL_lnHbbdzhtYw.png)

Another great advantage of using a Live server is that if you are connected to the same network, there is some good news for you. You can Remote Connect through WLAN. To do that you need to open a command prompt or terminal, depending on the OS you are using, and type.

```
ipconfig (for windows)
ifconfig (for mac and Linux)
```

If you are connected with wifi, navigate to “**Wireless Lan adapter Wi-Fi**” or if you are using ethernet then you must see in “**Ethernet adapter Ethernet**”. There you will see your **IPv4 address**. As my Ipv4 is highlighted Yellow.

![IPV4 address in windows cmd](https://miro.medium.com/max/875/1*chR6c00w2mz3RSItjanpTg.png)

If you are Linux or Mac user, you will see almost the same result with different commands. Same, I am using wifi, so I will check it in wifi0.

![IPv4 Address in Linux](https://miro.medium.com/max/875/1*0JOdHUqJetgS7jzgpIzP9A.png)

After finding your IP, go to the mobile browser and type your Ip and the port number in the search bar. Like `http://<IP Address> : <Port> .` The port number is what you see after localhost:0000, in this case, 0000 is your port number and if you see something else, that is your port number.

## Prettier — code formatter

[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) is what helps me most. It automatically formats the code, adds alignments, removes spaces, and all that extra stuff to make it look beautiful.

![Prettier — code formatter extension](https://miro.medium.com/max/875/1*oluTwUDw-ll9yTrYm2Quyw.png)

If Prettier, after installing isn't working then there are some settings, which you need to do after installing it. First set “Format on save” and second set Prettier as a default formatter. to do that open settings by typing “**Ctrl+,**” for windows, and “**command key +,**” for mac.

There search for “Format on save” and check the box. (If the box is already checked, leave it as it is.)

![Format on save](https://miro.medium.com/max/875/1*MM4FosBUNPa1P9wWRQpXng.png)

After that search for default formatter, and choose “esbenp.prettier-vscode” your default formatter. (If this is already selected, leave it as it is.)

![Default Formatter vs code](https://miro.medium.com/max/875/1*154w__KcCbquSQSOldKXgg.png)

## Bracket Pair Colorizer

[Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) is useful a lot when you working with functions, nested if, and a lot more. This extension turns the color of brackets of the same function, loop, or if statement in the same color. Which help’s us to identify which bracket belongs where.

![Bracket Pair Colorizer Extension](https://miro.medium.com/max/875/1*W2BtJ0TohFHhCahL2nG91g.png)

## Live Share (Bonus Extension)

[Live share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) is very useful much useful if you are working in a team or want to collaborate with someone. This extension allows us to share our code space with others and they can use and type code.

If you are a beginner and start learning to code, you might need this extension.

![Live Server Extension](https://miro.medium.com/max/875/1*KXjq9K0vsBV0vh6JL6BPBA.png)

## Conclusion
These were some extensions from my list, which I found useful, and it helped me code better without getting interrupted and that’s why I am sharing this with the world. One thing, I want to clear is that this list is not structured as most favorite to least. Every extension has a different job to do for me, therefore all have the same place here.

> P.S. Time to ask something. If you liked or didn’t like my article, give me a like 😜 and share it with your fellows because **sharing is caring**.