JSX/TSX Wrapper Extension

JSX/TSX Wrapper VS Code Extension

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

Installation

1. Download and install the extension from the VS Code marketplace.
2. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on Mac).
3. Type the command you want to run, e.g., JSX/TSX Wrapper: Wrap with Div.

How to Use

1. Right-click on the selected JSX/TSX code you want to wrap.
2. Choose the wrapping option from the context menu (e.g., "Wrap with Div").
3. The selected code will be wrapped with the chosen HTML tag.

Alternatively, you can use the Command Palette:

1. Select the JSX/TSX code you want to wrap.
2. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on Mac).
3. Choose the desired wrapping command (e.g., "JSX/TSX Wrapper: Wrap with Div").

Screenshots

1. Right-click on JSX/TSX code and select the wrapping command from the context menu.
2. 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: