A VS Code extension that provides a side-by-side view for comparing and visualizing differences between JSON files or text. Leverages VS Code's built-in diffing and JSON formatting capabilities
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
A Visual Studio Code extension that provides a side-by-side view for comparing and visualizing differences between JSON files or text, leveraging VS Code's built-in diffing and JSON formatting capabilities.
Screenshots
JSON Diff Selection Interface
JSON Diff Result Comparison
Features
Side-by-Side JSON Editors: Two separate editors where you can paste or load JSON content
Automatic JSON Formatting: JSON is automatically formatted when pasted or loaded
Visual Diff Comparison: See differences between JSON structures using VS Code's built-in diff viewer
Quick Access: Icon in the activity bar for easy access to the JSON diff tool
File Loading: Easily load JSON files directly from your filesystem
Error Handling: Helpful error messages for invalid JSON
How to Use
Opening the JSON Diff Viewer
There are three ways to access the JSON Diff tool:
Click on the JSON Diff icon in the activity bar (left sidebar)
Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P) and search for "JSON Diff: Open Side-by-Side Diff View"
Right-click in any editor and select "JSON Diff: Open Side-by-Side Diff View" from the context menu
Comparing JSON
Open the JSON Diff viewer
Paste JSON or load JSON files into the left and right editors
Click the "Compare JSON" button to view the differences
The JSON is automatically formatted for better readability
Loading Files
Click the "Load File" button in either the left or right editor
Select a JSON file from your file system
The file content will be loaded and automatically formatted
Requirements
Visual Studio Code 1.98.0 or higher
Extension Settings
This extension doesn't have any specific settings.
Support the Project
If you find this extension useful, consider supporting its development:
Known Issues
None at this time.
Release Notes
0.0.2
Added screenshots to documentation
Improved error handling and user experience
0.0.1
Initial release of JSON Diff Side-by-Side
Basic JSON diffing functionality
Side-by-side editor view
JSON formatting
File loading capabilities
Activity bar integration
Development
Building the Extension
Clone the repository
Run npm install to install dependencies
Run npm run watch to start the compiler in watch mode
Press F5 to launch the extension in debug mode
Packaging the Extension
Run vsce package to create a VSIX file that can be installed manually.
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.