VS CodeでShopify Liquidの編集をするために必要な準備

  • 2022年6月24日
  • 2022年6月24日
  • Shopify

この記事の所要時間: 2 分

ShopifyパートナーのShintaroです

今回はShopify CLIでローカル環境開発するにあたって、VS CodeでLiquidの編集をするために必要な準備を解説します

まずはVS Codeをダウンロード

なにはともあれ、まずはVS Codeがなければ始まりません

以下のサイトからVS Codeをダウンロードします

https://code.visualstudio.com/

VS CodeでLiquidを編集するのに便利な拡張機能を追加

必須レベルの拡張機能を2つ追加します

Shopify Liquid Template Snippets

→Liquidの入力が楽ちんになる

Liquid

→コードに色がついて読みやすくなる

LiquidにEmmetを追加する

やはりEmmetは必要なので追加します

「左下の歯車」→「設定」→「検索窓にemmetを入力」→「setting.jsonで編集をクリック」→JSONファイルを編集

emmet追加

表示されたJSONファイルに以下のコードを追加します

"emmet.includeLanguages": {
"liquid":"html"
}

VS CodeでShopify Liquidの編集をするために必要な準備
TwitterでEC・Web関連のTipsを発信しています