The Wrapper extension for Visual Studio Code provides commands to wrap selected text in various HTML elements such as div, span, container, row, column, and fragment. It also includes a command to remove wrappers.
Features
Wrap selected text with div, span, Row, column, or fragment.
Remove wrappers from selected text.
Keybindings for quick access to wrapping commands.
Usage
Convert with cursor
Open a TypeScript React file in Visual Studio Code.
Select the text you want to wrap.
Use the command palette (Ctrl+Shift+P or Cmd+Shift+P on macOS) to search for the wrapping commands:
Wrap with div
Wrap with span
Wrap with Row
Wrap with Column
Wrap with Fragment
Remove wrapper
Highlight selection
You can also select the text you want to wrap by highlighting it with your mouse or keyboard. Once selected, use the command palette or the keybindings to wrap the selected text with the desired HTML element.
Shortcuts
Alternatively, use the keybindings:
Alt+D (or Option+D on macOS) to wrap with div
Alt+S (or Option+S on macOS) to wrap with span
Alt+F (or Option+F on macOS) to wrap with fragment