machina discendi learning machine

Wrap with HTML tags in VSCode

Using the Emmet capabilities in VSCode (see previous TIL) you can highlight a section of HTML code and quickly wrap it with other HTML using Emmet shortcuts.

This is particularly useful when writing plain HTML and then returning to style it.

You can access this functionality in the command palette

wrap in command palette

Smarter, still, is to create a keyboard shortcut for this. We’ll bind ALT+M to this functionality.

create keyboard shortcut

Now, simply highlight the HTML code you want to wrap, hit ALT+M and start typing the Emmet abbreviations for the tags you want to wrap the code with. For example, we’ll wrap this simple HTML form with some BulmaCSS classes to improve layout …

wrap with tags

et voila!

machina discendi learning machine

Other articles

Emmet Abbreviations in VSCode

Other articles

links