Liquid Snippets by ALSEL
🏗️ テーマ基盤上級

Liquid case タグのフォーマット

Prettier プラグイン向けの case/when/else タグのフォーマットテストファイル。case 式の改行・インデント・括弧配置をコード整形時に正しく処理するための仕様を定義している。

用途
Liquid コード自動整形ツール(Prettier)の動作検証や、テーマ構築ツールチェーン内でのコード品質保証が必要な環境で参考にする。
設置場所
このファイル自体は Prettier プラグインのテストスイート用なので、直接テーマに貼り付けない。Liquid フォーマッタの動作確認が必要なときは、ローカル開発環境で @shopify/prettier-plugin-liquid をインストールし、printWidth などの設定を変更してテストを実行する。
注意点
このファイルはテストケース集であり、実装コードではない。case タグ単体では何も出力されないため、実際のストア機能には直結しない。when 句の複数条件は「カンマ区切り」が推奨で、「or 構文」は Prettier により自動的にカンマに変換される可能性がある。テーマ内で case タグを使う際は、ツールの自動整形設定に合わせてコードを記述しないと意図しない改行が入ることがある。
タグ:prettierliquidcase-tagformattinglinting

コード

55 行 / liquid
It should never break on case expression
printWidth: 1
{% case  "name"  %} {% endcase %}
{% case true %} {% endcase %}
{%case var.lookup %} {% endcase %}
{%- case
var.lookup
-%} {% endcase %}

It should break and indent when statements, and not break the when
printWidth: 1
{% case candy.type %} {% when "gummy bears" %} yum! {% endcase %}

It should break on when comma syntax
printWidth: 1
{% case candy.type %} {% when "gummy bears", "chocolate" %} yum! {% endcase %}

It should break on when or syntax (and prefer commas)
printWidth: 1
{% case candy.type %} {% when "gummy bears" or "chocolate" or "chips" %} yum! {% else %} ok! {% endcase %}

It should join args with comma and space
{% case candy.type %} {% when foo,bar %} yum! {% endcase %}

It should maintain at most one new line between cases
{% case foo %}
  {% when bar %}
    <div>Something</div>


  {% when baz %}
    <div>Something else</div>
{% endcase %}

It should not maintain trailing whitespace between last case and parent
{% case foo %}
  {% when bar %}
    <div>Something</div>

  {% when baz %}
    <div>Something else</div>


{% endcase %}

It should not maintain leading whitespace in default branch
{% case foo %}

  {% when bar %}
    <div>Something</div>

  {% when baz %}
    <div>Something else</div>
{% endcase %}

出典・ライセンス

License:
MIT

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

関連項目

🏗️ テーマ基盤中級

セクションスキーマのカスタムブロック定義

セクションの schema ブロック内でカスタムブロックタイプを定義する方法を示すサンプル。@theme と _private というプレフィックスで異なるブロック種別を宣言する。

📁 theme-tools·MIT·7
🏗️ テーマ基盤初級

セクション呼び出しのフォーマット

Liquid の section タグを複数行に記述する際の正しいフォーマット例。タグ名を改行で分割しても正しく認識される書き方を示す。

📁 theme-tools·MIT·7
🏗️ テーマ基盤初級

レイアウトテンプレートの指定

Liquid の `layout` タグを使い、テーマのレイアウトファイルを指定する構文。複数のレイアウト候補と whitespace 制御(ダッシュ記号)の使い方を示す。

📁 theme-tools·MIT·8
🏗️ テーマ基盤上級

Liquid フォーマッター互換のセクション表記

Prettier Liquid プラグインのテストケースで、セクションタグの様々な書式を検証する。異なる間隔・改行・ホワイトスペーストリミングの組み合わせでもセクション名が崩れないことを確認する。

📁 theme-tools·MIT·9
🏗️ テーマ基盤初級

基本的なHTMLレイアウト

Prettier Liquid プラグインのテスト用に作られた最小限の HTML テンプレート。DOCTYPE から body タグまでの基本的なドキュメント構造を示す。

📁 theme-tools·MIT·10
🏗️ テーマ基盤上級

layout タグのフォーマット

Liquid の layout タグの書式をコード品質ツール(Prettier)でフォーマットするテストケース。スペースや改行位置の違いを正規化し、レイアウト名が壊れないことを検証する。

📁 theme-tools·MIT·10