Blade Components IDE Helper (VS Code)

Autocompletion and hover for class-based Blade <x-…> components in .blade.php files, driven by the VS Code Custom Data files (*.html-data.json) generated by the PHP package forxer/blade-components-ide-helper and its consumers (e.g. forxer/blade-ui-kit-bootstrap).

What it provides

• Tag-name completion after <x-.
• Attribute-name completion inside a component tag.
• Attribute-value completion for attributes with constrained values (variant, size, …).
• Hover with the description of a tag or attribute.

Installation

This extension is published on the Visual Studio Marketplace and the Open VSX Registry, and is also attached as a .vsix file to every GitHub Release.

• Visual Studio Code (standard): open the Extensions view, search for "Blade Components IDE Helper", and install it — or install it from its Marketplace page.
• VSCodium / editors that use Open VSX: open the Extensions view, search for "Blade Components IDE Helper", and install it.
• Manual install (any editor): download blade-components-ide-helper-<version>.vsix from the latest release, then open the Command Palette (Ctrl/Cmd+Shift+P) → Extensions: Install from VSIX… and select the downloaded file. No need to clone this repository.

Remote-WSL / SSH / Dev Containers: this is a workspace extension (it reads your project's files), so install it in the remote, not on the local side. In the Extensions view, install it from the section that shows your remote name (e.g. "WSL: Ubuntu — Installed").

Requirements

This extension activates on the blade language. Install a Blade language extension (the official Laravel extension or "Laravel Blade Snippets") so .blade.php files use the blade language id.

In your Laravel project, generate the metadata:

php artisan blade-components-ide-helper:generate

This writes .vscode/<package>.html-data.json, which this extension reads automatically. Re-running the command hot-reloads the suggestions — no window reload needed.

Settings

• bladeComponents.enable (boolean, default true) — turn the extension on/off.
• bladeComponents.customDataGlobs (string[], default [".vscode/*.html-data.json"]) — where to find the Custom Data files.

Contributing

See CONTRIBUTING.md for how to build, test, debug and release the extension.

License

MIT