Shopify LiquidのVS Codeの拡張機能 おすすめ

PROGRAMMING

こんにちは、フロントエンドエンジニアの YOSUKE です。

Shopifyのカスタマイズするためのコード書くの、管理画面からのコード編集からだと書きずらいので、、、
Theme kit でローカル環境開発して、そして自分の好きなEditer VS Codeで書けるようにしました。

そして、いざVS Codeで書こうと思ったら、真っ白なんですね Liquid ( ゚д゚)

なので、拡張機能を実装しました。

おすすめ拡張機能とEmmet

拡張機能

Shopify Liquid Template Snippets


鉄板ですね!!

Liquid Languages Support


入れときました。

Emmet

あと、Emmet機能を持たせないとコード書くとき大変なので

【Macユーザー】 左下歯車マーク → 設定 → 検索窓に「emmet」を入力して検索 → 「setting.jsonで編集」をクリック → JSONファイルが表示される
【Windowsユーザー】 ファイル → 基本 → 設定 → 検索窓に「emmet」を入力して検索 → 「setting.jsonで編集」をクリック → JSONファイルが表示される

表示された JSON ファイルに


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

と付け加えておきましょう!!

やっぱEmmetないとね!!

補足設定

ShopifyテーマでSass(2020年11月に非推奨)は、theme.scss.liquidになると、同じように真っ白になるので、

Emmetを設定するのと同じように、

表示された JSON ファイルに


"files.associations": {
            "*.scss.liquid": "scss"
    }

と付け加えると解決です!!