Looking for best Visual Studio Code extensions for my web development activities, I came across a plethora of VS Code extensions made available by various developers not just for web development, but for various other types of programming activities as well.
In this article, I will list out few of these Visual Studio Code extensions suitable for HTML coding activities.
List of Visual Studio Code extensions for HTML
Intellisense (Built-in, no extension required)
I agree that this blog post started as showcasing a list of HTML Visual Studio Code extensions, but I would be doing a disservice to the developers of VS Code if I did not mention the excellent support that has been provided as built in functionality in the Visual Studio Code itself via Intellisense. VS Code Intellisense provides support for suggestions and auto completion of basic HTML tags.
Emmet Feature In VS Code (Again, built in, no extension required)
Emmet is my next go to feature that is built into VS Code now that I highly recommend to everyone out there that is working with HTML coding or development using Visual Studio Code.
One of the main functionality of Emmet on VS Code is to provide basic abbreviations for most of HTML code.
So say for example you are about to create a new HTML page that you want it to be mobile friendly and descibes all the basic structure of an HTML page such as UTF charset meta data, viewport type, language type etc. You can do so by simply typing “html:5” at the beginning of the document and pressing TAB key. This will trigger the Emmet’s abbreviation feature resulting in autocompleting the basic structure of a web page as shown in the GIF below:
HTML5-Boilerplate VS Code HTML Extension
The next Visual Studio Code extension for HTML deals specifically with HTML 5 and is called HTML5-Boilerplate VS Code extension.
The HTML5-Boilerplate VS Code extension is very similar to that of Emmet we had discussed earlier, but differs in the fact that it specifically deals with generating boilerplate code for HTML 5. Below is a GIF showing HTML5-Boilerplate Visual Studio Code (VS Code) extension in action:
Installation Code: ext install sidthesloth.html5-boilerplate
HTML Live Preview VS Code HTML Extension
HTML Live Preview is another Visual Studio Code extension that as the name suggests, helps its users to do a live preview of their HTML web page during its development. What is interesting is that the HTML Live Preview VS Code extension does this at real time as shown in the GIF below:
Installation Code: ext install hdg.live-html-previewer
These are some of the HTML extensions for Visual Studio Code editor that I have come across up until now. I am pretty sure I might have missed out a lot more useful HTML extensions for VS Code, which I would continue to add to my toolkit upon discovery and update this article accordingly. For now, these extensions are bound to make my life easy while developing HTML code for my web development activities.
If you are aware of any more Visual Studio Code extensions for HTML that you found useful and you think I should try and recommend it to others, do let me know in the comments below and I will definitely look into it.
Till then, happy coding!