🧰 ユーティリティ上級

Liquid と JavaScript のインデント制御

Liquid テンプレートと JavaScript を混在させたとき、バッククォートの有無に応じてインデント形式を切り替えるサンプルコード。バッククォートなしの場合はインデント整形、バッククォートありの場合は形式を保持する。

用途

prettier-plugin-liquid でフォーマット時に、テンプレート内の JavaScript 変数への Liquid オブジェクト埋め込みが、引用符タイプによって異なる扱いを受ける動作を検証するとき。

設置場所

このコードはテスト・検証用スニペットであり、実装スニペットではない。prettier-plugin-liquid の開発者が、フォーマッタの動作テストケースとして参照する。

注意点

このコードはテストケース集であり、本番環境のテーマには貼り付けない。バッククォート内に Liquid オブジェクトを埋め込む場合、JavaScript のテンプレートリテラル構文として認識されるため、prettier の整形ルールが異なる。単引用符または二重引用符を使う場合と異なり、バッククォート版では既存の形式が保持される仕様を前提としている。

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

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

Liquid と JavaScript のインデント制御

コード

出典・ライセンス

関連項目

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

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

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

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

Vue.js属性のLiquid整形

sections タグのフォーマット