PHPX Tag Support

VS Code Extension

Turn VS Code into a first-class IDE for *.php templates. Experience mixed PHPX components, Prisma PHP helpers, and Prisma ORM with auto-imports, smart completions, and real-time diagnostics.

Key Features

Smart Component Handling

Auto-import with Ctrl + . (groups by namespace)
Tag / attribute / value completions with enum-aware validation
Hover cards show full FQCN + default props

Code Generation

Snippet phpxclass scaffolds a ready-to-go component
Automatic namespace detection & attribute helpers

IntelliSense Everywhere

Function & variable completion inside {...}
JS string methods, template literals, store helpers
Signature-help for pp.* & Prisma calls

Diagnostics & Fix-its

Invalid enum values underlined in red – before you save
Missing imports flagged with 1-click quick fix
XML/HTML tag-pair & heredoc validation

Installation

Terminal

# Marketplace ➜ Open Extensions ⇢ search "PHPX Tag Support" ⇢ Install

# VSIX (offline)

➜ code --install-extension phpx-tag-support-0.0.1.vsix

Five-Second Demo

Type <Button in a PHPX view.

A tooltip complains "Missing import".

Press Ctrl + . and choose Add import.

use App\Components\{Button};

Inside the tag, hit Space.

See prop suggestions with types & defaults.

Select variant.

Allowed values like "primary" | "ghost" appear. Ctrl + Space cycles them.

Intelligent Route Management

PHPX Tag Support understands your application's folder structure, providing auto-completion and validation for href tags.

Route Auto-Completion

Shows all available routes from your app structure, filtering as you type with fuzzy matching.

Route Navigation

Ctrl + Click on href values jumps directly to the route file.

nav-menu.php

<!-- Type href=" and get instant completions -->
<a href="dashboard">Go to Dashboard</a>       <!-- ✅ Valid route -->
<a href="profile/settings">Settings</a>       <!-- ✅ Valid nested route -->
<a href="invalid-route">Broken</a>           <!-- ❌ Highlighted as invalid -->

<!-- Ctrl+Click any href value to jump to the route file -->
<nav class="menu">
  <a href="">Home</a>                        <!-- → src/app/index.php -->
  <a href="dashboard">Dashboard</a>           <!-- → src/app/dashboard/index.php -->
</nav>

Pro Tip: Auto-Conversion

The extension automatically converts file paths to clean route URLs:

src/app/index.php → ""
src/app/dashboard/index.php → "dashboard"

Usage Cheat-Sheet

Task	Action
Add missing import	`Ctrl + .` on tag → Select Add import
Peek source	`F12` or `Ctrl + Click` tag
Generate component	Type `phpxclass` → `Tab`
Value completion	Inside `"…"` press `Ctrl + Space`
Refresh routes	`Ctrl + Shift + P` → "Refresh Routes"

Enumerated Props & Wildcards

PHPX Tag Support reads @property annotations to validate strings.

Annotation	Behavior
@property string $routes = home\|about	Strict List Only home or about are accepted. Use for strict variants or sizes.
@property string $routes = home\|*	Enum + Wildcard Shows "home" first, but any string is valid. Use for common presets with flexibility.

Wildcard Example

<!-- Wildcard version in action --> 
<NavItems routes="about" />       <!-- ✅ OK -->
<NavItems routes="blog/42" />     <!-- ✅ OK (allowed by *) -->

<!-- Change annotation to strict list --> 
<NavItems routes="blog/42" />     <!-- ❌ Error: not in enum -->