VS Code extensions for HTML

Logo Credits: icons8

If you write HTML in VS Code and want to get more out of it and make the writing experience faster then this is the blog for you.

Here are the extensions to have in VS Code for HTML:

1. HTML Boilerplate

2. HTML Preview

3. Class autocomplete for HTML

4. Live Server

1. HTML Boilerplate

This extension will generate an HTML boilerplate for you.

To use it, install the extensions and then open your HTML document and their type HTML, and as you type that you will see some options. From there select the html5-boilerplate option.

After you select that you will see HTML boilerplate generate as below:

2. HTML Preview

This extension will so you the preview of your HTML document right in the vs code without going and opening any browser or even saving your HTML document. The preview updates in real-time without having to save your document.

To use it, install the extension, and then using the shortcut Ctrl + Shift + V you can view the preview as shown below:

3. Class autocomplete for HTML

This extension will be very useful for you if you use CSS frameworks like Bootstrap. With this extension, you can auto-complete the CSS class name, and will help you in writing the HTML faster.

To use it, install the extension and then you will have to link your CSS file in your HTML documents head section. After that, open the command palette with Ctrl + Shift + P and type Scan linked CSS files. This will make all the CSS classes available for you to use.

Here I have used Bootstrap and so when I type jus it shows me the suggestions for that Bootstrap class:

Note: This will only for local CSS files and not with a CDN link.

4. Live Server

With this extension, you can start a local server to see the output of the HTML page in a web browser. With this, you don’t have to refresh your browser page again and again. You just have to save your file in VS Code and the changes will get reflected in the browser automatically.

To use it, install the extension and then open your project folder or workspace. There at the bottom right corner, you will see a button that says Go Live. Click to start the server.

After that, it will start the server and run your HTML file in the default browser of your system.

To stop the server, go in VS Code, and now in place of Go Live, it will be Port:5500 written there. Click on it and the server will stop. (The port can be different for you)