🧰 ユーティリティ上級

Prettier-ignore コメントの適用

Liquid テンプレートで HTML コメント形式（``）と Liquid コメント形式（`{% # prettier-ignore %}`）の prettier-ignore 指定に対応したテストコード。コード整形ツール prettier がこの指定を認識し、該当行のフォーマット処理を無視する動作を検証している。

用途

prettier-plugin-liquid で Liquid テンプレートのコード整形時に、特定の行やタグのフォーマットを意図的にスキップしたい場合。HTML タグと Liquid タグが混在する場面で、どちらのコメント形式でも無視指定が有効に動作することを確認したいとき。

設置場所

prettier-plugin-liquid の開発環境テストスイート内に配置。実際の利用者は `.liquid` ファイル内で `` または `{% # prettier-ignore %}` をフォーマットをスキップしたい行の直上に記述する。

注意点

このコードはテストケース集であり、実装スニペットではない。prettier-ignore が有効に動作するには prettier と prettier-plugin-liquid のバージョンが最新に保たれていることが必須。`` は HTML 構文のため、Liquid のみのコンテキストでは `{% # prettier-ignore %}` を使う方が安全。複数行にわたるブロック（`{% capture %}` など）を無視する場合は、開始行にコメントを記述するだけで対象ブロック全体が無視される。

タグ:prettiercode-formattingliquid-commenthtml-commenttest-case

コード

48 行 / liquid

It should respect the html prettier-ignore comment
printWidth: 1
<!-- prettier-ignore -->
{% cycle a,b,c %}

It should respect the html prettier-ignore comment on tags
printWidth: 1
<a>
  <!-- prettier-ignore -->
  <b>{% cycle a,b,c %}</b
  >hi
</a>

It should respect the html prettier-ignore comment on liquid tags
printWidth: 1
<a>
  <!-- prettier-ignore -->
  {%capture foo%}{% for x in (0 .. 1) %}{% cycle a,b,c %}{% endfor %}{%endcapture%}
</a>

It should respect the liquid prettier-ignore comment
printWidth: 1
{% # prettier-ignore %}
{% cycle a,b,c %}

It should respect the liquid prettier-ignore comment on tags
printWidth: 1
<a>
  {% # prettier-ignore %}
  <b>{% cycle a,b,c %}</b
  >hi
</a>

It should respect the liquid prettier-ignore comment on liquid tags
printWidth: 1
<a>
  {% # prettier-ignore %}
  {%capture foo%}{% for x in (0 .. 1) %}{% cycle a,b,c %}{% endfor %}{%endcapture%}
</a>

It should respect the liquid prettier-ignore comment on tags (and maintain whitespace semantic meaning)
printWidth: 1
<a>
  {% # prettier-ignore %}
  {%capture foo%}{% for x in (0 .. 1) %}{% cycle a,b,c %}{% endfor %}{%endcapture%}
  {{- 'hi' }}
</a>

出典・ライセンス

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

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

Prettier-ignore コメントの適用

コード

出典・ライセンス

関連項目

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

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

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

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

Vue.js属性のLiquid整形

sections タグのフォーマット