🧰 ユーティリティ上級

Prettier Liquid プラグインのHTML要素フォーマットテスト

Prettier の Liquid プラグインが HTML タグの折り行・インデント・閉じタグの配置をどう扱うかを検証するテストケース集。属性数や行幅、ネストの深さによるフォーマット動作を確認する。

用途

開発環境で Prettier を使ってコード整形するとき、HTML 要素の折り行ルールがどう適用されるか理解する必要があるとき。テーマ開発時のコード品質チェック自動化に活用する。

設置場所

このコードはテストスイートの一部なので、直接 theme.liquid に貼り付けるものではない。Prettier Liquid プラグインの開発・検証環境で、フォーマッタの動作確認用テストファイルとして参照する。

注意点

これはテストケースであり実行可能なコードではない。printWidth の値（ここでは 30）を変更するとフォーマット結果が大きく変わるため、プロジェクト設定の .prettierrc で統一値を決める。複数の子要素がある場合の折り行判定は line-width 以外に属性の数と内容の複雑さに左右されるため、個別に調整が必要な場合がある。

タグ:prettierformattinghtmllintingtest-case

コード

24 行 / liquid

it should break on html tags that always break
<html><head><link href="hello world"></head><body><main></main></body></html>

it should break if original had line breaks
<div x=1 y=2 z=3></div>
<div
  x=1 y=2 z=3></div>

it should indent child
<div x=1 y=2>Child</div>
<div
  x=1 y=2 z=3>Child</div>

it should not break when it fits on a line
<div x="1" y="2"><div>Hello</div></div>

it should break if there's more than one child on a line
<div x="1" y="2"><div>Hello</div><div>World</div></div>

it should borrow the closing span in this situation
printWidth: 30
<a class="link animate-arrow" ><span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span></a>
<a class="link animate-arrow" ><span class="icon-wrap">&nbsp; aaaaaaaaaaaaaaaaaaaaaaaa </span></a>

出典・ライセンス

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

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

Prettier Liquid プラグインのHTML要素フォーマットテスト

コード

出典・ライセンス

関連項目

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

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

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

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

Vue.js属性のLiquid整形

sections タグのフォーマット