VS Code Inertia Page Navigation Extension

Navigate to Inertia.js page files directly from your PHP controllers in VS Code.

Features

• Go to Definition: Cmd/Ctrl + Click on the page component path in Inertia::render or $this->page calls to open the corresponding file.
• Smart Resolution: Automatically checks resources/js for files with extensions: .tsx, .vue, .js, .jsx, .ts, .svelte.

Usage

In your PHP controller:

public function index()
{
    // Hold Cmd/Ctrl and click on the path string
    return Inertia::render('Dashboard/Settings', [
        'user' => Auth::user(),
    ]);
}

You can also use the $this->page('path/to/page', $data) method, which is a helper function that returns Inertia::render with the first argument as the page component path.

Main Base Controller

<?php

namespace App\Http\Controllers;

use Illuminate\Validation\ValidationException;

abstract class Controller
{
    public function page(string $view, array $data = [], ?string $title = null)
    {
        if ($title) {
            $data['title'] = $title;
        }

        $titleSeparator = config('system.title_separator');

        $data['title'] = (! empty($data['title']) ? $data['title'] . ' ' . $titleSeparator . ' ' : '') . config('app.name');

        return inertia($view, $data);
    }
}

Controller Example

<?php

namespace App\Http\Controllers\Users;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\Countries;

class UserController extends Controller
{
    public function create()
    {
        // Hold Cmd/Ctrl and click on the path string
        return $this->page('dashboard/users/create', [
            'countries' => Countries::all(),
        ]);
    }
}

Installation

From VSIX

1. Download the .vsix file from the Releases page.
2. Open VS Code/Cursor/Windsurf or any other VS Code clone.
3. Go to the Extensions view (Cmd+Shift+X).
4. Click the "..." menu in the top right.
5. Select "Install from VSIX..." and choose the downloaded file.

From Source for Development

1. Clone the repository:

   git clone https://github.com/syntaxlexx/vscode-inertia-lexx.git
   

2. Navigate to the directory:

   cd vscode-inertia-lexx
   

3. Install dependencies:

   npm install
   

4. Open the project in VS Code:

   code .
   

5. Press F5 to open the Extension Development Host.

Building the .vsix Package

To create the .vsix file yourself (for local installation or distribution):

1. Install vsce (VS Code Extensions CLI):

   npm install -g @vscode/vsce
   

2. Package the extension: Run the following command in the project root:

   vsce package
   

   This will generate a file named vscode-inertia-lexx-0.0.1.vsix (version number may vary).

3. Install the .vsix: You can now install this file using the "Install from VSIX..." method described above.

Automated Release via GitHub Actions

This project includes a GitHub Action to automatically build and release the extension.

1. Tag the release: Push a new tag starting with v (e.g., v0.0.1) to the repository:

git tag v0.0.1
git push origin v0.0.1

# or via one line
git tag v0.0.1 && git push origin v0.0.1

2. Download the Release: The GitHub Action will automatically run, build the .vsix file, and attach it to a new Release on GitHub. You can then download it from the Releases page.

Requirements

• VS Code 1.85.0 or higher.
• A Laravel project with Inertia.js structure (resources/js directory).

Testing

Run the following to verify that the extension can find the page file:

node verify_path.js