tsのimport順を自動で整えてくれる prettier plugin sort imports

	prettier-plugin-sort-imports	prettier-plugin-organize-imports
導入のしやすさ	◯	◎
importの並び順ルールの定義	◯	✕
importのソート	◯	◯
冗長なimportをまとめる	✕	◯
未使用のimportの削除	✕	◯

理由としましては表の「✕」が付いている

冗長なimportをまとめる
未使用のimportの削除

が欲しいから、となります

検証した環境

1	prettier	3.2.5
2	@trivago/prettier-plugin-sort-imports	4.3.0

インストールと設定

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

prettier.config.js

module.exports = {
  plugins: ['@trivago/prettier-plugin-sort-imports'],
}

この2点のみで設定完了！

Prettierを実行すると

自動的にimport順が変わります！

オプション

prettierの設定ファイルに記述することで設定を変更する事が出来ます

prettier.config.js

module.exports = {
  plugins: ['@trivago/prettier-plugin-sort-imports'],
  importOrder: ['^@core/(.*)$', '<THIRD_PARTY_MODULES>', '^@server/(.*)$', '^@ui/(.*)$', '^[./]'],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true,
}

importOrder

記載した順番通りに並び替わります

importOrder: ['^@core/(.*)$', '<THIRD_PARTY_MODULES>', '^@server/(.*)$', '^@ui/(.*)$', '^[./]'],

<THIRD_PARTY_MODULES> が特殊な記述で、

例えば以下の記述であれば clsx や react が該当します

import { initializeApp } from '@core/app'
 
import clsx from 'clsx'
import { useRef, useState } from 'react'
import React from 'react'
 
import { createConnection } from '@server/database'

importOrderSeparation

trueにすると上記で指定したグループ毎に改行が入ります

importOrderSeparation: true,

importOrderSortSpecifiers

trueにすると同じimport内でソートしてくれます

importOrderSortSpecifiers: true,

// before
import { useState, useRef } from 'react'
 
// after
import { useRef, useState } from 'react'

その他のオプションは公式GitHubを参照下さい

trivago

prettier-plugin-sort-imports

A prettier plugin to sort imports in typescript and javascript files by the provided RegEx order.

119

TypeScript

prettier plugin organize importsと比較

最後にコードも合わせて prettier plugin organize imports と比較してみます

// 実行前のコード
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>
  )
}

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'

// prettier plugin sort imports
import { initializeApp } from '@core/app'
 
import clsx from 'clsx'
import { useRef, useState } from 'react'
import React from 'react'
 
import { createConnection } from '@server/database'
 
import { SampleComponent } from '@ui/sample/SampleComponent'

// prettier plugin organize imports
import { initializeApp } from '@core/app'
import { SampleComponent } from '@ui/sample/SampleComponent'
import clsx from 'clsx'
import React, { useState } from 'react'

どちらもimportの並び替えは可能
冗長なimportをまとめる、未使用のimportの削除は organize-imports のみ可能

となります。

最後に冒頭で記載した表を再度記載しておきます 📝

	prettier-plugin-sort-imports	prettier-plugin-organize-imports
導入のしやすさ	◯	◎
importの並び順ルールの定義	◯	✕
importのソート	◯	◯
冗長なimportをまとめる	✕	◯
未使用のimportの削除	✕	◯

最終的にimport周りの調整に関して私は以下の記事に書いた内容に落ち着きました

劇的改善！Prettier + ESLintでimport周りを自動で整える