🧑‍🚀

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

2023/07/02に公開

npm

Prettier

Astro

tech

はじめに

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プラグインとの互換性

他にも、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で開発をしている方は、ぜひ試していただけると嬉しいです。

GitHubで編集を提案