🧰 ユーティリティ上級

Prettier Plugin Liquid のHTML要素フォーマットテスト

Shopify Liquid 用 Prettier プラグインの HTML 要素フォーマット機能をテストするコード集。属性の改行・インデント・行幅制限の動作を検証する。

用途

Prettier プラグイン開発時に、Liquid テンプレート内の HTML 要素が正しく整形されているかを確認するためのテストケース。

設置場所

このコードはテストスイート内で使用される参考資料であり、実際のテーマに貼り付けるものではない。Prettier Plugin Liquid の開発・保守時にテストケースの仕様確認に参照する。

注意点

これはテストコードであり、実運用テーマには含めない。Prettier の printWidth 設定（例: 30文字）によって改行位置が変わるため、テーマ側の .prettierrc で設定値を統一する必要がある。レンダリングスニペットを含む複雑な Liquid 構文は、属性改行ルールが想定通り動作するか手動で確認推奨。

タグ:prettierformatterhtmltest-casecode-style

コード

52 行 / liquid

it should break on html tags that always break
<html>
  <head>
    <link href="hello world">
  </head>
  <body>
    <main></main>
  </body>
</html>

it should break if original had line breaks
<div x="1" y="2" z="3"></div>
<div
  x="1"
  y="2"
  z="3"
></div>

it should indent child
<div x="1" y="2">Child</div>
<div
  x="1"
  y="2"
  z="3"
>
  Child
</div>

it should not break when it fits on a line
<div x="1" y="2"><div>Hello</div></div>

it should break if there's more than one child on a line
<div x="1" y="2">
  <div>Hello</div>
  <div>World</div>
</div>

it should borrow the closing a tag in this situation
printWidth: 30
<a class="link animate-arrow"
  ><span class="icon-wrap"
    >&nbsp;
    {%- render 'icon-arrow' -%}
  </span></a
>
<a class="link animate-arrow"
  ><span class="icon-wrap"
    >&nbsp;
    aaaaaaaaaaaaaaaaaaaaaaaa
  </span></a
>

出典・ライセンス

Source:: Shopify/theme-tools/packages/prettier-plugin-liquid/src/test/html-element/fixed.liquid
Repository:: https://github.com/Shopify/theme-tools
License:: MIT

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

Prettier Plugin Liquid のHTML要素フォーマットテスト

コード

出典・ライセンス

関連項目

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

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

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

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

Vue.js属性のLiquid整形

sections タグのフォーマット