Shopifyのテーマ開発にVSCodeを使うならこのプラグインを入れろ

Shopifyのテーマ開発にVSCodeを使うならこのプラグインを入れろ

公開日:2021年10月10日

更新日:2022年07月02日

みなさんは、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の仕様変更等により、記事の内容どおりに設定ができない場合があります。

株式会社5-bit

2020年1月に、カナダのShopify本社より「Shopifyエキスパート」として認定をいただきました。現在までに累計で50以上のShopifyストアの構築、1000以上の機能開発経験。他社で難しい要件の実装や構築も承ります。

お問い合わせはこちら

Our Contents私たちの情報発信

ShopifyにAmazon Payを導入するメリットや設定方法を解説

Shopifyのテーマ開発環境を構築する

Shopifyのストアフロントフィルタにメタフィールドが追加されたので使ってみた

Shopifyの新着商品一覧に期間限定(公開から〇〇日以内)で商品を掲載する方法

Shopifyの注文情報をGASでCSV出力する方法

Shopifyの全商品一覧(collections/all)に表示される商品を制御する方法

Shopifyテーマ開発にFigmaを使ったらかなり捗った話

Shopifyのクーポンを特定のユーザーにのみ適用させる方法

ブログ一覧