🧰 ユーティリティ上級

Liquid フォーマッタの改行ロジックテスト

Prettier の Liquid プラグインにおいて、テキストノードと Liquid タグの間で改行を入れるべきかを判定するテストコード。行幅に収まるか、子要素が改行を含むかで動作を確認する。

用途

テーマ開発時に prettier-plugin-liquid を使ったコード整形で、テンプレートの可読性が適切に保たれているか検証するとき。

設置場所

このコードはテーマコード自体ではなく prettier プラグインのテストスイート。packages/prettier-plugin-liquid/src/test/ 配下のテストファイルとして参照される。実装時には prettier 設定ファイル(.prettierrc)で printWidth を調整して改行ルールを制御する。

注意点

このファイルは開発者向けテストコードであり、マーチャントやテーマビルダーが直接編集することはない。printWidth（デフォルト 80、例では 30）はプロジェクト全体の整形基準になるため、テーマサイズが大きい場合は 100 以上に設定して改行を減らすと保守性が向上する。Liquid と HTML の混在時に予期しない改行が入る場合は、プラグインのバージョンアップか prettier config の見直しが必要。

タグ:prettierliquidformattingwhitespacetest

コード

25 行 / liquid

it should avoid breaking between text and nodes, when the node fits on a line
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa (-{{ product.price }}-)</p>

<p>Ipsum. Praesent scelerisque tortor a justo. Quisque consequat libero erat<em>product.price</em>ok</p>

it should break between text and node when the group wouldn't fit on a line
<p>
  |============={{ 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' }}=============|
</p>

it should break between text and node when the child has linebreaks
printWidth: 30
<p>
  |============={{
    'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
    | append: 'aaa'
  }}=============|
</p>

it should break parent and add WTC when the child breaks
<p>
  (-{% if liquid %}<span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>{% endif %}-)
</p>

出典・ライセンス

Source:: Shopify/theme-tools/packages/prettier-plugin-liquid/src/test/whitespace-breaking-logic-between-liquid-and-text-nodes/index.liquid
Repository:: https://github.com/Shopify/theme-tools
License:: MIT

このコードは Shopify 著作の MIT ライセンスソースです。原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

Liquid フォーマッタの改行ロジックテスト

コード

出典・ライセンス

関連項目

コメント後の空白フォーマット

Liquidコメントのフォーマット

セクション呼び出しの改行制御

Prettier フォーマッタの HTML リスト整形テスト

Vue.js属性のLiquid整形

sections タグのフォーマット