Prevent Prettier plugin to move Liquid conditions to several lines

Short description of issue

Prettier plugin should have a new option to prevent moving Liquid conditions into several lines

Reproduction steps

Hello,

It would be nice if the Prettier plugin would support a new option to stop creating new lines when the width is below the printWidth defined value. This can actually make it harder to read.

See how this link is now a lot of lines, while having it this way is ultimately easier to scan and reduce the clutter:

<a href="{{ link.url }}" {% if link.active %}aria-current="page"{% endif %}>

Additional info

N/A

What type of topic is this

Feature request

Upload screenshot(s) of issue

2 Likes

Even better an option to control how many horizontal characters before it happens, at least. In most cases (more content than your specific example) I’d prefer it to put it as your screenshot. printWidth is too much, IMO.

This is a known limitation in Prettier. Requests like this come up frequently in their repo, but they keep it intentionally opinionated and are generally reluctant to add new formatting options in this area. So that’s Prettier’s formatting behavior (including how it prints HTML/Liquid), not something Shopify controls. Unfortunately, printWidth is treated just as a guideline, not as a hard limit, so Prettier will still introduce line breaks even when a line is under that value…

Makes sense. Thanks!