🧰 ユーティリティ上級

Prettier Liquid プラグインの空白処理テスト

Liquid テンプレートをフォーマットするときに、テキストと Liquid ノード間の改行ルールを検証するテストケース集。行長制限下での自動折り返し、ノード内改行、親要素の折り返し判定を網羅している。

用途

prettier-plugin-liquid の開発・メンテナンス時に、Liquid コード整形の空白・改行ロジックが正しく機能しているか確認するために使う。

設置場所

packages/prettier-plugin-liquid/src/test/whitespace-breaking-logic-between-liquid-and-text-nodes/ に fixed.liquid として配置。テストランナーが自動で読み込み、prettier のフォーマット結果を検証する。

注意点

このファイルは Prettier プラグインの内部テストであり、直接ストア開発には使わない。Liquid コメント記号「(-」「-)」や「|=============|」は実際のテンプレート構文ではなく、テスト用のマーカー。Prettier 自体のバージョンが変わると期待値が変わる可能性がある。

タグ:prettierliquid-formatterwhitespacetestingcode-quality

コード

39 行 / 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
<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/fixed.liquid
Repository:: https://github.com/Shopify/theme-tools
License:: MIT

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

Prettier Liquid プラグインの空白処理テスト

コード

出典・ライセンス

関連項目

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

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

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

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

Vue.js属性のLiquid整形

sections タグのフォーマット