📋 About
Toon Language Support is a comprehensive VS Code extension that provides syntax highlighting, validation, auto-completion, and formatting for the TOON format — a token-oriented data format optimized for LLM processing.
This extension transforms your VS Code into a powerful editor for .toon files, making it easy to work with tabular arrays, inline arrays, mixed arrays, and all TOON format features.
✨ Features
🎯 Core Capabilities
🚀 Installation
From VS Code Marketplace
- Open VS Code
- Go to Extensions (
Ctrl+Shift+X / Cmd+Shift+X)
- Search for "Toon Language Support"
- Click Install
From Source
# Clone the repository
git clone https://github.com/eveiljuice/vscode-toon.git
cd vscode-toon
# Install dependencies
npm install
# Compile TypeScript
npm run compile
# Press F5 to run in Extension Development Host
📖 Usage
Basic Workflow
- Create or open a
.toon file
- Start typing — syntax highlighting activates automatically
- Use
Ctrl+Space for auto-completion
- Use
Shift+Alt+F to format your document
- Hover over arrays to see detailed information
Configuration
Add to your VS Code settings.json:
{
"toon.validation.enabled": true
}
💻 Examples
Tabular Array
users[3]{id,name,email,plan,active}:
1,Alice Mitchell,alice@mitchell.com,Premium,true
2,Michael Chen,michael.chen@example.com,Basic,true
3,Jennifer Kumar,jennifer.kumar@example.com,Enterprise,false
Inline Array
tags[2]: analytics,notifications
features[3]: search,filter,sort
Mixed Array
items[3]:
- 1
- a: 1
- x
Root Array
[2]: x,y
Custom Delimiters
Tab delimiter:
items[2\t]{sku\tqty\tprice}:
A1\t2\t9.99
B2\t1\t14.5
Pipe delimiter:
data[2|]{name|value}:
Alice|admin
Bob|user
Validation Example
The extension automatically validates array declarations:
users[3]{id,name}: // ⚠️ Warning: declared 3 but has 2 items
1,Alice
2,Bob
🏗️ Project Structure
vscode-toon/
├── src/
│ └── extension.ts # Main extension logic
├── syntaxes/
│ └── toon.tmLanguage.json # TextMate grammar for syntax highlighting
├── icons/
│ ├── toon-icon.svg # Custom icon for .toon files
│ └── toon-icon-theme.json # Icon theme configuration
├── language-configuration.json # Language configuration (comments, brackets, etc.)
├── package.json # Extension manifest
├── tsconfig.json # TypeScript configuration
└── README.md # This file
🤝 Contributing
We welcome contributions! Here's how you can help:
Getting Started
Fork the repository
git clone https://github.com/eveiljuice/vscode-toon.git
cd vscode-toon
Install dependencies
npm install
Make your changes
- Edit files in
src/ for extension logic
- Edit
syntaxes/toon.tmLanguage.json for syntax highlighting
- Edit
language-configuration.json for language features
Test your changes
npm run compile
# Press F5 in VS Code to launch Extension Development Host
Submit a Pull Request
- Create a new branch:
git checkout -b feature/your-feature-name
- Commit your changes:
git commit -m "Add: your feature description"
- Push to your fork:
git push origin feature/your-feature-name
- Open a PR on GitHub
Development Guidelines
- Code Style: Follow TypeScript best practices
- Testing: Test your changes in Extension Development Host before submitting
- Documentation: Update README if adding new features
- Commits: Use clear, descriptive commit messages
Areas for Contribution
- 🐛 Bug fixes: Report and fix issues
- ✨ New features: Add support for new TOON format features
- 📚 Documentation: Improve examples and documentation
- 🎨 Syntax highlighting: Enhance color schemes and highlighting
- ⚡ Performance: Optimize validation and formatting
Reporting Issues
Found a bug? Have a feature request? Open an issue!
Please include:
- VS Code version
- Extension version
- Steps to reproduce
- Expected vs actual behavior
- Sample
.toon file (if applicable)
📝 License
This project is licensed under the MIT License - see the LICENSE file for details.
🔗 Links
🙏 Acknowledgments
- Built for the TOON format community
- Inspired by modern token-oriented data formats
