WPStartX View - VS Code Extension

A VS Code extension that provides syntax highlighting, IntelliSense, and language support for .view.php template files. This extension combines the best of HTML, PHP, and custom template directives in a unified development experience.

🚀 Features

Multi-Language Support

HTML: Full HTML5 syntax highlighting and IntelliSense
PHP: Complete PHP language support with <?php ?> tags
Custom Template Syntax: Powerful template directives for modern PHP templating

Template Directives

Conditionals: {#if condition}...{:else}...{/if}
Loops: {#each $items as $item}...{/each}
For Loops: {#for $i = 0; $i < 10; $i++}...{/for}
While Loops: {#while condition}...{/while}
Switch Statements: {#switch $var}{:case 'value'}...{:default}...{/switch}

PHP Integration

PHP Expressions: {$variable}, {function_call()}, {$object->property}
PHP Code Blocks: {: $var = get_data(); :}
Standard PHP Tags: <?php ?>, <?= ?>
Comment Safety: PHP comments (//, /* */) don't break closing syntax

IDE Features

Syntax Highlighting: Beautiful color coding for all syntax elements
Auto-completion: Intelligent suggestions for HTML tags, PHP variables, and template directives
Bracket Matching: Smart bracket pairing for all template syntax
Emmet Support: HTML abbreviations work seamlessly
Hover Documentation: Helpful tooltips for template directives

📦 Installation

Open VS Code
Go to Extensions (Ctrl+Shift+X or Cmd+Shift+X)
Search for "WPStartX View"
Click "Install"

🔧 Usage

File Association

This extension automatically activates for files with the .view.php extension.

Basic Syntax Examples

HTML with PHP Expressions

<!DOCTYPE html>
<html>
<head>
    <title>{$pageTitle}</title>
</head>
<body>
    <h1>Welcome, {$user->name}!</h1>
    <p>Today is {date('Y-m-d')}</p>
</body>
</html>

Template Conditionals

{#if $user->isLoggedIn}
    <div class="user-panel">
        <h2>Dashboard</h2>
        {#if $user->isAdmin}
            <button>Admin Panel</button>
        {:else}
            <button>User Settings</button>
        {/if}
    </div>
{:else}
    <div class="login-form">
        <h2>Please Login</h2>
    </div>
{/if}

Template Loops

{#if !empty($posts)}
    <div class="posts">
        {#each $posts as $post}
            <article>
                <h3>{$post->title}</h3>
                <p>{$post->excerpt}</p>
                <a href="/post/{$post->slug}">Read More</a>
            </article>
        {/each}
    </div>
{:else}
    <p>No posts available.</p>
{/if}

PHP Code Blocks

{: 
    // Complex PHP logic
    $categories = get_categories();
    $featured = array_filter($categories, function($cat) {
        return $cat->featured; // Comments work safely here
    });
    
    /* Multi-line comments
       are also safe to use */
    $total = count($featured);
:}

<p>Found {$total} featured categories</p>

Switch Statements

{#switch $status}
    {:case 'active'}
        <span class="badge green">Active</span>
    {:case 'pending'}
        <span class="badge yellow">Pending</span>
    {:case 'inactive'}
        <span class="badge red">Inactive</span>
    {:default}
        <span class="badge gray">Unknown</span>
{/switch}

Mixed PHP Syntax

<!-- Standard PHP -->
<?php $currentTime = date('H:i:s'); ?>

<!-- Custom syntax -->
{: $userCount = count($users); :}

<!-- Mix both in output -->
<p>Current time: <?= $currentTime ?></p>
<p>Total users: {$userCount}</p>
<p>Server info: {php_uname()}</p>

PHP in HTML Attributes

<img src="{$user->avatar}" alt="Avatar for {$user->name}">
<div class="status {$user->isActive ? 'active' : 'inactive'}" data-id="{$user->id}">
<form action="{: echo wp_nonce_url('/submit', 'form_action'); :}" method="post">
<a href="{home_url('/profile/' . $user->slug)}" title="View {$user->name}'s profile">

⚙️ Configuration

Auto-completion Triggers

< - HTML tags
{# - Template directives
{: - PHP code blocks
$ - PHP variables

Emmet Integration

HTML abbreviations work seamlessly:

div.container>h1+p.intro

Expands to:

<div class="container">
    <h1></h1>
    <p class="intro"></p>
</div>

🎨 Syntax Highlighting

The extension provides rich syntax highlighting for:

HTML tags and attributes (blue/orange)
PHP variables (light blue)
PHP functions (yellow)
Template directives (purple)
Strings (green)
Comments (gray)
Keywords (pink)

🔍 IntelliSense Features

HTML Auto-completion

Common HTML5 tags with auto-closing
Attribute suggestions
Semantic HTML elements

PHP Auto-completion

Variable suggestions ($user, $post, $config)
Function hints and parameter help
Object property completion

Template Directive Snippets

#if → Complete if/else structure
#each → Complete foreach loop
#switch → Complete switch statement
variable → PHP variable assignment in code blocks
function → PHP function call in code blocks

🛠️ Requirements

VS Code: Version 1.101.0 or higher
File Extension: .view.php

📝 Best Practices

Use semantic HTML: Take advantage of HTML5 semantic elements
Comment your PHP: Comments are safe and encouraged in all PHP blocks
Consistent indentation: The extension supports smart indentation
Template organization: Use template directives for logic, PHP blocks for data processing

🐛 Known Issues

Complex nested PHP arrays in expressions may need careful formatting
Very long single-line expressions might need line breaks for readability

🚦 Release Notes

0.0.1 (Initial Release)

✅ Full HTML5 syntax highlighting
✅ PHP integration with <?php ?>, <?= ?> tags
✅ Custom template directives ({#if}, {#each}, etc.)
✅ PHP expressions ({$variable}, {function()})
✅ PHP code blocks ({: code :})
✅ Smart comment handling
✅ Auto-completion for HTML, PHP, and template syntax
✅ Emmet support
✅ Bracket matching and auto-closing pairs
✅ Hover documentation
✅ Mixed syntax support

🤝 Contributing

Contributions are welcome! Please feel free to submit issues and pull requests.

📄 License

This extension is provided as-is for development purposes.

Happy coding with WPStartX View! 🎉