JSX/TSX Wrapper enables quick refactoring by allowing you to right-click on any HTML element within JSX or TSX files and wrap it with a chosen HTML or custom component. This extension simplifies your workflow by providing a context menu option to easily refactor code, helping you organize and nest c
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
A VS Code extension that allows you to easily wrap or remove JSX/TSX elements with specific HTML tags. This extension is particularly useful when working with React and TypeScript projects, where quick element wrapping can boost productivity.
Features
Wrap with Div: Easily wrap selected JSX/TSX code in a <div> tag.
Wrap with Span: Wrap your selected code in a <span> tag.
Wrap with P: Quickly wrap your code in a <p> tag.
Wrap with Anchor: Wrap selected JSX/TSX code in an <a> tag.
Wrap with Custom Element: Wrap JSX/TSX code with any HTML tag of your choice.
Remove Wrapping Element: Coming soon!
Commands
Command
Description
jsx-tsx-wrapper.div
Wraps the selected JSX/TSX code with a <div>
jsx-tsx-wrapper.span
Wraps the selected JSX/TSX code with a <span>
jsx-tsx-wrapper.p
Wraps the selected JSX/TSX code with a <p>
jsx-tsx-wrapper.a
Wraps the selected JSX/TSX code with an <a>
jsx-tsx-wrapper.add
Wraps the selected JSX/TSX code with a custom element
jsx-tsx-wrapper.remove
🚧 Remove the wrapping element (feature not implemented yet)
Installation
Download and install the extension from the VS Code marketplace.
Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on Mac).
Type the command you want to run, e.g., JSX/TSX Wrapper: Wrap with Div.
How to Use
Right-click on the selected JSX/TSX code you want to wrap.
Choose the wrapping option from the context menu (e.g., "Wrap with Div").
The selected code will be wrapped with the chosen HTML tag.
Alternatively, you can use the Command Palette:
Select the JSX/TSX code you want to wrap.
Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on Mac).
Choose the desired wrapping command (e.g., "JSX/TSX Wrapper: Wrap with Div").
Screenshots
Right-click on JSX/TSX code and select the wrapping command from the context menu.
Select the tag to wrap around the JSX/TSX code.
Contributing
Feel free to contribute to the development of this extension by submitting issues or pull requests via the GitHub repository.
License
This project is licensed under the MIT License - see the LICENSE file for details.
Support
If you find this extension helpful and would like to support its development, consider buying me a coffee: