以前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-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を参照下さい
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-imports | prettier-plugin-organize-imports | |
---|---|---|
導入のしやすさ | ◯ | ◎ |
importの並び順ルールの定義 | ◯ | ✕ |
importのソート | ◯ | ◯ |
冗長なimportをまとめる | ✕ | ◯ |
未使用のimportの削除 | ✕ | ◯ |
最終的にimport周りの調整に関して私は以下の記事に書いた内容に落ち着きました