WrapMate is a powerful VS Code extension that lets you quickly wrap selected text with custom tags in HTML, Vue, JSX, and TSX files. It features a live preview that shows exactly where your tags will be placed as you type!
Features
✨ Live Preview: See tags appear in real-time as you type
🎯 Multi-Selection Support: Wrap multiple text blocks simultaneously
⚡ Fast & Intuitive: Simple keyboard shortcut for quick access
🎨 Visual Feedback: Highlighted preview shows exactly what will be wrapped
🔄 Smart Cancellation: Press ESC to cancel without any changes
Usage
Select the text you want to wrap in a supported file (HTML, Vue, JSX, or TSX)
Type the tag name (e.g., div, span, section)
Watch the live preview update as you type
Press Enter to apply or ESC to cancel
Example
Before:
Hello World
After wrapping with div:
<div>Hello World</div>
Multiple Selections
WrapMate supports wrapping multiple selections at once:
Hold Alt (Windows/Linux) or Option (Mac) and click to create multiple cursors
Select different text blocks
Use WrapMate to wrap all selections with the same tag
Supported File Types
HTML (.html)
Vue (.vue) - Works in Vue Single File Components
JSX (.jsx) - Works in React JavaScript files
TSX (.tsx) - Works in React TypeScript files
Requirements
VS Code version 1.93.0 or higher
Installation
Open VS Code
Press Ctrl+P / Cmd+P to open the Quick Open dialog
