Comments (4)
packages.json
"devDependencies": {
"@shufo/prettier-plugin-blade": "^1.3.2",
"@tailwindcss/aspect-ratio": "^0.4.0",
"@tailwindcss/forms": "^0.4.0",
"@tailwindcss/line-clamp": "^0.3.0",
"@tailwindcss/typography": "^0.5.0",
"alpinejs": "^3.5.0",
"autoprefixer": "^10.4.0",
"axios": "^0.24.0",
"laravel-echo": "^1.11.3",
"laravel-mix": "^6.0.37",
"lodash": "^4.17.19",
"postcss": "^8.4.5",
"postcss-import": "^14.0.2",
"postcss-nesting": "^9.0.0",
"prettier": "2.6.2",
"pusher-js": "^7.0.3",
"tailwindcss": "^3.0.3"
},
**Example blade file: tab-list-relations.blade.php **
<div class="px-4 sm:px-0 mt-6" x-data="{ tab: window.location.hash ? window.location.hash : '#tab1' }">
<div class="hidden sm:block">
<nav class="relative z-0 rounded-lg shadow flex divide-x divide-gray-200" aria-label="Tabs">
@foreach ($this->relations as $k => $relation )
<a href="#" aria-current="page"
class="text-gray-900 rounded-l-lg group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-6 text-sm font-medium text-center hover:bg-gray-50 focus:z-10"
x-on:click.prevent="tab='#tab1'">
<span>Consumi</span>
<span aria-hidden="true" :class="tab == '#tab1' ? 'bg-red-500' : 'bg-transparent'"
class="absolute inset-x-0 bottom-0 h-0.5"></span>
</a>
@endforeach
</nav>
</div>
<div class="mt-6">
@foreach ($this->relations as $k => $relation )
<div x-show="tab == '#tab{{$k}}'" x-cloak>
<livewire:widgets.invoice-document-consumption.card :invoice_document_id="$this->invoiceDocument->id" />
</div>
@endforeach
</div>
</div>
if i run ./node_modules/.bin/prettier --write resources/views/livewire/widgets/invoice-document/tab-list-relations.blade.php
Output:
<div class="mt-6 px-4 sm:px-0" x-data="{ tab: window.location.hash ? window.location.hash : '#tab1' }">
<div class="hidden sm:block">
<nav class="relative z-0 flex divide-x divide-gray-200 rounded-lg shadow" aria-label="Tabs">
@foreach ($this->relations as $k => $relation)
<a href="#" aria-current="page"
class="group relative min-w-0 flex-1 overflow-hidden rounded-l-lg bg-white py-4 px-6 text-center text-sm font-medium text-gray-900 hover:bg-gray-50 focus:z-10"
x-on:click.prevent="tab='#tab1'">
<span>Consumi</span>
<span aria-hidden="true" :class="tab == '#tab1' ? 'bg-red-500' : 'bg-transparent'"
class="absolute inset-x-0 bottom-0 h-0.5"></span>
</a>
@endforeach
</nav>
</div>
<div class="mt-6">
@foreach ($this->relations as $k => $relation)
<div x-show="tab == '#tab{{ $k }}'" x-cloak>
<livewire:widgets.invoice-document-consumption.card
:invoice_document_id="$this - > invoiceDocument - > id" />
</div>
@endforeach
</div>
</div>
from prettier-plugin-blade.
Hi @wit3. Thanks for trying out.
I think I had that behavior in an earlier version, but I think it was fixed in recent version.
I tried formatting with prettier-plugin-blade v.1.3.2
❯ cat example.blade.php
<x-component-name type="error" :content="$message->content" />
❯ yarn run prettier example.blade.php
yarn run v1.22.10
$ prettier --plugin . --plugin-search-dir . example.blade.php
<x-component-name type="error"
:content="$message->content" />
Can you post the version of prettier-plugin-blade you tried and preferably the whole template?
Sorry if I'm missed something.
from prettier-plugin-blade.
Thanks @wit3.
This seems to be a bug due to not expecting <livewire.~~>
tags.
For temporary workaround, you can use the @livewire
directive by laravel-livewire to prevent unexpected formatting.
e.g.
@livewire('show-post', ['post' => $post])
I'll try to fix the behaviour so that you can use <livewire:~~ />
tags.
from prettier-plugin-blade.
Fixed at https://github.com/shufo/prettier-plugin-blade/releases/tag/v1.3.5
from prettier-plugin-blade.
Related Issues (20)
- [Formatting Bug]: Bad HTML formatting HOT 2
- [Feature Request]: Format JS inside of AlpineJS attributes HOT 5
- [Feature Request]: $attributes->class() & @class() sorting support HOT 3
- [Feature Request]: prettier-plugin-tailwindcss config support HOT 3
- [Bug]: Unknown node type: undefined HOT 5
- [Formatting Bug]: not compatible with `trailingCommaPHP` nor `phpVersion` from `@prettier/plugin-php` HOT 6
- [Formatting Bug]: Arrays are being collapse on a single line HOT 3
- [Bug]: In doc is missing --end-with-new-line in .prettierrc example HOT 2
- [Formatting Bug]: Blade Component HOT 1
- [Formatting Bug]: Bad formatting in @php tags HOT 2
- [Formatting Bug]: Adds spaces where there shouldn't be HOT 1
- [Bug]: Blade components format is not compliant with Prettier HOT 3
- [Formatting Bug]: HOT 3
- [Formatting Bug]: extra line in plain html with CRLF (windows, phpstorm) HOT 2
- [Feature Request]: wrapAttributesPrintWidth HOT 3
- [Feature Request]: Let Prettier format script tags HOT 1
- [Question]: can any tailwind.config.* fileformat be used by default HOT 3
- [Formatting Bug]: Weird indentation HOT 3
- [Bug]: Install command is installing prettier v2.8.8 HOT 4
- [Bug]: Error: Unknown node type: undefined HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from prettier-plugin-blade.