Liquid Snippets by ALSEL
🏗️ テーマ基盤上級

スクリプトタグ内の言語別整形設定

script タグ内の JavaScript、JSON、TypeScript、Markdown などを言語別に自動整形する Prettier プラグイン設定。Liquid 変数が含まれる場合は再インデントにフォールバックする。

用途
テーマファイル内に埋め込まれた script タグの可読性を高めるとき。開発時のコード整形ツール設定として使う。
設置場所
プロジェクトの Prettier 設定ファイル(.prettierrc など)で prettier-plugin-liquid を有効化し、printWidth・useTabs・embeddedSingleQuote などの options を指定。script タグの内容は自動検出される。
注意点
Liquid 変数({{ variable }} など)がスクリプト内に混在する場合は、型推論が失敗して再インデント処理にフォールバックするため、整形結果が完全でなくなる可能性がある。useTabs: true を指定するとタブインデントになるが、そのファイル全体のインデント設定と統一する必要がある。embeddedSingleQuote: false で JavaScript のシングルクォーテーションを保持したい場合は、引用符の変換が抑制される。
タグ:prettiercode-formattingscript-tagtypescriptjsonlinting

コード

65 行 / liquid
It should pretty pring pure JS inside a script tag
printWidth: 20
<script>
  function main() {
    console.log(
      'hello'
    );
  }
  const x =
    100 > 42
      ? x
      : y;
</script>

It should pretty print json inside a script tag
<script type="application/json">
  {
    "a": [1, 2, 3],
    "b": "string"
  }
</script>

It should pretty print typescript
<script type="application/x-typescript">
  type Node = LiquidNode | HtmlNode | TextNode;
  type LiquidNode = LiquidVariableOutput | LiquidTag;
  function print(node: Node) {
    return node.toString();
  }
</script>

It should pretty print markdown (?) why not!?
<div>
  <script type="text/markdown">
# heading

- item
- item
  - item
- item
  </script>
</div>

It should fallback to reindenting when it can't parse the source
(e.g. because of Liquid in JS)
printWidth: 20
<script>
  function main(){console.log({{ drop }});}const x = 100 > 42 ? x : y;
</script>

It should reindent with tabs when useTabs is true
useTabs: true
<script>
	function main(){
	  console.log({{ drop }});
	}
	const x = 100 > 42 ? x : y;
</script>

It should respect embeddedSingleQuote
embeddedSingleQuote: false
<script>
  console.log("hello");
</script>

出典・ライセンス

License:
MIT

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

関連項目

🏗️ テーマ基盤中級

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

セクションの schema ブロック内でカスタムブロックタイプを定義する方法を示すサンプル。@theme と _private というプレフィックスで異なるブロック種別を宣言する。

📁 theme-tools·MIT·7
🏗️ テーマ基盤初級

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

Liquid の section タグを複数行に記述する際の正しいフォーマット例。タグ名を改行で分割しても正しく認識される書き方を示す。

📁 theme-tools·MIT·7
🏗️ テーマ基盤初級

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

Liquid の `layout` タグを使い、テーマのレイアウトファイルを指定する構文。複数のレイアウト候補と whitespace 制御(ダッシュ記号)の使い方を示す。

📁 theme-tools·MIT·8
🏗️ テーマ基盤上級

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

Prettier Liquid プラグインのテストケースで、セクションタグの様々な書式を検証する。異なる間隔・改行・ホワイトスペーストリミングの組み合わせでもセクション名が崩れないことを確認する。

📁 theme-tools·MIT·9
🏗️ テーマ基盤初級

基本的なHTMLレイアウト

Prettier Liquid プラグインのテスト用に作られた最小限の HTML テンプレート。DOCTYPE から body タグまでの基本的なドキュメント構造を示す。

📁 theme-tools·MIT·10
🏗️ テーマ基盤上級

layout タグのフォーマット

Liquid の layout タグの書式をコード品質ツール(Prettier)でフォーマットするテストケース。スペースや改行位置の違いを正規化し、レイアウト名が壊れないことを検証する。

📁 theme-tools·MIT·10