🧰 ユーティリティ初級

Prettier Liquid プラグイン括弧位置テスト

Prettier の Liquid プラグインで HTML 要素の閉じ括弧を同一行または別行に配置するフォーマット設定。bracketSameLine オプションの動作確認用テストファイル。

用途

テーマコードを自動フォーマットするとき、要素の属性が長くなった場合の括弧位置をプロジェクト方針に統一したい場合。

設置場所

このファイル自体はテストファイルであり、実装に直接貼り付けるものではない。プロジェクト root の .prettierrc.json で `bracketSameLine: true` または `false` を設定し、IDE のフォーマッタが自動適用するようにする。

注意点

このファイルはテスト用のフィクスチャであり、実際のテーマ開発では .prettierrc.json 設定ファイルを作成して bracketSameLine オプションを指定する必要がある。printWidth（デフォルト 80）との組み合わせで括弧位置が決まるため、属性の幅によって動作が変わる可能性がある。Liquid タグと HTML タグの混在環境では Shopify 公式プラグインのバージョンを確認して互換性を確保する。

タグ:prettierformattingconfigtest-fixturelinting

コード

19 行 / liquid

It should print the bracket on the same line
bracketSameLine: true
printWidth: 1
<div
  attr="1"
  attr2="2">
  click
</div>

It should print the bracket on a different line
bracketSameLine: false
printWidth: 1
<div
  attr="1"
  attr2="2"
>
  click
</div>

出典・ライセンス

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

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

Prettier Liquid プラグイン括弧位置テスト

コード

出典・ライセンス

関連項目

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

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

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

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

Vue.js属性のLiquid整形

sections タグのフォーマット