みなさんは、Shopifyのテーマをカスタマイズするのにどのエディタを使っていますか？
今回は、Visual Studio Code ( VSCode ) を使っている方向けにおすすめのプラグインを紹介します。
VSCodeを使っていない人でも、興味がある人は是非試してみてくださいね。
Visual Studio Code ( VSCode )とは
VSCodeを知らない人のために、簡単に紹介します。
VSCodeとは・・・マイクロソフト社が開発しているエディタでオープンソースであり、誰でも無償で利用できるエディタです。日本語化のプラグインを入れることで、慣れ親しんだ言語の表示にすることができます。Windows、MacOS、Linuxに対応しているようです。
Shopifyのテーマ開発にオススメのVSCodeプラグイン4選
1. Shopify Liquid
構文のシンタックスハイライト(強調表示)、コードのフォーマット・補完などをしてくれます。特にセクションファイルはコードが長くなりがちなので、シンタックスハイライトが役に立ちます。
Visual Studio Marketplace:
https://marketplace.visualstudio.com/items?itemName=Shopify.theme-check-vscode
2. Shopify Liquid Template Snippets
定型のコードを出力してくれます。例えば、paginateと入力すると候補が表示されてそれを選択することで、ページネーションの構文が出力されます。詳しくは、マーケットプレースをご覧ください。表示されているgifだけでも便利なことが一目瞭然なはずです。
Visual Studio Marketplace:
https://marketplace.visualstudio.com/items?itemName=killalau.vscode-liquid-snippets
3. Auto Rename Tag
liquidと言えど、ほとんどのコードがhtmlになるかと思います。htmlは<タグ>~</タグ>という構文で記載しますが、コードが大きくなるとタグの変更がなかなかやりづらくなります。そんな時にオススメなのが、このプラグインです。開始タグを変更すると閉じタグも変更してくれるので、閉じタグをうっかり変更ミスしてデザインが崩れてしまう可能性を防いでくれます。
Visual Studio Marketplace:
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
4. Git Lens
Shopify向けではありませんが、Shopify CLIの登場により、Git HubとShopifyテーマの連携が楽になりました。複数人でテーマ開発を行う場合はバージョン管理が必要になるかと思います。そんな時にはGit Hubを使用してバージョン管理をしてみてください。
Git LensはVSCode上でGit管理をするためのプラグインです。commit, push, pullなどのコマンドをボタン操作により実行できます。(もちろん、コマンドラインによる操作も可能です。)
Visual Studio Marketplace:
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
まとめ
いかがでしたでしょうか。Shopifyにもテーマ編集機能は備わっていますが、VSCodeを利用することで、作業がかなり捗るかと思います。今後、より良いプラグインを見つけた際には、またシェアしていきたいと思います。
※この記事は2022年07月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容どおりに設定ができない場合があります。
