{"id":340390,"date":"2021-06-07T07:13:50","date_gmt":"2021-06-07T14:13:50","guid":{"rendered":"https:\/\/css-tricks.com\/?p=340390"},"modified":"2021-06-07T07:13:52","modified_gmt":"2021-06-07T14:13:52","slug":"vs-code-extensions-for-html","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/vs-code-extensions-for-html\/","title":{"rendered":"VS Code Extensions for HTML"},"content":{"rendered":"\n

Let’s look at some extensions for VS Code that make writing and editing HTML (and languages that are basically HTML with extra powers) better. You may not like all<\/em> of them. Maybe some of them don’t appeal to you, solve a problem you don’t have, or feel like more clutter than you need. That’s OK. These are just a handful that I’ve tried and liked to some degree.<\/p>\n\n\n\n\n\n\n\n

I’d start with Emmet here, even thought it’s not technically an extension1<\/a><\/sup> for VS Code. It’s built right in. You should know about it though because it’s very useful. It does “HTML Expansions” like this, which I use pretty much every day of my life:<\/p>\n\n\n\n

HTML End Tag Labels<\/a><\/h3>\n\n\n

I heard about this one from Stefan Judis who blogged about it the other day and inspired this post idea. <\/p>\n\n\n\n

The whole idea is that rather than you leaving comments in your HTML to indicate what HTML element it is closing (a somewhat<\/em> common practice, especially for partials that close elements that might not be opened in the same document).<\/p>\n\n\n\n

<div class=\"main\">\n\n\n<\/div> <!-- \/ div.main -->\n\n<?php \/* \/ div.main *\/ ?>\n<?php \/* Sometimes I'd do it in a server side language so it didn't go over the wire. *\/ ?><\/code><\/pre>\n\n\n\n
This extension shows you UI about what HTML is being closed:<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n
Auto Close Tag<\/a><\/h3>\n\n\n
As soon as you type the ><\/code> in an HTML element, like the last bracket in <div><\/code>, the closing tag is automatically created for you.<\/p>\n\n\n\n
It can be configured to only auto close after you’ve typed the <\/<\/code> to indicate you’re about to close a tag, which is a default in Sublime Text 3. Speaking of which, if you install the Sublime Text Keymap<\/a>, you’d get that automatically, plus a handful of other fancy key commands. <\/p>\n\n\n\n
There is also Close HTML\/XML tag<\/a>, but it only works via key command. With Auto Close Tag you can configure it either way, and it has far more installs for whatever reason. <\/p>\n\n\n
Highlight Matching Tag<\/a><\/strong><\/h3>\n\n\n
Here’s the GIF from their docs:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
I was going to do my own video, but I discovered that even if I have this extension off, something else in my VS Code is highlighting matching tags anyway. I’m not entirely sure what it is, which leads me to believe it might be a built-in feature now. <\/p>\n\n\n\n
\"\"
What I see without this extension on: a border around the matching tags.<\/figcaption><\/figure>\n\n\n\n
Not specific to HTML, but if like this sort of help with matching things, you might give Bracket Pair Colorizer 2<\/a> a try, which can be quite nice for CSS and JavaScript. <\/p>\n\n\n
Auto Rename Tag<\/a><\/h3>\n\n\n
I find this one quite useful! <\/p>\n\n\n\n
Better Comments<\/a><\/h3>\n\n\n
I leave code comments fairly liberally, especially when dev’ing out new things. A convention I like is when a comment is prefixed (e.g. TODO) that it is extra important and needs attention. Better Comments allows those to look visually different. <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n
Code Spell Checker<\/a><\/h3>\n\n\n
There is no spell-checking in VS code. I don’t love that. 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.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n
Indent Rainbow<\/a><\/h3>\n\n\n
Bask in this glorious rainbow created by deepening indents:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
The point is that it gives you some visual cues to what level you’re currently looking\/working at. In that sense it’s kinda like the Highlight Matching Tag, but I like them both honestly. It’s most useful when you need to scroll up or down to find where the matching tag is.<\/p>\n\n\n
Prettier<\/h3>\n\n\n
Prettier<\/a> does work on HTML, but I’d almost call it a smidge controversial. For example, it breaks HTML attributes onto single lines which feels a lot like a JSX thing but less common to see in raw HTML. But sometimes there are literal side effects. Like if you type <ul><li><\/li><li><\/li><\/ul><\/code> on purpose like that (no whitespace) because you’re going to set all the list items inline<\/code>, Prettier will break them onto their own lines, inserting whitespace, and changing the layout of what you intend. You can always fix it with a comment for Prettier to leave it alone (e.g. {\/* prettier-ignore *\/}<\/code>), but I could see it rubbing people the wrong way. There are even settings for it under HTML Whitespace Sensitivity<\/strong>, but it could never be perfect.<\/p>\n\n\n\n
Snippet<\/a><\/h3>\n\n\n
I gotta imagine 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. <\/p>\n\n\n\n
Tabnine<\/a><\/h3>\n\n\n
I heard about this one from Kyle Simpson who I think was doing some paid consulting with them or something. The point of it is that it does fancy AI-powered autocomplete suggestions, even in HTML. Check out it guessing at some attributes:<\/p>\n\n\n\n
axe Accessibility Linter<\/a><\/h3>\n\n\n
This lints your HTML for accessibility problems right in the editor. There are a bunch of rules<\/a> it checks for. <\/p>\n\n\n\n
  1. Did you know even though VS Code has Emmet baked right in, there is no communication between Emmet’s creator and the VS Code team? I’ve tried to facilitate that connection<\/a> in the past, but failed. Point being: Emmet in VS Code would probably be better if it wasn’t just jacked in but integrated from the official packages. Emmet has new things that VS Code could use, like expansion previews. \u2b91<\/a><\/li><\/ol>\n","protected":false},"excerpt":{"rendered":"
    Let’s look at some extensions for VS Code that make writing and editing HTML (and languages that are basically HTML with extra powers) better. You may not like all of them. Maybe some of them don’t appeal to you, solve a problem you don’t have, or feel like more clutter than you need. That’s OK. […]<\/p>\n","protected":false},"author":3,"featured_media":274363,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1418],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/vscode-shadow.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":307051,"url":"https:\/\/css-tricks.com\/my-visual-studio-code-setup-extensions-and-themes\/","url_meta":{"origin":340390,"position":0},"title":"My Visual Studio Code Setup: Extensions and Themes","date":"April 22, 2020","format":false,"excerpt":"Matthias Ott's posted his VS Code setup. I find lists like this (I rounded up some recent updates of my own) irresistible, probably because, like y'all, I spend an awful lot of time in VS Code and wanna make sure I'm getting the most out of it. Things from the\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/vscode.png?fit=1200%2C792&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":321004,"url":"https:\/\/css-tricks.com\/editing-html-like-a-boss-in-vs-code\/","url_meta":{"origin":340390,"position":1},"title":"Editing HTML Like A Boss In VS Code","date":"September 16, 2020","format":false,"excerpt":"Here's a seven minute video from Caleb Porzio that focuses on some of Emmet's HTML editing features. You might think of Emmet as that thing that expands abbreviations like table.stats>tr*3>td*3 into glorious, expanded, and perfect HTML. But Emmet has other HTML editing trickery up its sleeve. My favorite is \"wrap\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/emmet-codepen-expand.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":274310,"url":"https:\/\/css-tricks.com\/vs-code-extensions-for-the-discerning-developer-palette\/","url_meta":{"origin":340390,"position":2},"title":"VS Code extensions for the discerning developer palate","date":"August 2, 2018","format":false,"excerpt":"I am a VS Code extension snob. I like to hunt down the most obscure extensions for VS Code \u2014 the ones that nobody knows about \u2014 and impress people at parties with my knowledge of finely aged and little-known VS Code capabilities\u2026 then watch as they look around desperately\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/vscode-shadow.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":356818,"url":"https:\/\/css-tricks.com\/the-many-faces-of-vs-code-in-the-browser\/","url_meta":{"origin":340390,"position":3},"title":"The Many Faces of VS Code in the Browser","date":"November 18, 2021","format":false,"excerpt":"VS Code is built from web technologies (HTML, CSS, and JavaScript), but dare I say today it's mostly used a local app that's installed on your machine. That's starting to shift, though, as there has been an absolute explosion of places VS Code is becoming available to use on the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/vscode-browser.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":275108,"url":"https:\/\/css-tricks.com\/what-i-learned-by-building-my-own-vs-code-extension\/","url_meta":{"origin":340390,"position":4},"title":"What I Learned by Building My Own VS Code Extension","date":"August 20, 2018","format":false,"excerpt":"VS Code is slowly closing the gap between a text editor and an integrated development environment (IDE). At the core of this extremely versatile and flexible tool lies a wonderful API that provides an extensible plugin model that is relatively easy for JavaScript developers to build on. With my first\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/allautocomplete.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":367403,"url":"https:\/\/css-tricks.com\/quick-tip-clear-vs-code-cache-for-open-files\/","url_meta":{"origin":340390,"position":5},"title":"Quick Tip: Clear VS Code Cache for Open Files","date":"August 11, 2022","format":false,"excerpt":"If you use VS Code, you might have enabled the setting for re-opening a previously open file next time the app launches. I do. I like that. Hey, thanks for remembering, buddy! \ud83e\udd17 But sometimes you really, really don't want that to happen. I recently ran into one of those\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/vs-code-open-last-file.png?fit=1003%2C563&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/340390"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=340390"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/340390\/revisions"}],"predecessor-version":[{"id":341907,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/340390\/revisions\/341907"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/274363"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=340390"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=340390"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=340390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}