🧰 ユーティリティ上級

複数行Liquidのコード整形

Prettier プラグインのテストケース。長い Liquid タグとフィルタチェーンを複数行に分割して整形する際の期待される出力形式を示す。

用途

Liquid コードを Prettier で自動整形するときに、フィルタが複数行に分割される場合の正しいインデント・改行ルールを確認したいとき。

設置場所

このコード自体は Prettier の設定テストファイルなため、実装に直接貼り付けるのではなく、Liquid コードを Prettier で整形する際の参考形式として使用する。80文字の printWidth 制限下で、`{{ }}` 内のフィルタチェーンを適切に折り返す際の参照例。

注意点

このテストケースは Prettier プラグインの整形ルール検証用であり、実際の Shopify テーマ開発では、プロジェクトの `.prettierrc` に同様の printWidth を設定して運用する。フィルタのインデント位置はプラグインの設定に依存するため、プロジェクトごとに `arrow-parens`、`bracket-spacing` などの詳細ルールを確認する。

タグ:prettierliquid-syntaxcode-formattinglintingmultiline

コード

19 行 / liquid

It should print multiline liquid the way we'd expect
printWidth: 80
<div>
  {% render 'foo', product: product %}
  {{
    product.featured_image
    | image_url: width: 400, height: 400, crop: 'top'
    | image_tag
  }}
</div>
<div>
  {% render 'foo', product: product %}
  {{
    product.featured_image
    | image_url: width: 400, height: 400, crop: 'top'
    | image_tag
  }}
</div>

出典・ライセンス

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

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

複数行Liquidのコード整形

コード

出典・ライセンス

関連項目

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

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

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

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

Vue.js属性のLiquid整形

sections タグのフォーマット