ローカル環境に持ってきた Shopify の liquid ファイルをVSCodeでシンタックスハイライトさせる

こんにちは。WEBデザイナーようこです。

先月、個人の方からECサイト制作のご依頼を頂き、Shopify を使うことに決まりました。

テーマのカスタマイズは、Shopifyの管理画面からできますが・・・
コードの編集はローカルでしたい！

今日は、Shopify のテーマファイルをローカルで編集する準備をしていきます〜。

Theme Kit のインストール

「Theme Kit」をインストールすれば出来るんですね🌼
インストール方法は、下記が参考になります。

Shopify のテーマをローカル環境で触れるようになった！
VS Code で開いてみると・・
ソースが全部灰色〜、パッとみてタグが分からない。

いつものように、タグにハイライトついて欲しいな。
カラフルな方が気分あがるし。

VS Code の設定を変更する

VS Codeの基本設定を次の手順で開きます。

１）「基本設定」→「設定」を開きます。

２）設定の検索フィールドに、「file associations」と入力します。「Files Associations」が見つかります。「項目の追加」を押しましす。

３）項目に「*.liquid」、値に「html」を入力し、OKを押します。

４）リキッドファイルを見ると HTMLファイル として認識され、タグにハイライトされました！やった〜🙌

５）css と javascript も追加しておこう。

これで作業が快適〜！

編集ミスも軽減できて良き。

おまけ：インフラエンジニアの頃、現場で気をつけてたこと

ハイライト付けると編集ミスの軽減になるって話で思い出したことがあるので共有。

トレーナーに教わったこと。

作業をする時は、今触っている環境は「本番環境」なのか「開発環境」なのか見て分かる情報を入れて欲しいな。

何で必要なんですか？

「本番環境」は、今まさにお客さんのサービスが動いていて、利用者が使っている状態。「開発環境」だと思って作業してしまい、「本番環境」が止まってしまった・・というのは良くあるミスなんだ。

なるほど・・。それは恐怖。

ミスを軽減するために、設定画面のテーマカラーを変えたり、開発環境の名前は先頭に「dev（development の略）」と付けてたりしてるんだよ。

設定画面の色変えるのいいですね。

この話を思い出し、WordPress で用意したお客さんの開発環境のテーマカラーを決めて設定しておきました🌼

これで、より安全に作業できるかな〜。

お客さんには直接見えない作業ですが、安心して任せられるポイントの一つになれば嬉しいです。