ロゴテキスト ロゴ

    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.
    3k
    119
    TypeScript
    Make Prettier organize your imports using the TypeScript language service API.
    958
    34
    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.
    3k
    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-importsprettier-plugin-organize-imports
    導入のしやすさ
    importの並び順ルールの定義
    importのソート
    冗長なimportをまとめる
    未使用のimportの削除

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

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