Must-have VS Code extensions for web developers

Must-have VS Code extensions for web developers
Published: by
Last updated:
Categories
Coding

Visual Studio Code has just-enough functionality to make it great for coding projects. This post lists the must-have VS Code extensions for web developers.

Introduction

With its basic, but powerful functionality, Visual Studio Code (or VS Code) is a popular choice for web developers. Even though there is little wrong with its ability to handle HTML, CSS, JavaScript and PHP, there are some additional, must-have VS Code extensions for web developers.

Although these extensions are not required, they will save web developers a ton of time down the line.

Installing VS Code extensions

In Visual Studio Code, extensions are either added in the Extensions sidebar or can be installed from the VS Code Marketplace. By selecting the Extensions icon from the Action bar, the Extensions sidebar will open. Here you can toggle between installed and popular (non-installed) extensions.

VS Code installing extensions
VS Code Workspace showing the Extensions sidebar. The extensions icon is located on the left-hand side of the IU at the bottom of the Activity bar.

Desired extensions can be chosen from the list and/or searched for by using the search bar on the top of the Extensions sidebar. Extensions can also be searched for and installed from the Visual Studio Code Extensions Marketplace.

More information, such as the description, version, number of downloads and star rating can be obtained by clicking on the desired extension.

VS Code extensions info

Extensions are installed/uninstalled by clicking on their respective buttons. Some extensions will need VS Code to be reloaded.

Remote-SSH extension

Remote-SSH is a free Microsoft extension allows VS Code to connect to remote locations using SSH. It can be searched for by using the word “remote”.

VS Code Remote - SSH extension screen

At the time of writing, the Remote-SSH extension was at version 0.62.0, had over 2.5 million downloads, and a five-star rating.

After the Remote-SSH extension has been installed, a Remote Explorer icon will appear in the VS Code Action Bar. From here, new remote connections can be configured.

Bracket Pair Colorizer extension

The Bracket Pair Colourizer extension by CoenraadS is a free extension that creates coloured bracket pairs for nested elements. This comes in quite handy when writing nested CSS, SCSS and JavaScript.

As long as the coding area is happy with the content, it doesn’t matter what type of brackets are being used. The colouration of matching brackets can significantly help coders to keep track of their code.

VS Cde Bracket Pair Colorizer extension
The Bracket Pair Colorizer extension can be installed by searching for it in the Extensions sidebar. The extension can be installed for local projects.

At the time of writing, the Bracket Pair Colorizer was at version 1.0.61, had a 4.5-star rating and over 4.3 million installs. There was also mention of version 2 that is in the making. It can be searched for by using the word “bracket pair” in the Extensions search bar.

Live Server extension

Live Server is a Visual Studio Code extension made by Ritwick Dey. This extension creates a local development server with a live reload feature for static and dynamic pages — perfect for smaller coding projects. As you type and save in the VS Code editor, the server will auto-update and show the changes immediately as it is made.

Visual Studio Code Live Server extension

After the Live Server extension has been installed, a working folder or Workspace needs to be created first. After this is done, there will be a little “Go Live” button on the Status bar on the bottom of the screen. Each Workspace will have its own live server.

Note that individual files will not open correctly with File Server, the working directory needs to be opened instead.

By clicking this button a web browser with the project will launch. Each time changes has been made to any of the files in VS code, the web browser will update automatically.

Prettier Code Formatter extension

Prettier Code Formatter (or Prettier) is a Visual Studio Code extension that reformats code to a consistent, nested style. It parses and re-prints code with rules that take the maximum line length into account, wrapping code when necessary and adding appropriate space lengths.

Features also include adding semi-colons at the end of code, replacing double quotations with single quotations, etc.

Visual Studio Code Prettier extension
The Prettier VS Code extension is great for web developers as it automatically creates a nested structure upon saving a file. It can be installed for local projects.

Prettier works with any programming language and code formatting take place automatically when the file is saved.

