【JS】importの順番を並び替えるプラグインはprettier-plugin-sort-importsがおすすめ
こんにちは!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が無いという理由だけで他言語が書けなくなります。以上。
LINK
TAGS
LATESTS
POPULAR
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介