VS Code Extensions for HTML

WebHostPolice

June 7, 2021

Let’s take a look at some extensions for VS Code that make writing and enhancing HTML (and languages which are mainly HTML with additional powers) higher. It’s possible you’ll not like all of them. Possibly a few of them don’t enchantment to you, remedy an issue you don’t have, or really feel like extra muddle than you want. That’s OK. These are only a handful that I’ve tried and preferred to some extent.

I’d begin with Emmet right here, even thought it’s not technically an extension¹ for VS Code. It’s constructed proper in. You need to find out about it although as a result of it’s very helpful. It does “HTML Expansions” like this, which I exploit just about daily of my life:

HTML End Tag Labels

I heard about this one from Stefan Judis who blogged about it the opposite day and impressed this put up thought.

The entire thought is that slightly than you leaving feedback in your HTML to point what HTML aspect it’s closing (a considerably frequent apply, particularly for partials that shut parts which may not be opened in the identical doc).

<div class="major">


</div> <!-- / div.major -->

<?php /* / div.major */ ?>
<?php /* Generally I would do it in a server facet language so it did not go over the wire. */ ?>

This extension reveals you UI about what HTML is being closed:

Auto Close Tag

As quickly as you kind the > in an HTML aspect, just like the final bracket in <div>, the closing tag is mechanically created for you.

It may be configured to solely auto shut after you’ve typed the </ to point you’re about to shut a tag, which is a default in Elegant Textual content 3. Talking of which, in case you set up the Sublime Text Keymap, you’d get that mechanically, plus a handful of different fancy key instructions.

There may be additionally Close HTML/XML tag, nevertheless it solely works through key command. With Auto Shut Tag you’ll be able to configure it both means, and it has much more installs for no matter purpose.

Highlight Matching Tag

Right here’s the GIF from their docs:

I used to be going to do my very own video, however I found that even when I’ve this extension off, one thing else in my VS Code is highlighting matching tags anyway. I’m not completely certain what it’s, which leads me to imagine it is perhaps a built-in characteristic now.

What I see with out this extension on: a border across the matching tags.

Not particular to HTML, but when like this type of assist with matching issues, you may give Bracket Pair Colorizer 2 a strive, which may be fairly good for CSS and JavaScript.

Auto Rename Tag

I discover this one fairly helpful!

I imagine this performance is definitely constructed into the canonical Emmet, however once more, VS Code doesn’t use canonical Emmet so this characteristic isn’t there, therefore the necessity for this additional plugin.

I go away code feedback pretty liberally, particularly when dev’ing out new issues. A conference I like is when a remark is prefixed (e.g. TODO) that it’s additional essential and wishes consideration. Higher Feedback permits these to look visually totally different.

Code Spell Checker

There isn’t a spell-checking in VS code. I don’t love that. To me this plugin is a must have, particularly for HTML, as a result of HTML usually has content material in it, like phrases, that needs to be spelled accurately. And similar to a linter, this plugin offers you squiggles when one thing is fallacious and a menu to aim to repair it.

Indent Rainbow

Bask on this wonderful rainbow created by deepening indents:

The purpose is that it offers you some visible cues to what stage you’re presently wanting/working at. In that sense it’s kinda just like the Spotlight Matching Tag, however I like them each actually. It’s most helpful when it’s worthwhile to scroll up or down to seek out the place the matching tag is.

Prettier

Prettier does work on HTML, however I’d nearly name it a smidge controversial. For instance, it breaks HTML attributes onto single strains which feels loads like a JSX factor however much less frequent to see in uncooked HTML. However typically there are literal uncomfortable side effects. Like in case you kind <ul><li></li><li></li></ul> on goal like that (no whitespace) since you’re going to set all of the listing gadgets inline, Prettier will break them onto their very own strains, inserting whitespace, and altering the format of what you propose. You possibly can all the time repair it with a remark for Prettier to depart it alone (e.g. {/* prettier-ignore */}), however I may see it rubbing individuals the fallacious means. There are even settings for it underneath HTML Whitespace Sensitivity, nevertheless it may by no means be good.

I truly acquired Prettier for HTML working only for this weblog put up so I believe I’ll hold it for some time and see if I prefer it. I already know I like Prettier for JSX. I’m usually for as a lot autoformatting as potential.