🧰 ユーティリティ初級

increment・decrement タグ（変数カウント）

Liquid の increment タグと decrement タグを使い、変数を1ずつ増減させるコード例。Prettier フォーマッタでの改行処理を検証するテストスニペット。

用途

ループ内でカウンター変数を管理したい、または商品リストに連番を振りたいときに使う。Prettier による自動フォーマット時にタグ名が破壊されないことを確認するテスト用途。

設置場所

このコードはテストファイルのため、実運用ページには貼り付けない。increment・decrement の基本動作を学ぶ際の参考例として、任意の .liquid ファイルで `{% increment counter %}` または `{% decrement counter %}` の形で活用できる。

注意点

increment と decrement は Liquid グローバルスコープで動作するため、同じ変数名を複数箇所で使うと値が共有される。ローカル変数として分離したい場合は assign タグで別変数を作成して管理する。Prettier のプリント幅設定（printWidth: 1）を極端に狭くしても、タグ名自体は改行で破壊されないことがこのテストの検証ポイント。

タグ:incrementdecrementvariablecounterliquid-tag

コード

14 行 / 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/fixed.liquid
Repository:: https://github.com/Shopify/theme-tools
License:: MIT

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

increment・decrement タグ（変数カウント）

コード

出典・ライセンス

関連項目

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

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

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

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

Vue.js属性のLiquid整形

sections タグのフォーマット