A powerful and elegant JSON formatter and comparison tool for Visual Studio Code with intuitive sidebar integration.
✨ Features
- 📋 Sidebar Integration: Easy access through a dedicated activity bar icon
- 🎯 One-Click Formatting: Format and beautify JSON with a single click
- 🎨 Monaco Editor: Rich editing experience with syntax highlighting and dark theme
- 🔍 Error Handling: Clear, helpful error messages for invalid JSON syntax
- ⚡ Fast & Lightweight: Quick formatting without slowing down your workflow
🔄 JSON Comparison
- 📊 Side-by-Side Comparison: Compare two JSON files with inline highlighting
- 🟢 Visual Differences: Green highlighting for additions, red for removals
- 📈 Statistics: Real-time count of changes, additions, and removals
- 🎯 Manual Control: Compare only when you click the button - no auto-comparison
- 🔍 Enhanced Scrolling: Smooth scrolling with line indicators and visual feedback
🎪 User Experience
- 🎨 Clean Interface: Minimalist design that stays out of your way
- 🌙 Dark Theme: Matches VS Code's native dark theme perfectly
- 📱 Responsive Design: Works well at different window sizes
- ⌨️ Professional UX: Follows VS Code extension best practices
🚀 Usage
Quick Start
- Find the Icon: Look for the JSON Tools icon (📐) in the left activity bar
- Open Panel: Click the icon to reveal the JSON Tools panel
- Choose Your Tool:
- "Open JSON Formatter" - Format and beautify JSON
- "Compare JSON" - Compare two JSON files side-by-side
- Click "Open JSON Formatter" from the sidebar
- Paste or type your JSON code in the editor
- Click "Format" to beautify your JSON
- Use "Clear" to reset the editor
JSON Comparison
- Click "Compare JSON" from the sidebar
- Paste your first JSON in the "Source JSON" field
- Paste your second JSON in the "Target JSON" field
- Click "Compare" to see differences highlighted inline
- View statistics showing additions, removals, and modifications
📸 Screenshots
The extension adds a convenient JSON icon to your activity bar with two powerful tools:
- 📐 Open JSON Formatter - Format and beautify JSON
- 🔄 Compare JSON - Side-by-side JSON comparison
Clean, dark-themed interface with Monaco editor for the best JSON editing experience.
Professional comparison interface with:
- Side-by-side input fields
- Inline highlighting (green for additions, red for removals)
- Real-time statistics
- Enhanced scrolling with line indicators
📋 Requirements
- Visual Studio Code: Version 1.102.0 or higher
- No additional dependencies: Works out of the box
🔧 Installation
From VS Code Marketplace
- Open VS Code
- Go to Extensions view (
Ctrl+Shift+X)
- Search for "Simple JSON Formatter"
- Click "Install"
From Command Line
ext install RithikSrivastava.easy-json-formatter
Manual Installation
- Download the
.vsix file from the releases page
- Open VS Code
- Run
Extensions: Install from VSIX... from the Command Palette
- Select the downloaded file
🚀 All-in-One Solution
- Formatting AND Comparison in one extension
- No Command Palette Required: Unlike other tools, no need to remember shortcuts
- Always Accessible: Permanent icon in the sidebar means tools are always one click away
🎨 Professional Experience
- VS Code Native Feel: Matches VS Code's design patterns perfectly
- Intuitive Interface: Clear, logical workflow for both formatting and comparison
- Enhanced UX: Smooth animations, visual feedback, and professional polish
- Manual Control: Compare only when you want to - no resource-heavy auto-comparison
- Error Handling: Graceful handling of invalid JSON with clear error messages
- Lightweight: Fast performance that doesn't slow down your workflow
🔍 Comparison Features in Detail
Visual Highlighting
- 🟢 Green Background: Added lines or content
- 🔴 Red Background: Removed lines or content
- 📊 Real-time Stats: Live count of changes as you compare
- Smooth Scrolling: Professional scroll behavior with momentum
- Line Indicators: Shows current line position while scrolling
- Synchronized Overlays: Highlighting stays perfectly aligned with content
- Custom Scrollbars: Beautiful, styled scrollbars with hover effects
Smart Comparison
- JSON Auto-formatting: Automatically formats JSON before comparison
- Text Fallback: Also works with plain text, not just JSON
- Manual Trigger: Only compares when you click "Compare" - no surprises
🐛 Known Issues
Currently no known issues. If you encounter any problems, please report them here.
📝 Release Notes
- ✅ Added JSON comparison functionality
- ✅ Side-by-side comparison with inline highlighting
- ✅ Enhanced scrolling with visual indicators
- ✅ Real-time statistics for differences
- ✅ Manual comparison control (no auto-compare)
- ✅ Improved sidebar with two distinct tools
1.0.0 - Initial Release
- ✅ Sidebar integration with activity bar icon
- ✅ Tree view panel with format button
- ✅ Monaco editor with JSON syntax highlighting
- ✅ Dark theme interface matching VS Code
- ✅ Format and Clear functionality
- ✅ Error handling for invalid JSON
| Tool |
Description |
Key Features |
| JSON Formatter |
Format and beautify JSON |
• Monaco editor
• Syntax highlighting
• Error handling
• One-click formatting |
| JSON Comparison |
Compare two JSON files |
• Side-by-side view
• Inline highlighting
• Statistics display
• Enhanced scrolling |
🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature)
- Commit your changes (
git commit -m 'Add some AmazingFeature')
- Push to the branch (
git push origin feature/AmazingFeature)
- Open a Pull Request
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
🙏 Acknowledgments
- Built with the VS Code Extension API
- Uses Monaco Editor for rich text editing experience
- Inspired by the need for quick, accessible JSON formatting and comparison
- Special thanks to the VS Code community for feedback and suggestions
📞 Support
🎯 Roadmap
- [ ] Keyboard shortcuts for quick access
- [ ] Export comparison results
- [ ] JSON schema validation
- [ ] Minify JSON option
- [ ] Custom color themes for comparison
Enjoy formatting and comparing your JSON with ease! 🎉
If you find this extension helpful, please consider:
- ⭐ Giving it a star on GitHub
- 📝 Leaving a review on the VS Code Marketplace
- 🚀 Sharing it with your developer friends
Making JSON work easier, one format and comparison at a time.
