Shopify LiquidのVS Codeの拡張機能 おすすめ
こんにちは、フロントエンドエンジニアの YOSUKE です。
Shopifyのカスタマイズするためのコード書くの、管理画面からのコード編集からだと書きずらいので、、、
Theme kit でローカル環境開発して、そして自分の好きなEditer VS Codeで書けるようにしました。
そして、いざVS Codeで書こうと思ったら、真っ白なんですね Liquid ( ﾟдﾟ)
なので、拡張機能を実装しました。
おすすめ拡張機能とEmmet
プログラミング 継続211日目 ▶️
Shopify Theme 開発復習
＜ローカル環境構築＞
ShopifyのTheme kitをインストールエディター（VS CODE）
JSONに
"emmet.includeLanguages": { "liquid":"html"}
でLiquid対応拡張機能
①Shopify Liquid Template Snippets
②Liquid Languages Support
がおすすめ— YOSUKE＠TRAVELER｜Webエンジニア × Shopify Developer (@YOSUKETRAVELER) May 2, 2020
拡張機能
Shopify Liquid Template Snippets
Shopify Liquid Template Snippets – Visual Studio Marketplace
Extension for Visual Studio Code – Shopify Liquid Template snippets
鉄板ですね！！
Liquid Languages Support
Liquid Languages Support – Visual Studio Marketplace
Extension for Visual Studio Code – Liquid Languages Syntax Highlighter
入れときました。
Emmet
あと、Liquidファイルでコード書くとき、Emmet機能を持たせないと大変なので
【Macユーザー】 左下歯車マーク → 設定 → 検索窓に「emmet」を入力して検索 → 「setting.jsonで編集」をクリック → JSONファイルが表示される
【Windowsユーザー】 ファイル → 基本 → 設定 → 検索窓に「emmet」を入力して検索 → 「setting.jsonで編集」をクリック → JSONファイルが表示される
表示された JSON ファイルに
"emmet.includeLanguages": {
"liquid":"html"
}
と付け加えておきましょう！！
やっぱEmmetないとね！！
補足設定
Shopifyテーマで、CSS,SCSS（2020年11月に非推奨）,JSのファイルが、〇〇.css.liquidや、〇〇.js.liquidで入っているテーマになると、そのファイルは同じように真っ白になるので、
Emmetを設定するのと同じように、
表示された JSON ファイルに
"files.associations": {
"*.css.liquid": "css",
"*.scss.liquid": "scss",
"*.js.liquid": "js"
}
と付け加えると解決です！！
上記のシンタックスハイライトを、拡張機能で入れるとすると、下記がおすすめです♫
Liquid – Visual Studio Marketplace
Extension for Visual Studio Code – Syntax highlighting, formatting and snippet support for the liquid template language. Supports both Jekyll and Shopify variations.