🧰 ユーティリティ初級

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

{% sections %} タグの前後の空白制御（ホワイトスペース削除演算子 `{%-` と `-%}` の使い方）を示すサンプル。Prettier による Liquid コードフォーマットで改行が崩れないことを確認するテストケース。

用途

テーマ内で複数のセクションを呼び出すときに、不要な改行やインデントが Prettier の自動整形後も保持されることを検証したい場合。

設置場所

このコード自体はテストファイルのため、実際のテーマには貼り付けない。参考として {% sections %} タグを使う際は、改行を除去したいなら `{%-` / `-%}` 構文、整形後のインデントを保ちたいなら `{%` / `%}` 構文を使い分ける。

注意点

{% sections %} は Online Store 2.0 テーマで複数セクションを動的に出力するタグだが、実際の使用には section ハンドルがストアに存在する必要がある。Prettier のフォーマットルール（printWidth: 1 など）はテスト環境固有の設定のため、本番テーマでは自店舗の `.prettierrc` 設定に合わせる。改行を削除する `{%-` / `-%}` を乱用するとコード可読性が低下するため、ファイルサイズ削減よりも保守性を優先させるとよい。

タグ:liquid-formattingwhitespaceprettiersection

コード

7 行 / liquid

It should never break a name
printWidth: 1
{% sections 'sectionName' %}
{% sections 'sectionName' %}
{% sections 'sectionName' %}
{%- sections 'sectionName' -%}

出典・ライセンス

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

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

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

コード

出典・ライセンス

関連項目

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

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

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

Vue.js属性のLiquid整形

sections タグのフォーマット

範囲オブジェクトの出力と型変換