VSCode - Wrap HTML elements

One of the best hidden 💎 that I found on VSCode is the HTML wrapper combined with Emmet and together are pure gold.

I can believe all the time I've lost doing the same manually when forgot/need to include a parent tag.

The hard way 👎

Creating a new element and then move the content inside with cut/paste or moving the lines with alt+verticalArrows.

The good way 👍

Using the "Emmet Wrapper" option through the "Command Palette" using ctrl+shift+p.

The best way 🌟

Adding a shortcut alt+shift+w for the "Emmet Wrapper" option.

You also can define the shortcut manually.

# 📄 File: keybindings.json
-----------------------------------

// Place your key bindings in this file to override the defaults
[
    // Emmet
    {
        "key": "alt+shift+w", //wrap emmet
        "command": "editor.emmet.action.wrapWithAbbreviation",
        "when": "editorHasSelection"
    },
]

The Geek Way 🤓

What if I tell you, that the whole process can be faster without using the mouse adding more useful shortcuts.

# 📄 File: keybindings.json
-----------------------------------

// Place your key bindings in this file to override the defaults
[
  {
    "key": "alt+shift+j", //expand selection
    "command": "editor.emmet.action.balanceOut"
  },
  {
    "key": "alt+shift+k", //contact selection
    "command": "editor.emmet.action.balanceIn"
  },
]

Multicursor 😎

But the magic does not end, this wrapper is also available for multicursor.

You don't need that extension 🚫

By the way, you don't need an extension like html-tag-wrapper to achieve it.

That’s All Folks!
Happy Coding 🖖