🧰 ユーティリティ初級

Prettier フォーマッター無視属性の設定

Liquid テンプレート内の HTML 属性フォーマットを Prettier から除外するテスト用スニペット。`prettier-ignore-attribute` コメントで特定要素の属性整形をスキップし、手書き形式を保持する。

用途

Angular 構文やカスタム属性（括弧記号など）を含む HTML 要素で、Prettier の自動整形が邪魔になるとき。属性の間隔やインデントを手動制御したい場合に用いる。

設置場所

このコード自体はテスト用ファイルであり、本番テンプレートでは不要。`prettier-ignore-attribute` または `prettier-ignore-attributes` コメントを HTML タグ直前に記述し、整形対象から除外したい要素を下に配置する。

注意点

コメント形式は `` と `{% # prettier-ignore-attribute %}` の2種類に対応し、記法（単数/複数形）を統一する必要がある。このディレクティブは Prettier 2.2.0 以降で有効なため、プロジェクトの Prettier バージョンを確認する。無視範囲は直下の1要素のみに適用され、複数行にまたがるときは各行の直前に何度も指定する。

タグ:prettierformattinghtml-attributeliquid-commentlinter

コード

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

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

Prettier フォーマッター無視属性の設定

コード

出典・ライセンス

関連項目

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

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

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

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

Vue.js属性のLiquid整形

sections タグのフォーマット