VS Code Extensions For HTML That Will Make Your Next Project Easier

In this post let’s look at some VS Code extensions for HTML that will make writing and editing websites easier.

HTML End Tag Labels

The whole idea is that rather than you leaving comments in your HTML to indicate what HTML element it is closing. This extension shows you UI about what HTML is being closed.

Auto Close Tag

This one is super useful. Once you start using it, your life will never be the same without it. As soon as you type the > in an HTML element, like the last bracket in <div>, the closing tag is automatically created for you.

Auto Rename Tag

Similar to Auto Close Tag, but now let’s say you rename opening tag… And closing tag is renamed automatically. Super useful stuff if you ask me.

Better Comments

This extension is super useful if you like me like to use comments very liberally. It will keep them all in colored in different colors so they are easier to see in your code.

Code Spell Checker

here is no spell-checking in VS code. To me this plugin is a must-have, especially for HTML, because HTML typically has content in it, like words, that should be spelled correctly. And just like a linter, this plugin gives you squiggles when something is wrong and a menu to attempt to fix it.

Indent Rainbow

The point is that it gives you some visual cues to what level you’re currently looking/working at. In that sense it’s kind of like the Highlight Matching Tag. It’s most useful when you need to scroll up or down to find where the matching tag is.

Snippet

I believe there are lots of snippet plugins, but this is the only one I’ve tried and it works fine. I like how you make snippets right from existing files.