Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>JSX Attribute NinjaNew to Visual Studio Code? Get it now.
JSX Attribute Ninja

JSX Attribute Ninja

Chetan Divekar

|
772 installs
| (2) | Free
A powerful extension for working with JSX attributes.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

JSX Attribute Ninja

The JSX Attribute Ninja is a Visual Studio Code extension that helps you effortlessly replace and modify attributes in JSX files. It automates the process of converting commonly used attributes in JSX, making your development workflow faster and more efficient.

Alt Text

Features

  • Automatic attribute replacement: The extension automatically detects and replaces specific attributes in JSX files, saving you time and effort.
  • Attribute conversions: It converts commonly used attributes to their appropriate JSX equivalents, ensuring your code adheres to JSX syntax conventions.
  • Multiple attribute support: The extension handles multiple instances of attribute replacements in a single file or across multiple files simultaneously.
  • Customizable rules: You can configure the extension's rules and specify your own attribute mappings to suit your project's specific needs.

Usage

  1. Install the "JSX Attribute Ninja" extension from the Visual Studio Code Marketplace.
  2. Open a JSX or JS file in Visual Studio Code.
  3. Save the file and Format the Document with JSX Attribute Ninja to trigger the automatic attribute replacement process.
  4. Sit back and let the JSX Attribute Ninja do its magic! It will replace the specified attributes with their JSX equivalents throughout the file.

Configuration

To configure the JSX Attribute Ninja extension, follow these steps:

  1. Right-click on the file you want to format.
  2. Select "Format Document" from the context menu.
  3. Choose "JSX Attribute Ninja" from the available formatting options.

That's it! The extension will automatically format the document according to the specified rules.

Supported Attribute Replacements

The JSX Attribute Ninja supports the following attribute replacements:

  • class to className
  • href="#" to href="/"
  • <input> to <input />
  • <img> to <img />
  • Inline styling conversion to compatible React syntax
  • <hr> to <hr />
  • <br> to <br />
  • for to htmlFor

Contribution

Contributions and feedback are welcome! If you encounter any issues or have suggestions for improvements, please visit the(https://github.com/chetandivekar) for the JSX Attribute Ninja extension.

License

MIT License

Copyright (c) Chetan Divekar

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft