【JS】importの順番を並び替えるプラグインはprettier-plugin-sort-importsがおすすめ

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

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

結論

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

npm

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

yarn

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

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

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

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

.vscode/settings.json

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

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

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

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

あらためて感じる、

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

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