Filament UI for VSCode

A Visual Studio Code extension that provides syntax highlighting and autocompletion for Laravel Filament UI components in Blade files.

Installation

From VS Code Marketplace

You can install directly from the VS Code Marketplace.

Using Terminal

You can install this extension through the VS Code Marketplace:

1. Launch VS Code Quick Open (Ctrl+P)

2. Paste the following command and press enter:

   ext install doonfrs.vscode-filament

Features

• Syntax Highlighting: Properly highlights Filament UI components in Blade files without showing them as errors
• Smart Autocompletion: Provides context-aware suggestions for components and attributes
• Component Snippets: Ready-to-use snippets for all Filament UI components with proper attribute placeholders
• Intelligent Attributes: Suggests component-specific attributes with appropriate value options
• Documentation Tooltips: Displays helpful documentation for components and attributes as you type
• Quick Start Typing: Begin typing <x-filament:: to see all available components
• Icon System Support: Complete autocompletion for Filament's comprehensive icon system
• Blade Integration: Seamlessly works with other Blade features and extensions

Autocompletion Features

This extension provides several types of autocompletion to improve your workflow:

Component Autocompletion

• Type <x or <x-filament:: to see all available Filament components
• Automatically provides appropriate self-closing tags for components like <x-filament::icon />
• Shows component documentation in tooltips when selecting components

Attribute Autocompletion

• Component-specific attributes appear automatically when typing inside a component tag
• Common attributes like class, id, and Livewire directives are always available
• Boolean attributes (like disabled) are inserted without value placeholders

Value Autocompletion

• Intelligent dropdown suggestions for attribute values where appropriate
• Predefined options for attributes like color, size, and placement
• Smart handling of boolean values for attributes with : prefix

Icon System Autocompletion

• Complete support for Filament's icon system with the following snippets:
  • x-filament::icon - Base icon component
  • icon-panel - Panel Builder icons
  • icon-form - Form Builder icons
  • icon-table - Table Builder icons
  • icon-notification - Notification icons
  • icon-action - Action icons
  • icon-infolist - Infolist Builder icons
  • icon-ui - UI Component icons
  • filament-svg-icon - Template for custom SVG icons

Supported Components

This extension supports all Filament UI components from the official documentation:

UI Components

x-filament::avatar x-filament::badge x-filament::breadcrumbs x-filament::icon x-filament::loading-indicator x-filament::section x-filament::tabs

Action Components

x-filament::button x-filament::dropdown x-filament::icon-button x-filament::link x-filament::modal

Form Components

x-filament::checkbox x-filament::fieldset x-filament::input x-filament::input.wrapper x-filament::select

Table Components

x-filament::pagination

Usage Examples

Basic Component Usage

<x-filament::button>
    Submit Form
</x-filament::button>

Component with Attributes

<x-filament::button color="primary" size="lg" icon="heroicon-o-check">
    Save Changes
</x-filament::button>

Using Icons

<!-- Basic icon usage -->
<x-filament::icon name="heroicon-o-home" />

<!-- Icon with size -->
<x-filament::icon name="heroicon-o-user" size="lg" />

<!-- Using icon aliases -->
<x-filament::icon name="actions::edit-action" />

Requirements

• Visual Studio Code 1.75.0 or higher

Support This Project

If you find Filament UI for VSCode useful, please consider supporting its development:

You can also become a GitHub sponsor: Sponsor @doonfrs

Your support will encourage me to dedicate more time to keeping this useful package updated and well-documented.

Icon System Support

This extension provides comprehensive support for Filament's icon system:

• Icon Component: Use x-filament::icon with name and size attributes
• Icon Aliases: Autocomplete for all icon aliases from the Filament documentation
• Icon Categories: Organized snippets for different icon categories:
  • Panel Builder icons (icon-panel)
  • Form Builder icons (icon-form)
  • Table Builder icons (icon-table)
  • Notifications icons (icon-notification)
  • Actions icons (icon-action)
  • Infolist Builder icons (icon-infolist)
  • UI Component icons (icon-ui)
• Custom SVG Icons: Template for creating custom SVG icons (filament-svg-icon)

For the complete list of available icons, see the Filament Icons Documentation.

Usage

1. Install the extension from the VSCode marketplace
2. Open a .blade.php file
3. Start typing <x-filament:: and the autocompletion will show the available components
4. Select a component to insert it with proper attributes and formatting
5. Tab through the placeholders to fill in the values

Intelligent Autocompletion

This extension provides context-aware suggestions:

• Component-specific attributes are suggested when typing within a component tag
• Attribute values have intelligent dropdown options where appropriate (colors, sizes, etc.)
• Documentation is displayed in tooltips as you type

Extension Settings

This extension doesn't add any VSCode settings.

Known Issues

If you find any issues, please report them on the GitHub repository.