IPCore Language VS Code Extension

Provides syntax highlighting, real-time error detection, and file icon support for IPCore (.ping) files.

Features

🎨 Enhanced Syntax Highlighting

• Keywords: component, page, ui app, props, state, render, build, etc.
• Operators: Arithmetic (+, -, *, /), comparison (==, !=, <=), logical (&&, ||), spread (...), nullish (??)
• Functions: Method names and function calls highlighted
• Properties: CSS properties (backgroundColor, color, padding, etc.) and object properties
• CSS Values: Color codes (#3498db), named colors (white, transparent), units (px, em, rem, etc.)
• Widgets: IPCore widgets (Container, Text, Button, Scaffold, etc.)
• Comments: Single-line (//) and multi-line (/* */)
• Strings: Single quotes, double quotes, and template strings with interpolation

⚠️ Real-Time Error Detection

• Automatic linting on file open, save, and edit
• Inline error markers showing syntax errors with red squiggles
• Error messages displayed in the Problems panel
• Line-by-line validation using IPCore parser

🎯 File Icon Support

• Custom icon for .ping files in the file explorer

Installation

Option 1: Install from Folder (Development)

1. Open VS Code / Cursor
2. Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
3. Type "Extensions: Install from VSIX..." or "Developer: Install Extension from Location..."
4. Select the tools/vscode-ipcore 2 folder

Option 2: Package as VSIX

cd "tools/vscode-ipcore 2"
npm install -g vsce
vsce package

Then install the generated .vsix file.

Configuration

Add to your VS Code settings (.vscode/settings.json):

{
  "pingdart.lint.enable": true,
  "pingdart.lint.onSave": true
}

Usage

1. Open any .ping file
2. Syntax highlighting will automatically apply
3. Errors will appear as red squiggles under problematic code
4. Check the Problems panel (Cmd+Shift+M / Ctrl+Shift+M) for detailed error messages

Error Detection

The extension uses the IPCore parser to validate your code:

• Syntax errors: Missing braces, invalid keywords, etc.
• Type errors: Unknown file types, missing required properties
• Parse errors: Malformed IPCore syntax

Errors are shown:

• As red squiggles under the problematic code
• In the Problems panel with line numbers
• On hover with error messages

Color Scheme

The extension uses VS Code's semantic token colors:

• Keywords: Blue/Purple (control flow, declarations)
• Operators: Yellow/Orange (arithmetic, comparison, logical)
• Strings: Green (quoted text, template strings)
• Numbers: Orange (numeric literals)
• Functions: Yellow (function names, method calls)
• Properties: Cyan (CSS properties, object properties)
• Widgets: Purple (IPCore widget names)
• Comments: Gray (comments)

Troubleshooting

Errors not showing?

1. Check that pingdart.lint.enable is true in settings
2. Ensure IPCore is installed: pingdart --version
3. Check the Output panel for extension logs

Syntax highlighting not working?

1. Reload VS Code: Cmd+Shift+P → "Developer: Reload Window"
2. Check file association: Ensure .ping files are recognized
3. Verify extension is active in Extensions panel

Development

To modify the extension:

1. Edit syntaxes/ipcore.tmLanguage.json for syntax highlighting
2. Edit extension.js for error detection logic
3. Reload VS Code to test changes

License

Part of the IPCore project. #� �p�i�n�g� � �