rspade_system/docs/jqhtml_vscode_extension_setup.md

JQHTML VSCode Extension Setup

Overview

The JQHTML VSCode extension is now integrated into the RSpade development environment alongside the RSpade extension. Both extensions are automatically installed and updated through the IDE setup scripts.

Installation

Automatic Installation

1. The JQHTML extension is installed as an NPM dependency: @jqhtml/vscode-extension
2. When you run VS Code tasks or open the project, the setup script checks for both extensions
3. If either extension is missing or outdated, they are automatically installed (if auto-install is enabled)

Manual Installation

If auto-install is disabled or fails:

1. Press Ctrl+Shift+X in VS Code to open Extensions
2. Click the ... menu → "Install from VSIX..."
3. For RSpade: Select app/RSpade/Extension/rspade-framework.vsix
4. For JQHTML: Select node_modules/@jqhtml/vscode-extension/jqhtml-vscode-extension-*.vsix

Configuration

Settings

The following settings in .vscode/settings.json control extension behavior:

• rspade.autoCheckExtension - Whether to check for extension updates (default: true)
• rspade.autoInstallExtension - Whether to auto-install/update extensions (default: true)

Extension Locations

• RSpade Extension: /app/RSpade/Extension/rspade-framework.vsix
• JQHTML Extension: /node_modules/@jqhtml/vscode-extension/jqhtml-vscode-extension-*.vsix

How It Works

Check Process

1. The setup script (/.vscode/ide_setup/check_setup.sh) runs on VS Code startup
2. It checks for both RSpade and JQHTML extensions
3. Compares installed versions with expected versions from:
   • RSpade: app/RSpade/Extension/package.json
   • JQHTML: node_modules/@jqhtml/vscode-extension/package.json

Update Process

1. If extensions need updating and auto-install is enabled:
   • Installs RSpade extension from local VSIX
   • Installs JQHTML extension from npm package VSIX
2. Creates marker file .extensions-updated to trigger VS Code reload
3. VS Code automatically reloads to activate the updated extensions

Features Provided by JQHTML Extension

• Syntax Highlighting: Full syntax highlighting for .jqhtml template files
• Code Snippets: Quick snippets for common JQHTML patterns
• Language Support: Proper language configuration for JQHTML templates
• IntelliSense: Auto-completion for JQHTML tags and attributes

Updating the JQHTML Extension

To update to a newer version:

npm update @jqhtml/vscode-extension

The next time VS Code starts, it will detect the new version and auto-install it.

Troubleshooting

Extension Not Installing

1. Check that the VSIX file exists:

   ls -la node_modules/@jqhtml/vscode-extension/*.vsix
   

2. Ensure VS Code CLI is available:

   code --version
   

3. Check the setup script output for specific errors

Version Mismatch

If the extension shows as outdated:

1. Run npm update @jqhtml/vscode-extension
2. Restart VS Code to trigger the update check
3. Or manually install from the VSIX file

Disable Auto-Install

To disable automatic extension installation, add to .vscode/settings.json:

{
  "rspade.autoInstallExtension": false
}

Integration with RSpade Extension

Both extensions work together:

• RSpade Extension: Provides RSX framework support, PHP formatting, namespace management
• JQHTML Extension: Provides JQHTML template support, syntax highlighting, snippets

The setup script handles both extensions in a single update cycle, minimizing VS Code reloads.