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

投稿日
/
更新日
tsのimport順を自動で整えてくれる prettier plugin sort imports

以前Prettierのimportを整えてくれる prettier plugin organize imports について記載しました




類似のプラグインで prettier plugin sort imports なるものを発見したため試してみました!


2024/03/29現在スター数だと prettier plugin sort imports が圧倒的に多かったりします

A prettier plugin to sort imports in typescript and javascript files by the provided RegEx order.
3.3k
129
TypeScript
Make Prettier organize your imports using the TypeScript language service API.
1.1k
32
JavaScript



先に結論を記載すると残念ながら私はこのプラグインは使わないかも、、 と思いました。

prettier-plugin-sort-importsprettier-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を参照下さい

A prettier plugin to sort imports in typescript and javascript files by the provided RegEx order.
3.3k
129
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-importsprettier-plugin-organize-imports
導入のしやすさ
importの並び順ルールの定義
importのソート
冗長なimportをまとめる
未使用のimportの削除

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

プロフィール画像
Yuki Takara
都内でフリーランスのエンジニアをやってます。フロントとアプリ開発メインに幅広くやってます。