🧰 ユーティリティ上級

if / unless タグのフォーマットテスト

Prettier Liquid プラグイン向けのテストケース。条件分岐のタグ(if / unless)が正しく改行・インデント・整形されることを検証するためのサンプル集。

用途

Prettier による Liquid コードの自動フォーマット機能を開発・検証するときに、条件分岐の複雑なケース（論理演算子、比較演算子、ネスト）が期待通りに整形されるか確認する。

設置場所

prettier-plugin-liquid 開発環境のテストディレクトリに配置。`npm test` で Prettier のフォーマット出力を検証する際に参照される。実際のストーム開発には使用しない。

注意点

このファイルは Prettier プラグインのテストケースであり、実際のストア構築に直接貼り付けるコードではない。テストケース内の `printWidth: 1` や `printWidth: 30` は Prettier の設定値を強制する指示コメントで、本番環境では theme.liquid などに影響しない。条件分岐内の式が複雑になる場合（and / or / contains など複数の論理演算子を組み合わせるとき）は、可読性のためこのテストケース群の整形ルールを参考に自分のコードを手動で整形するとよい。

タグ:if-tagunless-tagprettierformattingtest-case

コード

70 行 / liquid

It should not break singular expressions, but we break children
printWidth: 1
{% if x %} hello {% endif %}
{% if  'string'%} hello {% endif %}
{% if   nil  %} hello {% endif %}

It should break before logical operators
printWidth: 1
{% if conditionA and var[ "key" ] and true %} hello {% endif %}

It should break before comparators (and indent)
printWidth: 1
{% if lower < some.variable and some.variable < upper %} hello {% endif %}

It should try to keep comparators on same line
printWidth: 30
{% if lower < some.variable and some.variable < upper %} hello {% endif %}

It should support all kinds of shit
printWidth: 30
{% if lower < some.variable and some.variable < upper and string contains "hi" or string == empty or nil or var.lookup %} hello {% endif %}

It should support all kinds of shit (same but for unless)
printWidth: 30
{% unless lower < some.variable and some.variable < upper and string contains 'hi' or string == empty or nil or var.lookup %} hello {% endunless %}

It should be idempotent
{% if variable >= 1 %} {% endif %}

It should not maintain leading whitespace in default branch
{% if true %}

  hello
{% endif %}

It should maintain at most 1 new line between the default branch and the next
{% if true %}
  hello


{% else %}
  world
{% endif %}

It should maintain at most 1 new line between the branches
{% if true %}
  hello


{% elsif true %}
  world


{% else %}
  world
{% endif %}

It should not maintain trailing newlines between last branch and parent node
{% if true %}
  hello

{% elsif true %}
  world

{% else %}
  world


{% endif %}

出典・ライセンス

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

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

if / unless タグのフォーマットテスト

コード

出典・ライセンス

関連項目

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

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

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

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

Vue.js属性のLiquid整形

sections タグのフォーマット