DEV Community

Cover image for VSCode - Wrap HTML elements
Camilo Martinez
Camilo Martinez

Posted on • Edited on

9

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.

Hard Way

The good way 👍

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

Easy Way

The best way 🌟

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

Easiest

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"
    },
]


Enter fullscreen mode Exit fullscreen mode

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"
  },
]


Enter fullscreen mode Exit fullscreen mode

Balance Shortcut


Multicursor 😎

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

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
🖖

beer

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more