tsのimport順はルールを決めていないと人それぞれ変わってくるもの。
「自分はこういうルールで並べているけど他の人はこう並べてる、うーーん」といった悩みを持ったことをある方も多いと思います。
prettier plugin organize importsを使うと
- importの順番を自動で並び替える
- 使っていないimportを削除する
- 冗長なimportをまとめてくれる
ということを自動で実行してくれます！
機械的に並び替えてくれるので、心配や悩み事が減ります！
// before
import { initializeApp } from '@core/app'
import { SampleComponent } from '@ui/sample/SampleComponent'
import { createConnection } from "@server/database"
import { useState, useRef } from 'react'
import React from 'react'
import clsx from 'clsx'
export function Example() {
const [state, setState] = useState<string>('initial state')
const reference = React.useRef<HTMLDivElement>(null)
const app = initializeApp()
return (
<div className={clsx('font-bold px-8 py-6')}>
<SampleComponent />
</div>
)
}// after
import { initializeApp } from '@core/app'
import { SampleComponent } from '@ui/sample/SampleComponent'
import clsx from 'clsx'
import React, { useState } from 'react'
export function Example() {
const [state, setState] = useState<string>('initial state')
const reference = React.useRef<HTMLDivElement>(null)
const app = initializeApp()
return (
<div className={clsx('font-bold px-8 py-6')}>
<SampleComponent />
</div>
)
}先に私の結論としまして、後半に記載しているその他の項目の3点の理由により
- 個人でサッと作りたい時には最適そう
- チームで導入する場合で厳格にルールを決めたい場合は他ツールを使うかも
というのが私の所感でした
最終的に私は以下の記事に書いた内容に落ち着きました
検証した環境
| 1 | prettier | 3.2.5 |
| 2 | prettier-plugin-organize-imports | 3.2.4 |
インストールと設定
npm install -D prettier-plugin-organize-importsmodule.exports = {
plugins: ['prettier-plugin-organize-imports'],
}この2点のみで設定完了！
Prettierを実行すると
不要なimportは削除され、自動的にimport順が変わり、react周りの冗長だったimportが自動的にひとまとめになっていますね！
その他
私が感じた特徴やメリデメを書いていきます
対応している拡張子
サポートしているファイル拡張子は以下5種類
.js・.jsx・.ts・.tsx・.vue
Issueを見ると svelte や astro をサポートを望んでいる声があるようです
- https://github.com/simonhaenisch/prettier-plugin-organize-imports/issues/39
- https://github.com/simonhaenisch/prettier-plugin-organize-imports/issues/89
実際にsvelteはPRも出ているのでサポートされるかも？
（動きがあまりなさそうなのでちょっと怖い・・）私の場合困ることは少なそうだな、と感じつつ、
上記のsvelteやastroを見ると、対応の動きがゆっくりにも見えるので、
いざ「この拡張子に対応してほしい」となった時に中々対応されないなぁと感じる時が来るかもと感じました。
面倒な設定が不要
- Zero config
というのを公式も謳っているだけあって導入はとても簡単です！
ただし自分で並び順を決める、といった細かい設定は出来ません。
例えば「 import React from 'react' 」は必ず1番上に記載する、といったルールを決める事が出来ません
並び順が常に統一的でない
何を言いたいかというと、改行のある/なしで結果が変わる場合があります
// before
import React, { useState } from 'react'
import clsx from 'clsx'
// after
import React, { useState } from 'react'
import clsx from 'clsx'// before
import React, { useState } from 'react'
import clsx from 'clsx'
// after
import clsx from 'clsx'
import React, { useState } from 'react'つまり誰が書いても必ず同じになるわけではなく
改行の有無によっては順番が変わるケースがある、という事です。
急いで作る時なら良さそうですが長く運用する場合だと気になるかも 🤔
