A VS Code extension that automatically adds empty lines between sibling JSX components to improve code readability and visual separation.
✨ Features
- 🎯 Smart JSX Detection: Uses TypeScript AST parsing to accurately identify JSX elements
- 🔧 Preserves Formatting: Maintains existing indentation and code structure
- ⚡ Fast Processing: Efficient algorithm that only processes JSX containers
- 🎨 Multiple Language Support: Works with JavaScript, JSX, TypeScript, and TSX files
- 🚫 Non-Destructive: Skips files that already have proper formatting
📦 Installation
Install directly from the VS Code Extension Marketplace:
- Open VS Code
- Go to Extensions (
Ctrl/Cmd + Shift + X
)
- Search for "JSX Sibling Formatter"
- Click Install
Alternatively, install from command line:
code --install-extension jsx-sibling-formatter
🚀 Usage
🎯 Quick Start
- Open any file containing JSX code (
.js
, .jsx
, .ts
, .tsx
)
- Use any of the methods below to format your JSX siblings
Method 1: Command Palette (Recommended)
- Press
Ctrl/Cmd + Shift + P
to open Command Palette
- Type "Format JSX" and select "Format JSX Siblings"
- Press Enter
Method 2: Keyboard Shortcut
- Press
Shift + Alt + F
while in any file
Method 3: Context Menu
- Right-click in your code editor
- Select "Format JSX Siblings" from the menu
✨ Pro Tips
- 💡 The formatter works on any file but only processes JSX code
- 🎯 Best results with files containing JSX/TSX components
- 🔄 Run it multiple times if needed - it won't duplicate existing empty lines
- 📁 Works great with React, Next.js, and any JSX-based framework
📋 Example
Transform cluttered JSX into clean, readable code:
Before:
<div>
<h1>Welcome</h1>
<p>This is some descriptive text about our application.</p>
<button onClick={handleClick}>Get Started</button>
<footer>
<span>© 2024 Company</span>
<a href="/terms">Terms</a>
</footer>
</div>
After:
<div>
<h1>Welcome</h1>
<p>This is some descriptive text about our application.</p>
<button onClick={handleClick}>Get Started</button>
<footer>
<span>© 2024 Company</span>
<a href="/terms">Terms</a>
</footer>
</div>
📄 Supported File Types
.js
- JavaScript
.jsx
- JavaScript with JSX
.ts
- TypeScript
.tsx
- TypeScript with JSX
⚙️ How It Works
The extension automatically:
- ✅ Adds empty lines between sibling JSX elements
- ✅ Preserves existing empty lines and formatting
- ✅ Maintains proper indentation
- ✅ Handles nested JSX structures intelligently
- ✅ Supports JSX fragments and expressions
🐛 Issues & Feedback
Found a bug or have a feature request? Please open an issue on GitHub.
📝 License
MIT License
🚀 Release Notes
1.0.0
- ✨ Initial release with core JSX sibling formatting functionality
- 🎯 Smart AST-based JSX detection and processing
- 🛠️ Support for JavaScript, JSX, TypeScript, and TSX files
- 🎮 Multiple access methods: Command palette, keyboard shortcut, and context menu
- 🔧 Fixed command visibility issue - now accessible from any file type
- 🚀 Non-destructive formatting that preserves existing structure
Enjoy cleaner, more readable JSX code! 🎉