🏗️ テーマ基盤上級

Liquid と JavaScript のインデント整形ルール

Liquid テンプレート内に埋め込まれた JavaScript コードのインデント処理を制御するテストケース。バッククォート有無でフォーマッタの動作を切り替え、コード整形の一貫性を保つ。

用途

テーマのコード品質自動化や Prettier プラグインの動作検証時に参考になる。Liquid と JavaScript が混在するコードの正しいインデント方針を理解したいときに活用する。

設置場所

このコード自体はテストスイートの参考資料であり、実装ファイルには直接貼り付けない。代わりに、theme.liquid や section ファイル内で `<script>` タグと `{% javascript %}...{% endjavascript %}` タグを使うときのインデント基準として参照する。

注意点

このコードは prettier-plugin-liquid のテストケースなので、Prettier 設定ファイル(.prettierrc)で liquid プラグインが有効になっていることが前提。バッククォート(`` ` ``)を含む JavaScript 文字列はフォーマッタが手を付けないのに対し、シングルクォート(`'`)の場合は Liquid インデント規則に従って再整形される点に注意。実装時にはこの動作を踏まえた上で、チームの Prettier 設定を統一する。

タグ:prettierformattingjavascriptindentationcode-quality

コード

36 行 / liquid

When there's Liquid and no backticks, should reindent
<div>
  <script>
    {% if cond %}
      const x = '{{ product.featured_image}}'
    {% endif %}
  </script>
</div>

When there's Liquid and backticks, should not touch and be idempotent
<div>
  <script>
  {% if cond %}
    const x = `{{ product.featured_image}}`
  {% endif %}
  </script>
</div>

When there's Liquid and no backticks in Liquid JS tag, should reindent
<div>
  {% javascript %}
    {% if cond %}
      const x = '{{ product.featured_image}}'
    {% endif %}
  {% endjavascript %}
</div>

When there's Liquid and backticks in Liquid JS tag, should not touch and be idempotent
<div>
  {% javascript %}
  {% if cond %}
    const x = `{{ product.featured_image}}`
  {% endif %}
  {% endjavascript %}
</div>

出典・ライセンス

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

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

Liquid と JavaScript のインデント整形ルール

コード

出典・ライセンス

関連項目

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

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

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

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

基本的なHTMLレイアウト

layout タグのフォーマット