Dont want prettier to format img, button tags in multilines

[FKFAISALKHAN007]

using your Extention "Identifier: shopify.theme-check-vscode" with vscode can you help with this? before format

<button x-on:click="open = ! open" type="button" class="inline-flex items-center text-base text-gray-500 hover:text-gray-900">
                {{ link.title }}
                {% render 'icon-dropdown' %}
              </button>

after format it becomes

<button
                x-on:click="open = ! open"
                type="button"
                class="inline-flex items-center text-base text-gray-500 hover:text-gray-900">
                {{ link.title }}
                {% render 'icon-dropdown' %}
              </button>

can you suggest what has to be switched off ? I want formatter enabled but let attributes on single line.

[mgmanzella]

👋 thanks for reporting, afaik you can't target specific tags to have a different print width than the rest of the file. i think your best bet is to use {% # prettier-ignore-attributes %} and then format the attributes the way you like on a single line. so this:

{% # prettier-ignore-attributes %}
<button x-on:click="open = ! open" type="button" class="inline-flex items-center text-base text-gray-500 hover:text-gray-900">
        {{ link.title }}
               {% render 'icon-dropdown' %}
</button>

would become this:

{% # prettier-ignore-attributes %}
<button
  x-on:click="open = ! open" type="button" class="inline-flex items-center text-base text-gray-500 hover:text-gray-900"
>
  {{ link.title }}
  {% render 'icon-dropdown' %}
</button>

feel free to open an issue requesting this enhancement tho 🙏

[FKFAISALKHAN007]

When i used liquify or prettier directly. Setting forceattribute to false in vscode settings.json did the job. But i cant find a way set this parameter with this one.

As i know its using same prettier there should be a way to send this parameter as false.

On Fri, 9 Aug, 2024, 8:00 pm Morisa Manzella, @.***> wrote:

👋 thanks for reporting, afaik you can't target specific tags to have a different print width than the rest of the file. i think your best bet is to use {% # prettier-ignore-attributes %} and then format the attributes the way you like on a single line. so this:

{% # prettier-ignore-attributes %}

{{ link.title }} {% render 'icon-dropdown' %}

would become this:

{% # prettier-ignore-attributes %} <button x-on:click="open = ! open" type="button" class="inline-flex items-center text-base text-gray-500 hover:text-gray-900"

{{ link.title }} {% render 'icon-dropdown' %}

feel free to open an issue requesting this enhancement tho 🙏

— Reply to this email directly, view it on GitHub https://github.com/Shopify/theme-tools/issues/469#issuecomment-2278081712, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASRBZ7JPT5DN4CI5TYSZV5TZQTG6TAVCNFSM6AAAAABMIMOUYKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENZYGA4DCNZRGI . You are receiving this because you authored the thread.Message ID: @.***>

[FKFAISALKHAN007]

When i used liquify or prettier directly. Setting forceattribute to false in vscode settings.json did the job. But i cant find a way set this parameter with this one.

As i know its using same prettier there should be a way to send this parameter as false.

Can you suggest something to set it false?

[karreiro]

👋 Hey @FKFAISALKHAN007,

Thank you for reporting this issue. Currently, the extension doesn't support these settings. However, it's a fair feature request, so I'm reopening this issue :)