🧰 ユーティリティ中級

Liquid コードのフォーマット設定例

Prettier Liquid プラグインの多行フォーマット動作を示すテストファイル。render タグとフィルター連鎖の改行・インデント方法を明示し、printWidth 80 での折り返しルールを実装する。

用途

Shopify テーマの Liquid コードを自動フォーマットするときに、マルチラインな render タグやフィルターチェーンの整形ルールを確認・調整する際に参照する。

設置場所

このファイル自体はテストファイルであり、直接ストアに貼り付けるものではない。プロジェクトの Prettier 設定ファイル（.prettierrc.js など）で `@shopify/prettier-plugin-liquid` を有効化し、IDE のフォーマッタが同じルールに従うよう確認する用途。

注意点

このコードは Prettier プラグインのテストケースであるため、実際のテーマ開発に直接使用しない。render スニペット呼び出しの引数が複数行に分かれるときは、Prettier による自動調整で printWidth を超えないよう折り返される。フィルター連鎖（`| image_url | image_tag`）の改行は Prettier バージョンに依存するため、プロジェクト内で統一ルールを .prettierrc で明示的に指定すること。

タグ:prettierformattingliquidplugincode-style

コード

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

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

Liquid コードのフォーマット設定例

コード

出典・ライセンス

関連項目

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

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

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

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

Vue.js属性のLiquid整形

sections タグのフォーマット