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
- Open a JSON file in VS Code
- 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
- Open VS Code
- Press
Ctrl+P
to open the Quick Open dialog
- Type
ext install json-helper
to find the extension
- Click Install
Development Setup
- Clone this repository
- Run
pnpm install
to install dependencies
- Run
pnpm watch
to compile in watch mode
- 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:
- Update the
publisher
field in package.json
- Update the
repository
URL in package.json
- Create a Personal Access Token at https://dev.azure.com/