SwiftJsonUI Helper

A Visual Studio Code extension that provides comprehensive support for SwiftJsonUI - a JSON-driven UI framework for iOS and Android development.

Features

🎯 Intelligent Autocomplete

• Component Types: Get suggestions for all SwiftJsonUI components (View, Label, Button, TextField, Image, ScrollView, Collection, and more)
• Property Suggestions: Context-aware property suggestions based on the selected component type
• Value Completions: Smart value suggestions for properties like alignment, content modes, text alignment, etc.

⚡ Template Insertion

Quick template insertion with keyboard shortcuts:

• View Template: Cmd+Shift+V (Mac) / Ctrl+Shift+V (Windows/Linux)
• Label Template: Cmd+Shift+L (Mac) / Ctrl+Shift+L (Windows/Linux)
• Button Template: Cmd+Shift+B (Mac) / Ctrl+Shift+B (Windows/Linux)

Additional templates available via Command Palette:

• TextField Template
• ScrollView Template
• Image Template
• Switch Template
• Collection Template

📖 Hover Documentation

Hover over any property or component type to see detailed documentation including:

• Property descriptions
• Expected value types
• Usage examples
• Default values

🔍 JSON Schema Validation

• Automatic validation for .swiftjsonui.json files
• Error highlighting for invalid properties
• Type checking for property values

Supported Components

The extension provides full support for all SwiftJsonUI components:

Container Components

• View, SafeAreaView
• ScrollView, Table, Collection

UI Components

• Label, Button, TextField, TextView
• Image, NetworkImage, CircleImage
• Switch, Slider, Progress, Indicator
• Radio, Check, Segment, SelectBox
• IconLabel, GradientView, Blur, CircleView
• Web

Installation

From VSCode Marketplace

1. Open VSCode
2. Go to Extensions (Cmd+Shift+X / Ctrl+Shift+X)
3. Search for "SwiftJsonUI Helper"
4. Click Install

From VSIX File

1. Download the .vsix file from the releases
2. Open VSCode
3. Go to Extensions
4. Click on the "..." menu and select "Install from VSIX..."
5. Select the downloaded file

Usage

1. Create a JSON file with your SwiftJsonUI layout
2. Start typing "type": " to see component suggestions
3. Select a component and press Tab to accept
4. Type " inside the component to see available properties
5. Use shortcuts to insert complete templates

Example

{
  "type": "View",
  "id": "main_container",
  "width": "matchParent",
  "height": "matchParent",
  "paddings": 16,
  "background": "#FFFFFF",
  "child": [
    {
      "type": "Label",
      "text": "Welcome to SwiftJsonUI",
      "fontSize": 24,
      "fontColor": "#000000",
      "textAlign": "Center"
    },
    {
      "type": "Button",
      "text": "Get Started",
      "onClick": "@{handleGetStarted}",
      "background": "#007AFF",
      "fontColor": "#FFFFFF",
      "cornerRadius": 8
    }
  ]
}

Data Binding Support

The extension recognizes SwiftJsonUI's data binding syntax:

• Use @{variableName} for data binding
• Autocomplete helps with proper binding syntax
• Hover shows binding documentation

Requirements

• Visual Studio Code 1.103.0 or higher
• SwiftJsonUI framework in your iOS/Android project

Known Issues

• Report issues at GitHub Issues

Release Notes

1.0.0

• Initial release
• Full component and property support
• Template insertion with shortcuts
• Intelligent autocomplete
• Hover documentation
• JSON schema validation

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This extension is released under the MIT License.

More Information

• SwiftJsonUI Documentation
• SwiftJsonUI GitHub Repository

Enjoy coding with SwiftJsonUI! 🚀