Setting up Visual Studio Code for Web Development

Saidur Rahman Riad
2 min readDec 8, 2021

VSCode (Visual Studio Code) is code editor on steroids which helps writing codes easier and as enjoyable as possible. VScode has some extensions that makes it a far better experience.

To set up VSCode for web development first download VSCode from here. Install it, and don’t forget to check both Add “Open with Code” options on Select Additional Tasks page.

check ‘Add “Open with Code”

After successfully installing VSCode, open the VScode and start setting up a better developer friendly workflow. From the left side, click on Extensions and install a few extensions.

Here you can search for extensions and there’s a huge possibility to find extensions for anything you want to work on. Often VSCode automatically suggests extensions depending on your language. Few must have extensions for any web developers are:

live server extension
  • Live Server: helps automatically refresh your page triggered on save. Helps countless times of manually refreshing your browser tab and can watch your changes live as you write them.
auto rename tag extension
  • Auto Rename Tag: automatically renames your html closing tags as you update your opening tags. Saves countless hours of frustrations.
  • Bracket Pair Colorizer: automatically color your brackets with unique color for easily learn the scope visually.
  • REST Client: this is helpful for developers to test RESTApi endpoints inside vscode.

You can find other extensions as you need them in the marketplace.
Happy Coding.

--

--

Saidur Rahman Riad

I am a self taught Software Developer with a CS degree.