Shopify

VSCodeでEmmetを使う方法【Shopify Liquid】

初めてliquidファイルをVSCodeで編集するときは、ちょっとした設定をしないとEmmetが使えません。

その設定をしなしと、いつも通り「h1」+Tabキーを押してもスペースが入力されるだけでh1タグが展開されません。

Emmetが使えないとコーディング速度に大きく影響しますよね。

今回はVSCodeでShopify LiquidのEmmetを使う方法を解説します。

settings.jsonを開く

設定はsettings.jsonというファイルに記述します。

settings.jsonファイルの開き方は以下の通りです。

・ファイル → 基本設定 → 設定 の順にクリック
設定画面のファイルの場所を示す画像

・検索ボックスに「emmet」と入力 → 「setting.jasonで編集」をクリック
setting.jsonファイルの開き方

・setting.jsonに以下の記述を追記します

“emmet.includeLanguages”: {
 ”liquid”:”html”
}

記述するコード

最後にファイルを保存すれば完了です!