Visual Studio Code shortcut to wrap HTML element into container tag

Question

When you have an HTML tag and you want to wrap it into another HTML tag, what is the fastest/easiest way to do so? Since it happens quite often, I'm looking for a way to optimize it.

Currently, it involves the following steps:

1. Creating the new HTML tag right before the original tag
2. Moving the (automatically generated) closing tag at the end of the original tag
3. Selecting the original tag (can require page scrolling)
4. Adjust indention on the inserted tag
5. (Finally) done...

I'm looking for something like this:

1. Selecting a (collapsed) HTML tag
2. Pressing some shortcut (e.g. CTRL + B for <b>, CTRL + D for <div>) to wrap it into a specific tag

Answer 1

I don't know if there's an extension that does your exact 2 steps, but here's a very way to do it in 3:

1. Select a HTML tag, collapsed or not - doesn't matter.
2. Press hotkey for editor.emmet.action.wrapWithAbbreviation command. By default it's unset, so you need to configure it.
3. Enter the tag that will wrap what you selected.

A way to do it in 2 steps could be with help of snippets, perhaps. You could create a bunch of snippets for different tags, like:

"Wrap with div": {
    "scope": "html",
    "prefix": "wrap",
    "body": "<div>$TM_SELECTED_TEXT</div>"
}

And then create a bunch of hotkey macros for first selecting the whole tag (e.g. editor.emmet.action.balanceOut) and then calling each of your snippet called with editor.action.insertSnippet and these args: { "name": "Wrap with div" }. See e.g. this answer for examples of defining macros.

Answer 2

So there is a way to wrap an HTML element easily with just 2 steps (after installing a vs Code extension):

So first Go into your VS code and install the extension called: "htmltagwrap".

Then you can do the magic:

1) Select the block of code you want to wrap, and -

If you are using windows press: Alt + W.

If you are using Mac press: option + W.

Then VS Code (and if I am not mistaken it is Emmet that-) will wrap the selected HTML element with a <p></p> tag automatically, but don't worry :p

2) Then straight away type the element you want and it will replace it.