Skip to content
| Marketplace
Sign in
Visual Studio Code>Formatters>Super JSON HelperNew to Visual Studio Code? Get it now.
Super JSON Helper

Super JSON Helper

JAC0164

|
12 installs
| (0) | Free
JSON manipulation tools: sort, remove duplicates, convert to TypeScript
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

JSON Helper Extension for VS Code

A VS Code extension that provides useful JSON manipulation tools.

Features

  • Sort JSON Keys: Alphabetically sort all keys in your JSON file (including nested objects)
  • Remove Duplicate Keys: Remove duplicate keys from JSON objects
  • Convert to TypeScript Interface: Generate a TypeScript interface from your JSON structure
  • Convert to TypeScript Class: Generate a TypeScript class from your JSON structure

Usage

  1. Open a JSON file in VS Code
  2. Use one of the following methods to access the commands:
    • Command Palette: Press Ctrl+Shift+P (or Cmd+Shift+P on Mac) and search for "JSON Helper"
    • Context Menu: Right-click in the editor and select one of the JSON Helper options

Available Commands

  • JSON Helper: Sort Keys - Sorts all keys in the JSON file alphabetically
  • JSON Helper: Remove Duplicate Keys - Removes duplicate keys (keeps the first occurrence)
  • JSON Helper: Convert to TypeScript Interface - Creates a new TypeScript file with the interface
  • JSON Helper: Convert to TypeScript Class - Creates a new TypeScript file with the class

Examples

Sort Keys

Before:

{
  "name": "John",
  "age": 30,
  "address": {
    "zip": "12345",
    "city": "New York"
  }
}

After:

{
  "address": {
    "city": "New York",
    "zip": "12345"
  },
  "age": 30,
  "name": "John"
}

Convert to TypeScript Interface

Input JSON:

{
  "id": 1,
  "name": "Product",
  "price": 29.99,
  "tags": ["electronics", "gadget"]
}

Output TypeScript:

interface Product {
  id: number,
  name: string,
  price: number,
  tags: string[]
}

Requirements

VS Code version 1.102.0 or higher

Installation

From Marketplace

  1. Open VS Code
  2. Press Ctrl+P to open the Quick Open dialog
  3. Type ext install json-helper to find the extension
  4. Click Install

Development Setup

  1. Clone this repository
  2. Run pnpm install to install dependencies
  3. Run pnpm watch to compile in watch mode
  4. Press F5 to launch a new VS Code window with the extension loaded

Building and Publishing

# Package the extension
pnpm pack

# This creates a .vsix file that can be installed locally

# Publish to marketplace (requires publisher account)
pnpm publish

Note: Before publishing, make sure to:

  1. Update the publisher field in package.json
  2. Update the repository URL in package.json
  3. Create a Personal Access Token at https://dev.azure.com/
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft