Skip to content

Add VS Code Extension to DocumentationΒ #99

@VishalRaut2106

Description

@VishalRaut2106

Add VS Code Extension to Documentation

πŸŽ‰ VS Code Extension for TOON Format

Hi TOON team! I've built a comprehensive VS Code extension to make working with TOON files easier and more productive.

✨ Key Features

🎨 Syntax Highlighting

  • Full color-coded syntax support for .toon files
  • Highlights array headers, field definitions, keys, values, and delimiters
  • Support for all TOON data types (strings, numbers, booleans, null)
Syntax Highlighting

βœ… Real-time Validation

  • Automatic validation as you type with smart debouncing
  • Error highlighting with detailed messages
  • Strict mode validation for array lengths and structure consistency
  • Non-intrusive - only shows errors when document looks complete

πŸ”„ Bidirectional Conversion

  • Convert TOON β†’ JSON with a single command
  • Convert JSON β†’ TOON with format options (nested or flattened)
  • Smart flattening for maximum token savings
  • Preserves data integrity during conversion

TOON to JSON Conversion:

TOON to JSON Conversion

JSON to TOON - Choose Format (Nested or Flattened):

JSON to TOON Format Selection

πŸ“ Developer Productivity

  • Code snippets for common TOON patterns (arrays, objects, key-value pairs)
  • Format on save support
  • Configurable indentation and delimiters (comma, tab, pipe)
  • Optional length markers ([#3] vs [3])

πŸ’° Token Optimization

  • Built-in flattening support to reduce LLM token usage
  • Visual feedback on token savings
  • Helps achieve 30-60% token reduction vs JSON

πŸ“¦ Installation

Search for "TOON" in VS Code Extensions, or:

code --install-extension vishalraut.vscode-toon

πŸ”— Links

🎯 Why This Matters

This extension makes TOON a first-class citizen in VS Code, providing the same level of support developers expect from JSON, YAML, or any other data format. It lowers the barrier to adoption and makes it easier for developers to leverage TOON's token efficiency in their LLM workflows.

πŸ“ Proposed Documentation Update

I'd love to have this added to the README under an "Editor Support" or "Tools & Integrations" section. Here's a suggested addition:

## Editor Support

### VS Code
- [TOON Language Support](https://marketplace.visualstudio.com/items?itemName=vishalraut.vscode-toon) - Full-featured extension with syntax highlighting, validation, JSON conversion, and token optimization tools

And its Live Now

Image

Thanks for creating such a useful format! πŸ™Œ


Author: Vishal Raut (@vishalraut2106)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions