JSON Formatter & Validator

[](https://github.com/beni-f/json-formatter-validator/blob/HEAD/ https:/marketplace.visualstudio.com/items?itemName=beni-f.json-formatter-validator-extension )

🔗 Marketplace Page:
https://marketplace.visualstudio.com/items?itemName=beni-f.json-formatter-validator-extension

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} 

• After 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 <repo>
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"}