🧰 ユーティリティ初級

increment・decrement タグ（変数の増減）

Liquid の increment・decrement タグを使用してテンプレート内でカウンタ変数を増減させるテストコード。タグの記述形式の違いがコード整形後も変数名を保持することを検証する。

用途

ループ内でカウント番号を自動採番したり、ページ内の同じ要素に連続した ID を付与したいときに使用する。Prettier でコード整形後も変数名が正しく解析されるかの動作確認。

設置場所

このコードはテストケースのためテーマ本体には貼らない。Shopify theme-tools / Prettier プラグイン開発時の解析テストとして packages/prettier-plugin-liquid/src/test/liquid-tag-increment/index.liquid に配置される。

注意点

increment・decrement は Liquid グローバルスコープで動作するため、同じ変数名を複数の箇所で使うとカウンタが連続する。変数は整数のみ対応で、初期値を 0 として自動作成される。Prettier 整形時にタグの空白やわたり・折返しが崩れないよう検証することが目的であり、スペース削除や行分割が変数名の解析に影響しないことが前提。

タグ:incrementdecrementcountervariableprettier-test

コード

18 行 / liquid

It should never break a name
printWidth: 1
{% increment  varName  %}
{% increment varName %}
{%increment varName%}
{%- increment
varName
-%}

It should never break a name
printWidth: 1
{% decrement  varName  %}
{% decrement varName %}
{%decrement varName%}
{%- decrement
varName
-%}

出典・ライセンス

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

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

increment・decrement タグ（変数の増減）

コード

出典・ライセンス

関連項目

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

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

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

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

Vue.js属性のLiquid整形

sections タグのフォーマット