VSCode Extension - Tai-Kimura/SwiftJsonUI GitHub Wiki

VSCode Extension for SwiftJsonUI

SwiftJsonUI provides an official Visual Studio Code extension that enhances the development experience when working with SwiftJsonUI JSON files.

Installation

You can install the SwiftJsonUI Helper extension from:

Features

1. JSON Schema Validation

The extension provides automatic JSON validation for .json files, ensuring your JSON structure is valid and follows SwiftJsonUI's schema.

2. IntelliSense and Autocomplete

Get intelligent code completion suggestions for:

  • Component types (View, Label, Button, etc.)
  • Attributes and properties
  • Valid attribute values
  • Nested structures

3. Template Insertion

Quickly insert pre-configured templates for common SwiftJsonUI components:

Component Command Keyboard Shortcut
View SwiftJsonUI: Insert View Template Cmd+Shift+V (Mac) / Ctrl+Shift+V (Win/Linux)
Label SwiftJsonUI: Insert Label Template Cmd+Shift+L (Mac) / Ctrl+Shift+L (Win/Linux)
Button SwiftJsonUI: Insert Button Template Cmd+Shift+B (Mac) / Ctrl+Shift+B (Win/Linux)
TextField SwiftJsonUI: Insert TextField Template -
ScrollView SwiftJsonUI: Insert ScrollView Template Cmd+Shift+S (Mac) / Ctrl+Shift+S (Win/Linux)
SafeAreaView SwiftJsonUI: Insert SafeAreaView Template Cmd+Shift+A (Mac) / Ctrl+Shift+A (Win/Linux)
SafeAreaView with Scroll SwiftJsonUI: Insert SafeAreaView with Scroll Template Cmd+Shift+X (Mac) / Ctrl+Shift+X (Win/Linux)
Collection SwiftJsonUI: Insert Collection Template Cmd+Shift+C (Mac) / Ctrl+Shift+C (Win/Linux)

4. Language Support

The extension works with standard .json files, providing:

  • Standard JSON syntax highlighting
  • Bracket matching and auto-closing
  • Code folding for better navigation in large JSON files

Usage

Creating a New SwiftJsonUI File

  1. Create a new file with the .json extension
  2. The extension will automatically activate and provide IntelliSense support
  3. Use keyboard shortcuts or the Command Palette to insert templates

Using Templates

  1. Open a .json file
  2. Use one of the keyboard shortcuts listed above, or
  3. Open Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
  4. Search for "SwiftJsonUI" to see all available template commands
  5. Select the desired template to insert at the cursor position

Example Workflow

// 1. Create a new file: myscreen.json
// 2. Press Cmd+Shift+A to insert SafeAreaView template
// 3. The extension will insert a basic structure:
{
  "type": "SafeAreaView",
  "backgroundColor": "#FFFFFF",
  "views": [
    // Your content here
  ]
}

Configuration

The extension works out of the box with sensible defaults. It automatically activates when:

  • Opening .json files
  • Working with JSON files that contain SwiftJsonUI structures

Requirements

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

Benefits

  1. Faster Development: Quick template insertion and autocomplete reduce typing
  2. Fewer Errors: JSON validation catches syntax errors before runtime
  3. Better Documentation: IntelliSense provides inline documentation for attributes
  4. Improved Productivity: Keyboard shortcuts streamline common tasks
  5. Consistent Code: Templates ensure consistent structure across your project

Troubleshooting

Extension Not Activating

  • Ensure your file has the .json extension
  • The extension works with all standard JSON files

IntelliSense Not Working

  • Check that the file is saved with the correct extension
  • Restart VSCode if the extension was just installed

Templates Not Inserting

  • Ensure the cursor is positioned where you want the template
  • Check that you're in a .json file (required for keyboard shortcuts)

Contributing

The extension is open source and welcomes contributions:

Version History

Current Version: 1.7.0

The extension is actively maintained and updated alongside SwiftJsonUI library releases to ensure compatibility with new features and components.

Related Resources