blade-formatter
blade-formatter copied to clipboard
shufo
[Formatting Bug]: php code in blade attributes using semicolon syntax are wrongly formatted
Version
1.42.2
Template before formatting
<flux:navlist.item icon="home" :href="route('dashboard')" :current="request()->routeIs('dashboard')"
wire:navigate>{{ __('Dashboard') }}</flux:navlist.item>
Template after formatting
<flux:navlist.item icon="home" :href="route('dashboard')" :current="request() - > routeIs('dashboard')"
wire:navigate>{{ __('Dashboard') }}</flux:navlist.item>
Expected Behaviour
I have php code in :href attribute that is using the arrow syntax to access objects being formatted incorrectly, adding spaces around. No idea why it's doing that.
Relevant log output
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
<head>
@include('partials.head')
</head>
<body class="min-h-screen bg-white dark:bg-zinc-800">
<flux:sidebar sticky stashable class="border-r border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
<flux:sidebar.toggle class="lg:hidden" icon="x-mark" />
<a href="{{ route('dashboard') }}" class="me-5 flex items-center space-x-2 rtl:space-x-reverse" wire:navigate>
<x-app-logo />
</a>
<flux:navlist variant="outline">
<flux:navlist.group :heading="__('Wiki')" class="grid">
<flux:navlist.item icon="home" :href="route('dashboard')"
:current="request() - > routeIs('dashboard')" wire:navigate>{{ __('Dashboard') }}
</flux:navlist.item>
</flux:navlist.group>
</flux:navlist>
<flux:spacer />
<flux:navlist variant="outline">
<flux:navlist.item icon="folder-git-2" href="https://github.com/laravel/livewire-starter-kit"
target="_blank">
{{ __('Repository') }}
</flux:navlist.item>
<flux:navlist.item icon="book-open-text" href="https://laravel.com/docs/starter-kits" target="_blank">
{{ __('Documentation') }}
</flux:navlist.item>
</flux:navlist>
<!-- Desktop User Menu -->
<flux:dropdown position="bottom" align="start">
<flux:profile :name="auth() - > user() - > name" :initials="auth() - > user() - > initials()"
icon-trailing="chevrons-up-down" />
<flux:menu class="w-[220px]">
<flux:menu.radio.group>
<div class="p-0 text-sm font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
<span class="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg">
<span
class="flex h-full w-full items-center justify-center rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
{{ auth()->user()->initials() }}
</span>
</span>
<div class="grid flex-1 text-start text-sm leading-tight">
<span class="truncate font-semibold">{{ auth()->user()->name }}</span>
<span class="truncate text-xs">{{ auth()->user()->email }}</span>
</div>
</div>
</div>
</flux:menu.radio.group>
<flux:menu.separator />
<flux:menu.radio.group>
<flux:menu.item :href="route('settings.profile')" icon="cog" wire:navigate>{{ __('Settings') }}
</flux:menu.item>
</flux:menu.radio.group>
<flux:menu.separator />
<form method="POST" action="{{ route('logout') }}" class="w-full">
@csrf
<flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full">
{{ __('Log Out') }}
</flux:menu.item>
</form>
</flux:menu>
</flux:dropdown>
</flux:sidebar>
<!-- Mobile User Menu -->
<flux:header class="lg:hidden">
<flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />
<flux:spacer />
<flux:dropdown position="top" align="end">
<flux:profile :initials="auth() - > user() - > initials()" icon-trailing="chevron-down" />
<flux:menu>
<flux:menu.radio.group>
<div class="p-0 text-sm font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
<span class="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg">
<span
class="flex h-full w-full items-center justify-center rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
{{ auth()->user()->initials() }}
</span>
</span>
<div class="grid flex-1 text-start text-sm leading-tight">
<span class="truncate font-semibold">{{ auth()->user()->name }}</span>
<span class="truncate text-xs">{{ auth()->user()->email }}</span>
</div>
</div>
</div>
</flux:menu.radio.group>
<flux:menu.separator />
<flux:menu.radio.group>
<flux:menu.item :href="route('settings.profile')" icon="cog" wire:navigate>{{ __('Settings') }}
</flux:menu.item>
</flux:menu.radio.group>
<flux:menu.separator />
<form method="POST" action="{{ route('logout') }}" class="w-full">
@csrf
<flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full">
{{ __('Log Out') }}
</flux:menu.item>
</form>
</flux:menu>
</flux:dropdown>
</flux:header>
{{ $slot }}
@fluxScripts
</body>
</html>
Ran into this issue too. Any workaround for the time being? I'm trying to just switch to the default HTML formatter but VSCode doesn't seem to detect the formatter. It detects the Blade filetype but seems to ignore the defaultFormatter setting:
"[blade]": {
"editor.defaultFormatter": "vscode.html-language-features"
}
I can confirm this is also happening on the latest version of everything.
For now I'm getting around it by adding:
{{-- blade-formatter-disable --}}
<flux:navbar.item icon="layout-grid" :href="route('dashboard')" :current="request()-> routeIs('dashboard')"
wire:navigate>
{{ __('Dashboard') }}
</flux:navbar.item>
{{-- blade-formatter-enable --}}
I've switched to formatting with https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade for the time being. You'll need to enable formatting manually:
"blade.format.enable": true,
UP! I have the same issue with the latest version. It is quite annoying and there is no usable workaround. Onecentelin Laravel Blade is a good option but I couldn't find a way to preserve multiline params, which is quite bad for readability... @99linesofcode, any success with that?
UP! I have the same issue with the latest version. It is quite annoying and there is no usable workaround. Onecentelin Laravel Blade is a good option but I couldn't find a way to preserve multiline params, which is quite bad for readability... @99linesofcode, any success with that?
It's only very basic formatting functionality that is integrated with laravel-blade as it's primarily an extension that provides snippets. I'm afraid it won't be a viable solution for you as it doesn't seem to allow you to configure attribute wrapping as this extension does.
