JSON Formatter & Validator

The ultimate JSON toolkit for VS Code — format, validate, minify, sort keys, and copy formatted JSON with real-time error highlighting and auto-format on save.

Features

Smart Automation:

• Real-time validation (300ms debounce)
• Auto-format on save (configurable)
• Precise error locations (line/column)

Quick Start

1. Install

1. VS Code → Extensions (Ctrl+Shift+X) 2. Search: "JSON Formatter Validator" 3. Install → Reload

2. Basic Usage

Open any .json file → Ctrl+Shift+P → "JSON Formatter Validator: Format JSON"

3. Auto-Format (Default)

1. Edit JSON → Ctrl+S 2. Auto-formatted with 2 spaces

Commands (Ctrl+Shift+P)

JSON Formatter Validator: Format JSON ← Shift+Alt+F JSON Formatter Validator: Validate JSON ← Status bar click JSON Formatter Validator: Minify JSON ← One line JSON Formatter Validator: Sort Keys ← Alphabetical JSON Formatter Validator: Copy Formatted JSON ← Clipboard JSON Formatter Validator: Clear Errors ← Reset highlights JSON Formatter Validator: Toggle Comments Mode ← Config toggle

Settings (Ctrl+,)

Search "json-formatter-validator":

Example .vscode/settings.json:

{ "json-formatter-validator.formatOnSave": true, "json-formatter-validator.indentSize": 4, "editor.formatOnSave": true }

Testing Guide

Test Files (test/ folder)

test/valid.json → Format/Minify/Sort test/invalid.json → Error highlighting test/unsorted.json → Key sorting test/large.json → Performance (1MB+)

1. Format Test

{"name":"John","age":30} → Ctrl+S → { "name": "John", "age": 30 }

2. Validation Test

{"name":"John", age:30} → Red squiggle on `age` → Fix → 🟢

3. Status Bar

Valid JSON → Click to re-validate Invalid → Precise error location

Before & After

UGLY:

{"user":{"name":"John","age":30,"settings":{"theme":"dark"}}}

FORMATTED (Ctrl+S):

{ "user": { "name": "John", "age": 30, "settings": { "theme": "dark" } } }

MINIFIED:

{"user":{"name":"John","age":30,"settings":{"theme":"dark"}}}

SORTED KEYS:

{ "age": 30, "name": "John", "settings": { "theme": "dark" }, "user": {} }

Architecture

src/ ├── extension.ts # Main activation ├── commands/ # Format, minify, sort │ ├── formatting.ts │ └── clipboard.ts ├── validation/ # Real-time validation │ └── validator.ts ├── providers/ # Format provider (Shift+Alt+F) │ └── formatter.ts └── utils/ # Event listeners, helpers └── helper.ts

Modular Design:

• Zero dependencies (except jsonc-parser)
• TypeScript (fully typed)
• Performance optimized (debounced validation)

Development

`# Clone & Install git clone cd json-formatter-validator npm install

Compile (watch mode)

npm run watch

Test in Extension Host

F5 (Debug) or Ctrl+F5 (Run)

Package for Marketplace

npm run package `

Debug Mode (F5)

1. F5 → Opens Extension Development Host 2. Create .json file → Test all commands 3. Output panel → "JSON Formatter Validator" → See logs

Performance

Troubleshooting

Contributing

1. Fork → git clone <your-fork>
2. Branch → git checkout -b feature/new-command
3. Test → F5 in Extension Host
4. PR → Include test cases

Good first issues:

• JSON Schema validation
• JSONC support (comments)
• Custom sort orders
• Tree view panel

License

MIT License © 2025

Permission is hereby granted, free of charge, to any person obtaining a copy...

See LICENSE for full text.

Acknowledgments

• VS Code Extension API - Amazing DX
• jsonc-parser - Comment parsing
• TypeScript - Type safety
• You! - For using this extension

Show some love!

text

1. ⭐ Star on GitHub 2. 🐛 Report issues 3. ✨ Suggest features 4. 🚀 Publish to Marketplace

Happy JSON formatting! 🎉

{"message": "Your JSON is now perfect!", "status": "formatted"}