🧰 ユーティリティ初級

リスト要素の整形ルール

Prettier プラグインでの HTML リスト要素(<ul>、<ol>、<li>)の自動改行・整形ルールを定義したテスト用スニペット。長い行は自動的に改行され、短い行はそのまま保持される。

用途

Liquid テンプレート内のリスト構造を Prettier で一貫して整形するときの改行・折り返しルール確認。ナビゲーションメニューや商品属性リストなど、マークアップ品質を統一したい開発環境で。

設置場所

このスニペット自体はテスト用・リファレンス用なので、実装ファイルには直接ペーストしない。代わりに、プロジェクトの .prettierrc.json で liquid プラグイン設定を確認し、リスト要素の改行ルール（常に改行 vs 行長に応じた改行）をチーム基準に合わせて調整する。

注意点

このコードは Prettier の prettier-plugin-liquid テストケースであり、本番環境のテンプレートではない。実際のリスト構造を整形する場合、Prettier のバージョンとプラグイン設定がプロジェクト全体で統一されていることを確認する。Liquid 内のリスト要素の改行ルールがストアのマークアップガイドラインと矛盾していないか、導入前にプレビューストアで動作検証する。

タグ:prettierhtml-listformattinglintingcode-style

コード

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

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

リスト要素の整形ルール

コード

出典・ライセンス

関連項目

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

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

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

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

Vue.js属性のLiquid整形

sections タグのフォーマット