こんにちは！importといえば輸入のイメージがあったMizutani(@sirycity)です。JavaScriptと出会ってからは完全にimport=読み込みになった。

今日はそんなimportの順番を並び替えるprettierのプラグインの紹介です。

結論

@trivago/prettier-plugin-sort-importsを使いましょう。

npm i -D @trivago/prettier-plugin-sort-imports

yarn add -D @trivago/prettier-plugin-sort-imports

ライブラリをインストールしたらそれで終了。設定不要。あとはprettierを実行すれば勝手にimportが並び替わります。

類似のライブラリ

eslint-plugin-import

ESLint側で並び替えるやつです。昨今のフロントエンドではESLint+Prettierなんて当たり前すぎる構成なのでこっちでも問題はないかと思います。が、一応思想としてESLintはLinter、Prettierはコードフォーマッターとして疎結合に保つのが良いかと思うので僕は使用していません。

VSCodeの機能

VSCodeの設定ファイルにこいつを書けばOK。

"editor.codeActionsOnSave": {
  "source.organizeImports": true
}

ただこれだとVSCodeにロックインします。開発環境がエディタにロックインするのはあんまりアレなのでこっちも僕は使ってないです。まあ殆どの人がVSCodeだと思うけどね。

importの並び替えって公式で対応しないの？

しないそうです。importの並びによって挙動が変わることがあるため、Prettierのコードフォーマッターとしての哲学的にはナシなんだって(要出典)。まあ納得できます。

おまけ

webpackとかtsconfigを使ってaliasを付けている人は今回のプラグインを使う場合aliasに~を用いると綺麗に並び替えられます。aliasは@を使ってる人も多いと思うけど、こっちだとコンポーネントの読み込みが一番上に来ちゃったりでちょっと見にくい。

さいごに

あらためて感じる、

Prettierのクオリティが高すぎる

Prettierが無いという理由だけで他言語が書けなくなります。以上。