🧰 ユーティリティ初級

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

Prettier Liquid プラグインが HTML のリスト要素（ul / ol）をどのように整形・改行するかをテストするサンプルコード。短い行は1行、長い行は複数行に自動で分割される動作を検証する。

用途

Liquid テンプレートのコード整形ルール確認、または Prettier の li タグ自動改行ルールの開発・テスト時に参照する。

設置場所

本コードは本番テーマに貼り付けるものではなく、prettier-plugin-liquid の単体テスト / 動作検証用サンプルである。リスト整形の挙動を確認したい場合は、theme.liquid またはテーマセクション内の任意のリスト要素で Prettier の動作を試す。

注意点

このコードは Prettier プラグインのテストアセットであり、実際のストアフロント表示を目的としていない。リスト整形ルールはプロジェクトの Prettier 設定（.prettierrc）に依存するため、異なる環境では改行位置が変わる可能性がある。本番テーマで HTML リストを使う場合は、アクセシビリティ対応（role、aria-label など）を別途追加する。

タグ:prettierformattinghtmllisttest

コード

8 行 / liquid

<ul><li>lists always break</li></ul>
<ol><li>lists always break</li></ol>

<ul>
  <li>really really really really really really really really really really long lines break</li>
  <li>shorter ones don't</li>
</ul>

出典・ライセンス

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

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

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

コード

出典・ライセンス

関連項目

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

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

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

Vue.js属性のLiquid整形

sections タグのフォーマット

範囲オブジェクトの出力と型変換