logo

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

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

みなさんは、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を利用することで、作業がかなり捗るかと思います。今後、より良いプラグインを見つけた際には、またシェアしていきたいと思います。

参考サイト

エンジニアリングを進化させる品質メディア:Sqripts

※この記事は2024年07月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容が古くなってしまう可能性があります。

\ShopifyでEC構築を検討中の方へ/

現在、Shopify公式は無料のお試しキャンペーンを実施しています。

Shopify

百聞は一見に如かずといいますが、ネット上で情報収集するよりも、実際にShopifyに触れるほうが何倍も効率が良いでしょう。

下記の案内ページからキャンペーンの詳細をご確認ください。

【150円×1ヶ月】CP実施中!!

サービス

Service

- プロジェクトプラン -

こんな方におすすめ!

  • これからShopifyでECを立ち上げるための支援をしてほしい

  • 自社で取ってきたShopify案件のディレクションや開発業務を任せたい

  • 自社サービスとShopifyを連携させたアプリケーションを作ってほしい

- サポートプラン -

こんな方におすすめ!

  • 自社でShopifyストアを立ち上げてみたが、やはり専門家がいないと厳しいため、相談できるパートナーがほしい

  • 自社で受けたShopify案件の一部を、Shopifyに強い開発者に相談したい

  • 開発してもらったShopifyアプリの保守やメンテナンスをお願いしたい

- SESプラン -

こんな方におすすめ!

  • ストアの改修や更新業務が忙しくなってきたため、色々な業務をお願いできて専門的なスキルを持っている人材がほしい

  • 自社でShopify案件が溢れてしまい、数ヶ月間、スピーディかつ自由に案件を依頼できる外部のパートナーがほしい

事例

Works

ストア開発/支援

Shopify Store

累計100以上のShopifyストア開発経験を基に、商材・業界ごとに無駄のないご提案~実装が可能です。また、既に公開されているShopifyストアを、技術的な観点から保守/サポートさせて頂いております。弊社が構築していないストア様も、ご加入が可能です。

アプリ開発

Shopify App

各ストアに特化したカスタムアプリだけでなく、Shopify App Storeに掲載できる公開アプリ開発のご相談・ご依頼を承っています。例えば、自社サービスで構築しているAPIとShopifyのAPIを連携~Shopify App Storeで公開することで、Shopifyを使用しているEC事業者に自社サービスをリーチさせることができます。