JSX Spark ✨

JSX Spark is a powerful, smart, and context-aware comment toggler for React (JS/TS) developers in VS Code. It solves the long-standing frustration of toggling comments in React files. no more wrestling with a single {/* block */} wrapping everything or standard double-slashes (//) breaking your JSX code.

JSX Spark detects exactly where your cursor is and applies the correct comment format line-by-line or across a block.

🚀 Key Features

• Smart Context Detection: Automatically toggles standard single-line JavaScript comments (//) inside hooks, function definitions, imports, or handlers, and JSX comments ({/* ... */}) when inside JSX/HTML structures.
• Line-by-Line Controls: Select multiple lines and comment them individually, allowing you to easily comment and uncomment specific lines within a block without breaking the whole container.
• JSX Block Commenting: Toggle block comments wrapper ({/* ... */}) around your entire selection with a single shortcut.
• Custom Spacing: Configure whether your JSX comments should be formatted with inner spacing ({/* content */}) or compact ({/*content*/}).
• Intelligent Blank Line Handling: Optionally skip commenting empty/blank lines to preserve clean structure.
• Mixed Selection Recovery: If you select a mix of commented and uncommented lines, JSX Spark will intelligently comment only the uncommented ones first, rather than double-commenting already commented lines. Hitting toggle again will uncomment them all.

📸 How It Works (Before & After)

1. Smart Line Commenting (JSX Context)

Before Selection:

<FeaturedProducts />
<Features />
<Categories />

After toggling line comment (Cmd+' / Ctrl+'):

{/* <FeaturedProducts /> */}
{/* <Features /> */}
{/* <Categories /> */}

Now you can easily uncomment just one of these lines by pressing the shortcut on that line alone!

2. Smart Line Commenting (JavaScript/TypeScript Context)

Before Selection:

const [products, setProducts] = useState([]);
useEffect(() => {
    fetchProducts();
}, []);

After toggling line comment (Cmd+' / Ctrl+'):

// const [products, setProducts] = useState([]);
// useEffect(() => {
//     fetchProducts();
// }, []);

3. JSX Block Commenting

Before Selection:

<div className="wrapper">
    <Sidebar />
    <MainContent />
</div>

After toggling block comment (Cmd+Alt+' / Ctrl+Alt+'):

{/* <div className="wrapper">
    <Sidebar />
    <MainContent />
</div> */}

⌨️ Shortcuts & Usage

JSX Spark supports multiple modes depending on your workflow. The following default keyboard shortcuts are configured:

⚙️ Configuration Settings

Customize how JSX Spark formats comments in your workspace. Open your VS Code Settings (Cmd+, / Ctrl+,) and search for JSX Spark:

📦 Installation

To install JSX Spark manually:

1. Download the latest packaged release: jsx-spark-1.0.0.vsix
2. Open VS Code.
3. Open the Command Palette (Cmd+Shift+P / Ctrl+Shift+P).
4. Type and select Extensions: Install from VSIX....
5. Choose the downloaded jsx-spark-1.0.0.vsix file and reload your editor.

🛠️ Why JSX Spark? (Comparison)

Standard VS Code toggling often fails to provide the granular control React developers need:

👨‍💻 Developer & Author

Patel Krish

• GitHub: @PATEL-KRISH-0
• LinkedIn: Krish Patel
• Email: patelkrish7433@gmail.com

Feel free to connect on LinkedIn or open an issue on GitHub if you have any questions, bug reports, or feature requests!

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.