Astroファイルのimport文をフォーマットするPrettierプラグインを作りました

はじめに

Astroファイルのimport文をフォーマットするPrettierプラグインを作りました。

普段、TypeScriptファイルなどのimport文をフォマットするためにprettier-plugin-organize-importsというPrettierプラグインを使用しています。Astroファイルに対しても同様の機能がほしいと思ったのがきっかけで作成しました。

このプラグインを使用すると、以下のようにimport文がソートされます。

インストール方法

まずは、依存関係のあるパッケージとともに、プラグインをインストールします。

npm install -D prettier typescript prettier-plugin-astro-organize-imports
# or
yarn add -D prettier typescript prettier-plugin-astro-organize-imports
# or
pnpm add -D prettier typescript prettier-plugin-astro-organize-imports

次に、Prettierの設定ファイルを編集します。ここでは、.prettierrcを編集する例を記載します。

.prettierrc

{
  "plugins": ["prettier-plugin-astro-organize-imports"],
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro"
      }
    }
  ]
}

Prettierは公式ではAstroファイルをサポートしていないため、prettier-plugin-astro-organize-importsが提供するastroパーサーを使用するように設定しています。

これでインストールは完了です。Prettierのフォーマットコマンドを実行すると、Astroファイルのimport文がフォーマットされるはずです。

prettier-plugin-astroなどの他のAstroファイル用プラグインがインストールされている場合、プラグインの自動ロード機能によってエラーが発生する可能性があります。そのような問題を避けるためには、後述のプラグインの自動ロードを無効にする設定を行ってください。

他のPrettierプラグインとの互換性

他にも、Astroファイルに対して機能するPrettierプラグインとして、以下のものがあります。

• prettier-plugin-astro
• prettier-plugin-tailwindcss

これらのプラグインと併用する場合には、以下のような設定が必要です。

• prettier-plugin-astro-organize-importsを最後に読み込む
• pluginSearchDirsオプションをfalseに設定し、プラグインの自動ロードを無効にする

.prettierrc

{
  "plugins": [
    "prettier-plugin-astro",
    "prettier-plugin-tailwindcss",
    "prettier-plugin-astro-organize-imports"
  ],
  "pluginSearchDirs": false,
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro"
      }
    }
  ]
}

参考にしたPrettierプラグイン

prettier-plugin-organize-imports

.js, .jsx, .ts, .tsx, .vueファイルのimport文をフォーマットするプラグインです。import文をフォーマットする処理を実装する上で参考にしました。

prettier-plugin-tailwindcss

Tailwind CSS用のプラグインで、クラスをソートするものです。他のPrettierプラグインと互換性を持たせる方法を参考にしました。

prettier-plugin-astro

Astroファイルをフォーマットする公式プラグインです。

さいごに

Astroファイルのimport文をフォーマットするPrettierプラグインであるprettier-plugin-astro-organize-importsを紹介しました。

Astroで開発をしている方は、ぜひ試していただけると嬉しいです。