Easy Tag Wrap

A VSCode extension that lets you quickly wrap any HTML/JSX tag or React component with a fragment or a custom component. Just place your cursor on a tag and hit Alt+W.

✨ Features

• Detects the tag under the cursor, even inside nested structures.
• Supports JSX components and compound components like <Table.Head>.
• Handles self-closing tags (<Input />).
• Produces properly indented output — no need to run Format Document.
• After wrapping, the cursor is placed inside < > so you can immediately type a component name and let VSCode auto-import it.

🚀 How to Use

1. Open any JSX/TSX/HTML file
2. Place the cursor anywhere on a tag (opening, closing, or inside the element)
3. Press Alt+W

<>
  <div>Hello</div>
</>

Start typing:

<Card>
  <div>Hello</div>
</Card>

🔧 Customization

You can change the default shortcut in your keybindings.json:

{
  "command": "easyTagWrap.wrap",
  "key": "alt+w",
  "when": "editorTextFocus"
}