Important: To use the auto-fix feature, paste with Ctrl+Shift+V on Windows/Linux or Cmd+Shift+V on macOS. This key combination is crucial for the automatic conversion of HTML to JSX attributes.
A Visual Studio Code extension that simplifies the process of working with JSX by automatically converting HTML attributes to their JSX counterparts. This extension is particularly useful for developers who frequently switch between HTML and JSX or are transitioning projects to React.
Preview
Features
auto-jsx-attributes offers a seamless experience for developers by providing the following features:
- Automatic Conversion: Automatically converts HTML attributes to JSX attributes upon pasting HTML code into a JSX file.
- Comprehensive Attribute Mapping: Includes a wide range of HTML attributes, event handlers, and SVG-specific attributes, ensuring that your code is JSX-compliant.
- Case-Insensitive Conversion: Handles HTML attributes correctly regardless of their case, providing a hassle-free conversion process.
- SVG Support: Provides extensive support for SVG-specific attributes, making it easier to work with complex SVG elements in JSX.
To see auto-jsx-attributes in action, imagine pasting the following HTML snippet into your JSX file:
<div class="container" tabindex="1">
<label for="name">Name:</label>
<input type="text" id="name" class="input-field" autofocus>
</div>
After pasting, auto-jsx-attributes automatically converts it to:
<div className="container" tabIndex="1">
<label htmlFor="name">Name:</label>
<input type="text" id="name" className="input-field" autoFocus />
</div>
Tip: Use short, focused animations to demonstrate how auto-jsx-attributes transforms HTML to JSX in real-time, including the conversion of SVG attributes.
Requirements
There are no specific requirements for auto-jsx-attributes other than having Visual Studio Code installed. The extension handles the conversion internally without the need for external dependencies.
Extension Settings
auto-jsx-attributes works out of the box and does not require any additional settings to start converting HTML to JSX automatically. However, the extension includes configurable options to tailor the experience to your workflow:
- Auto Fix on Paste: By default, the extension will automatically convert HTML to JSX when you paste code into a JSX file. This behavior can be toggled in the settings.
- Convert Scope: You can specify whether the conversion should apply to all files or only
.jsx and .tsx files.
To adjust these settings, navigate to the Visual Studio Code settings and look for "HTML to JSX Converter".
Additionally, you can manually convert HTML to JSX by selecting the HTML code, right-clicking to open the context menu, and choosing "Convert attributes to JSX". This command is also available through the Command Palette.
Customizing Keybindings
To customize the keybinding for the auto-fix feature:
- Open Command Palette (
Ctrl+Shift+P or Cmd+Shift+P).
- Type
Preferences: Open Keyboard Shortcuts (JSON) and select it.
- Add a new object to the array with your desired keybinding, for example:
{
"key": "ctrl+alt+v",
"command": "extension.autoJsxPasteAction",
"when": "editorTextFocus"
}
- Save the
keybindings.json file.
This will override the default keybinding of Ctrl+Shift+V (Windows/Linux) or Cmd+Shift+V (macOS) with your custom keybinding.
Known Issues
In some cases, you may need to initiate the conversion process manually using the context menu option "Convert attributes to JSX" before the automatic fix-on-paste feature becomes operational.
Release Notes
0.0.6
- Added the ability for users to customize the keybinding for the auto-fix feature.
- Included documentation on how to change the key command.
- To use the auto-fix feature, paste with
Ctrl+Shift+V on Windows/Linux or Cmd+Shift+V on macOS.
0.0.5
Initial release of auto-jsx-attributes:
- Basic HTML to JSX attribute conversion.
- Expanded attribute map to cover more HTML attributes and event handlers.
- Added comprehensive support for SVG-specific attributes.
Enjoy coding with auto-jsx-attributes!
