Make your web development workflow smooth with these 5 VS Code Extensions

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. I really liked this theme and thought to share it with other you guys.

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.

Auto Rename Tag

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

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 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 to do this job for you.

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.

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.

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.

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 is what helps me most. It automatically formats the code, adds alignments, removes spaces, and all that extra stuff to make it look beautiful.

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.)

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

Bracket Pair Colorizer

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.

Live Share (Bonus Extension)

Live share 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.

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.