VS Code HTML Helpers Worth Trying

VS Code is the default editor for a lot of front-end work, and a big part of that is how well it handles HTML. While the built-in tooling covers the basics, a few extensions can make writing markup noticeably smoother. These are the ones that have earned a place in my setup.

Built-In Emmet Is the Real Starting Point

Emmet isn't an extension; it ships with VS Code. You trigger it by typing something like div>p*2 and expanding it with Tab. It does the heavy lifting for repetitive markup, and if you're not already using it, learning the syntax is time well spent.

Keeping Tags in Line: Closing, Renaming, and Matching

Auto Close Tag writes the closing tag the moment you type the last > in something like <div>. You can configure it to only trigger after you manually type </, which is the default behavior in Sublime Text 3. If you use the Sublime Text Keymap package, you get that behavior automatically along with other familiar shortcuts. There's also the Close HTML/XML tag extension, but it requires a keyboard shortcut and has far fewer installs than Auto Close Tag.

Auto Rename Tag is just as handy: it renames the corresponding closing tag the moment you edit an opening one. You might expect this to be part of canonical Emmet, but since VS Code ships with its own fork of Emmet, this feature lives in a separate plugin.

HTML End Tag Labels addresses a different pain point—knowing exactly what a closing tag belongs to. Instead of adding comments to mark which element is being closed (a common practice for partials), this extension overlays a UI label on the closing tag itself, so you always know the context at a glance without editing the source.

You may already have highlight-on-click for matching tags, though. In testing, I found that even with the Highlight Matching Tag extension disabled, my VS Code was still highlighting the matching tag—likely from a built-in feature. If you want more of this structured-color help, and you move into stylesheets or scripts, Bracket Pair Colorizer 2 is worth a look for colorizing matched brackets instead of tags.

Readability: Comments, Spelling, and Indentation

Better Comments gives visual weight to comment types. I often mark in-code action items with prefixes like TODO, and this extension renders those with distinct colors and the alert conventions they communicate.

Code Spell Checker is arguably non-negotiable for HTML. Since markup files carry actual content and words, misspellings find their way in. This extension surfaces them with squiggles and offers suggestions (via the same menu pattern a linter would use) — and it fills the void of VS Code offering no spell-check natively.

Indent Rainbow colors each successive indentation level differently. It serves the same navigational purpose as tag-matching for an overview. When you need to scroll up or down to see which container your current line sits inside, this is easier on the eyes.

Formatting Choices: There Is No Free Lunch

Prettier is straightforward across most syntaxes, and it's set-and-forget. With HTML, there are wrinkles.

Consider Prettier's reflowing behavior. If you purposely write a `<ul><li></li><li></li></ul>` all on one line (because your CSS is going to render those list items inline and you want no whitespace between them), Prettier will insert newlines and whitespace as part of reformatting—altering your intended layout. You can use a {/* prettier-ignore */} comment to prevent it, but that's a code smell you have to live with. There are settings under HTML Whitespace Sensitivity to mitigate this, though it's never perfect. It’s a little controversial, but my habit is to lean into as much automated formatting as I can justify, since I apply Prettier to JSX regularly and trust it.

Niche Time-Savers: Snippets, AI, and A11y

Most people find a snippet extension they can settle into. The one that stuck with me lets me create code snippets directly from existing files, which makes setup painless.

For predictive autocomplete beyond snippet matching, Tabnine markets its AI suggestions for HTML too. In practice, the attribute guessing is unusually smart looking. It drives team-wide commercial features, but for a sole developer finding suggestions, the free tier goes a long way.

Finally, the axe Accessibility Linter checks for a whole list of accessibility problems as you type. HTML with missing landmarks, poor contrast, or improper roles gets flagged right in the editor before it ever reaches a validator.

This is a loose collection, though. You may hit gaps in your workflow that call for one of these, or you might already have enough built-in help that installing more feels unnecessary. Work with what doesn't clutter your view.