⚡ PHPX Tag Support (VS Code Extension)

PHPX Tag Support turns VS Code into a first-class IDE for *.php templates that mix PHPX components, PPHP helpers and Prisma ORM calls. Below you'll find everything you need to install, configure and get the most out of it – written in the same TailwindCSS + DaisyUI style as the rest of your docs.

🚀 Key Features at a Glance

🏷️ 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 pphp.* & 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

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

# VSIX (offline)  
➜  code --install-extension phpx-tag-support-0.0.1.vsix

🚀 Five-Second Demo

  1. Type <Button in a PHPX view → tooltip complains "Missing import".
  2. Press Ctrl+. → choose Add import.
  3. The extension inserts use App\Components\{Button};
  4. Inside the tag, hit Space → see prop suggestions with types & defaults.
  5. Select variant; allowed values (`primary\|ghost`) show up inside quotes – Ctrl+Space cycles them.

🗺️ Intelligent Route Management

PHPX Tag Support now includes smart routing features that understand your application's route structure, providing auto-completion, validation, and navigation for anchor tags. Perfect for building navigation menus and internal links with confidence.

🎯 Route Auto-Completion

  • Smart href completions in anchor tags
  • Shows all available routes from your app structure
  • Filters as you type with fuzzy matching

🔍 Route Navigation

  • Ctrl+Click on href values jumps to route file
  • Hover shows route file path and status
  • Peek definition with F12

⚡ Auto-Discovery

  • Automatically scans your app/ directory
  • Updates routes when files change
  • Manual refresh with Ctrl+Shift+P

🛡️ Route Validation

  • Highlights invalid routes with red underlines
  • Real-time validation as you type
  • Suggests closest matching routes

🚀 Route Features in Action

<!-- 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: The extension automatically converts file paths to clean route URLs:

  • src/app/index.php → "" (home route)
  • src/app/dashboard/index.php → "dashboard"
  • src/app/blog/[slug]/index.php → "blog/[slug]"

💡 Usage Cheat-Sheet

What How
Add missing import Ctrl+. on tag → Select Add import
Peek component source F12 or Ctrl+Click tag name
Generate new component Type phpxclass → Tab
Trigger value completion Inside "…" press Ctrl+Space
Navigate to route file Ctrl+Click on href value
Refresh routes Ctrl+Shift+P → "Refresh Routes"

Mustache Magic & Event Handlers

<div class="card p-4">
    {{ user.name.padStart(10) }}
    {{ `Hi ${user.name}!` }}

    <Button onClick="handleSave" class="mt-2">
        Save
    </Button>
</div>

• Variables (user.name) and JS methods (.padStart()) auto-complete.
• Ctrl+Click on handleSave jumps to the PHP function.
• Assignments inside {{ }} raise a warning to keep templates side-effect-free.

🔧 Recommended VS Code Settings

{
  "editor.gotoLocation.single": "peek",
  "editor.gotoLocation.multiple": "peek",
  "phpx-tag-support.sourceRoot": "src"
}

🎯 Enumerated Props & the * Wildcard

PHPX Tag Support reads @property annotations to understand which strings are valid for a prop. You have two flavours:

Annotation Behaviour Use When… 
/** @property string $routes = home|about|contact */
 Strict list – only home, about, or contact are accepted. You want to lock the prop to a finite set of values (e.g. variants, sizes). 
/** @property string $routes = home|about|contact|* */
 Enum + wildcard – shows the three tokens first, but any other non-empty string is also valid. You have common presets but still need flexibility (e.g. arbitrary slugs, colour names).

🛠️ Live Behaviour

<!-- 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 -->

**Rule of thumb:** add * when you need freedom, remove it when you want the linter to be uncompromising. IntelliSense still prioritises the listed tokens either way. 🌟

🔥 Pro Tips

  • Annotate props with enums (dark|light|*) to unlock value validation.
  • Use settings/files-list.json to keep routes up-to-date automatically.
  • Press Ctrl+Click on any href to jump straight to the route file.
  • The extension works best with proper class-log.json and TypeScript definitions.

That's it! Your editor now knows your components, your props, and your routes – so you can focus on building, not boilerplate. Happy coding! ✨