🧰 ユーティリティ上級

Prettier 形式無視属性の検証

Liquid テンプレートの HTML 属性フォーマッティングで Prettier の形式無視コメント（`` および `{% # prettier-ignore-attribute %}`）が正しく機能するかを検証するテストファイル。複数の属性や Liquid 条件分岐を含む要素の自動整形を制御する。

用途

Prettier プラグイン開発時に、形式無視指定が HTML 属性と Liquid 構文の両方で確実に動作することを確認する場面。テーマ構築過程での自動フォーマッティングツール統合時に参考。

設置場所

このファイルは theme-tools リポジトリのテスト用であり、実際のテーマに貼り付けるものではない。参考として、プロジェクトの `.prettierignore` または Liquid ファイル内で `` コメントを挿入したい箇所の直前に配置する。

注意点

このテストは Prettier の Liquid プラグイン開発向けであり、実運用テーマでは通常不要。形式無視コメントは printWidth や indent 設定の自動適用をスキップするため、属性の可読性が低下する可能性がある。Liquid インラインコメント(`{% # ... %}`)での形式無視指定はプラグインのバージョンに依存し、全環境で動作保証されない点に注意。

タグ:prettierformattinghtmlattributeliquid-commenttest

コード

49 行 / liquid

It should be typo-proof and indent attributes
printWidth: 1
<!-- prettier-ignore-attribute -->
<p
  (mouseup)=" wat " (mousedown)=" wat "
>
  hello
</p>
<!-- prettier-ignore-attributes -->
<p
  (mouseup)=" wat " (mousedown)=" wat "
>
  hello
</p>

It should respect html whitespace sensitivity
printWidth: 1
<!-- prettier-ignore-attributes -->
<a
  (mouseup)=" wat " (mousedown)=" wat "
  >hello</a
>

It should print all attributes as is (pw40)
printWidth: 40
<!-- prettier-ignore-attribute -->
<a (mouseup)=" wat " (mousedown)=" wat "
  >hello</a
>

It should respect indentation and multiple attributes per line input
printWidth: 1
<!-- prettier-ignore-attributes -->
<a
  [[#if Something]]
    href="abc"
  [[/if ]]
  >hello</a
>

It should work with Liquid inline comments
printWidth: 1
{% # prettier-ignore-attribute %}
<p
  (mouseup)=" wat " (mousedown)=" wat "
>
  hello
</p>

出典・ライセンス

Source:: Shopify/theme-tools/packages/prettier-plugin-liquid/src/test/prettier-ignore-attribute/fixed.liquid
Repository:: https://github.com/Shopify/theme-tools
License:: MIT

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

Prettier 形式無視属性の検証

コード

出典・ライセンス

関連項目

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

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

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

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

Vue.js属性のLiquid整形

sections タグのフォーマット