fbpx

5 Must VsCode plugins for web development

Visual studio code is developed by Microsoft and it is open source editor. After its launch it got popularity among the developer. To make it more productive many contributors developed may plugins. There is an infinite number of Visual Studio Code extensions that can make programming fun for beginners and increase productivity for the more seasoned developers.

Today i will help to pick up five plugins which could help you boost your web development projects. Let do it.

#1: Beautify

As its name it do same task by beautify our files like css, html or js. VS Code uses js-beautify internally, but it lacks the ability to modify the style you wish to use. This extension enables running js-beautify in VS Code, AND honoring any .jsbeautifyrc file in the open file’s path tree to load your code styling. It can be customize and you can change many things as per your need.

#2: Bracket Pair Colorizer

If we working a big project or a big file or a function which has a lot of code then this plugin come for rescue. It help to identify the each block of code with different color. This extension allows matching brackets to be identified with colors. The user can define which tokens to match, and which colors to use.

bracket coloring
Coloring of brackets

#3: Auto Rename Tag

When we are working on HTML file, we face issues many time when we want to change name of any tag and forgot to change closing tag or opening tag. Now this plugin will help you changing close and open tag same time. Now there is no more html code issue.

Renaming tag
Auto rename tag

#4: Debugger for Chrome

An extension to debug your JavaScript code in the Google Chrome browser, or other targets that support the Chrome DevTools Protocol. In short it will help you to find out culprit code in easy way.

Debugger for Chrome
Debugger for Chrome

#5: Live Server

The Live Server extension can be used to launch a local development server with live reload feature for static & dynamic pages. effortlessly. The go-live button present in the taskbar will enable you to run your code as a development server directly, while you can also configure the extension to reload pages as soon as you save your current work.

Live Server
Live Server