🏗️ テーマ基盤上級

Prettier Liquid プラグインの HTML 空要素フォーマット仕様

Prettier Liquid プラグインにおける HTML 空要素（img、meta、link など）の改行・インデント処理の仕様書。親タグやタグ間の余白借用ルールと、htmlWhitespaceSensitivity 設定による動作の違いを示す。

用途

Shopify theme-tools を使うテーマ開発者が、コード整形時の HTML 空要素の挙動を理解・検証するときに参照する。Prettier 設定でフォーマットがどう変わるかを確認するテストケース。

設置場所

このコード自体は Prettier Liquid プラグインの自動テストファイルであり、直接テーマに貼り付けるものではない。テーマの prettier.config.js で htmlWhitespaceSensitivity や singleLineLinkTags オプションを設定する際に、期待される整形結果の参考として利用する。

注意点

このファイルは Prettier の設定検証用テストファイルであり、実装コードではない。実際のテーマ開発では .prettierrc.json や package.json の prettier フィールドで htmlWhitespaceSensitivity: "ignore" を指定すると、img や link タグ前後の空白が保持される。singleLineLinkTags: true は link タグを無条件に1行化するため、複数の link タグが集まっているとき推奨値を検討する必要がある。

タグ:prettierformattinghtmlvoid-elementwhitespace

コード

38 行 / liquid

It should borrow parent and close tag parameters
<span
  ><img src="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
></span>

It should not borrow parent and close tag parameters when htmlWhitespaceSensitivity is set to ignore
htmlWhitespaceSensitivity: "ignore"
<span>
  <img src="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa">
</span>

It should borrow prev and next tag parameters
<span
  ><img
  ><img src="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
  ><img
></span>

It should not borrow prev and next tag parameters when htmlWhitespaceSensitivity is set to ignore
htmlWhitespaceSensitivity: "ignore"
<span>
  <img>
  <img src="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa">
  <img>
</span>

It should not add a space before closing tag when there are multiple attributes
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="">
<link rel="canonical" href="{{ canonical_url }}">
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>

It should honor the singleLineLinkTags configuration
singleLineLinkTags: true
printWidth: 1
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>

出典・ライセンス

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

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

Prettier Liquid プラグインの HTML 空要素フォーマット仕様

コード

出典・ライセンス

関連項目

セクションスキーマのカスタムブロック定義

セクション呼び出しのフォーマット

レイアウトテンプレートの指定

Liquid フォーマッター互換のセクション表記

基本的なHTMLレイアウト

layout タグのフォーマット