【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 にも適用させ、クオリティを担保できる快適な開発環境を手に入れられました。参考になれば幸いです。

Shopifyでのサイト構築やテーマ開発に興味がある方、実践でのポイントを吸収したいと思っている方などにおすすめの内容です。