Another nice feature about Prettier is that the default settings can be manually overwritten by using a configuration file.

At the time of writing, it was at v5.8.0, had more than 10 million installs, a 4 out of 5-star rating.

Auto Tag Rename extension

Auto Tag Rename is a VS Code extension by Jun Han that renames closing HTML tags according to their respectful opening tag.

Unlike the Auto Close Tag extension (by the same author – see below) it does not automatically create closing tags. This means no more searching for, or forgetting, the closing tag when the opening tag has been renamed.

VS Code Auto Rename Tag extension
The Auto Rename Tag extension for VS Code automatically renames closing tags according to their respectful opening tag.

At the time of writing, the Auto Tag Rename extension was at version 0.1.6 but pretty popular having almost 4.5 million downloads. The rating was 3 out of 5 stars.

Auto Close Tag extension

Auto Close Tag is a VS Code extension also made by Jun Han. As its name implies, it automatically creates closing HTML/XML tags.

VS Code Auto Close Tag extension
The Auto Close Tag extension for VS Code automatically creates closing tags. It can be installed inside a workspace.

At the time of writing, this extension was at v0.5.10, had almost 4 million downloads and a 4-star rating.

SVG Previewer extension

For those using SVG files in their web designs, the SVG Previewer extension comes highly recommended. This extension, made by Vitalii Mazurenko, add the ability to Visual Studio Code to generate a resizable preview of SVG files.

VS Code SVG Previewer extension

The default opening action of SVG files shows their code in the Editor section of VS Code. SVG Previewer adds a little icon on the top right corner of the Editor section. The image is generated in a separate window.

At the time of writing, the SVG Previewer extension was at version 0.6.0, had over 20 000 installed and a five-star rating.

HTML Boilerplate extension

For those coding webpages from scratch having the HTML5 template handy will save a lot of time and create consistency. The HTML Boilerplate extension adds the standard HTML boilerplate code to the auto-suggestion dropdown list. Simply start typing ‘html5-boilerplate’ and select the snippet from the list.

VS Code HTML Boilerplate

At the time of writing, the HTML Boilerplate extension was at version 1.1.1 (last updated September 2020), had just below 1 million active installs and a 5-star rating. It was written by sidthesloth.

HTML CSS Support extension

HTML CSS Support is a VS Code extension that adds autocomplete for the HTML class and id attributes. If the class or id was referenced in either the internal or external style sheet, it will be recognised and listed.

VS Code HTML CSS Support extension

This extension comes in very handy, especially when class-heavy frameworks such as Bootstrap is used.

The HTML CSS Support extension was written by ecmel. At the time of writing it had more than 5.5 million active installs, a 3.5 out of 5 star rating (75 reviews)  and was sitting at version 1.10.2.

Path Autocomplete extension

The Path Autocomplete extension by Mihai Vilcu adds autocompletion to typed paths within Visual Studio Code. It supports relative and absolute paths.

VS Code Path Autocomplete Extension

At the time of writing, Path Autocomplete was at v1.17.1, had an average star rating of 5 (from 39 users) and had more than 645 000 active installs.

Conclusion

Even though Visual Studio Code is meant to be limited with its features, it packs a punch with some great, free and useful third-party extensions. Web developers have many great extensions that can make projects easier and more efficient to code.

Raspberry Pi accessories

To get started with the Raspberry Pi, you might need some of the following accessories.

Please support us by using these links - they come at no additional cost to you, but we get a little commission each time they are used. These and others are available from Amazon.com and BangGood.

We have tested most of these products ourselves. Other selection criteria include affordability, quality, availability and average user rating and popularity by other buyers.

Links will open in a new window.
(Dead or old links can be reported in the comments section below.)

Behind the Scenes is a free, informative website. If you find value in any of our content, please consider making a donation to our cause.
Donate via PayPal

Save, share & discuss

Your comment is important, but don't be a knob. Keep it constructive and polite.

Leave a Reply

Your email address will not be published. Required fields are marked *

More coding related posts