【Shopify】LiquidファイルにもVSCodeの拡張機能Shopify Liquid Prettierプラグインを使ってPrettierを導入


こんにちは。Gaji-Labo 横田です。Shopify でのテーマ開発では Liquid ファイルを編集しますが、他言語ファイル同様に Liquid ファイルにも Prettier でフォーマットの自動整形を行いたいです。そんな時はエディタ VSCode の拡張機能 Shopify Liquid Prettier プラグインを使うのがおすすめです。

Shopify Liquid Prettier プラグインのインストール

Shopify Liquid Prettier は Yarn や npm でもインストールができますが、今回は VSCode を使用しているチーム間で共通の設定にしたいので、公式ページの通り、エディタの拡張機能 Shopify Liquid をインストールします。Prettier 本体の拡張機能で Shopify Liquid Prettier プラグインを使用することもできるようですが、Shopify Liquid 拡張機能にはデフォルトで Shopify Liquid Prettier プラグインが含まれているのでこちらを選択。

インストールできたら、Shopify Liquid Prettier プラグインを有効にするために、VSCode の .vscode/settings.json に次の設定を追加します。

{
  "shopifyLiquid.formatterDevPreview": true,
  "[liquid]": {
    "editor.defaultFormatter": "Shopify.theme-check-vscode",
    "editor.formatOnSave": true,
  }

これにより、元々パッケージに含めていた Prettier 本体はこのプロジェクトでは不要になるのでアンインストールしました。

% npm uninstall -D prettier  

VSCodeを使用しているチームメンバーにも同様のプラグイン導入を勧めたいので、.vscode/extensions.json も追記。

{
  "recommendations": [
    "Shopify.theme-check-vscode"
  ]
}

以上で Prettier を Liquid ファイルにも走らせることができました。

おわりに

フォーマットを自動整形してくれる Prettier を Shopify Liquid にも適用させ、クオリティを担保できる快適な開発環境を手に入れられました。参考になれば幸いです。


投稿者 Yokota Tomoko

運用やアクセシビリティに配慮したHTML/CSSの設計やコンポーネント作成、スタイルガイドの構築、コードレビュー、組み込み、要件の整理、社内進行管理、顧客とのコミュニケーションまで、ジョインしたチームを前に進めるためにあれこれ担当しています。子育てと仕事のバランスを楽しめるよう、日々模索しています。