More than 1 year has passed since last update.

Prettier と plugin だけで Node.js のモジュール import の並び順を整える

Last updated at 2023-06-16Posted at 2022-06-04

はじめに

Prettier を導入しているが、ESLint が導入されていない JavaScript/TypeScript の小さなプロジェクトで import の並び順を揃えたいニーズがあったため、追加したライブラリと設定を記載します
ESLint を導入することで解消も可能でしたが、 ESLint を入れる程大きなプロジェクトではないため見送りました

% sw_vers
ProductName:    macOS
ProductVersion: 12.4
BuildVersion:   21F79
% node -v
v16.7.0
% yarn -v
1.22.15

今回追加するのは trivago が開発している prettier-plugin-sort-imports です

該当のプロジェクトでは yarn を利用していたため以下コマンドで追加を行いました
npm を利用している場合読み替えていただけると

yarn add --dev @trivago/prettier-plugin-sort-imports

ライブラリを追加するだけでデフォルトの設定が有効になります
設定を変更する場合は Prettier の設定ファイルにルールを記載していきます

プロジェクトによって設定ファイル名や形式が異なる場合もあります
必要に応じて公式ドキュメントを参照してください

ちなみに私が設定したルールは以下 2 つです
※ 今回追加した設定のみ記載しています

.prettierrc.json

{
  "importOrder": ["^@foo/(.*)$", "^[./]"],
  "importOrderSeparation": true
}

他にもルールは存在しますが追加した 2 ルールだけ説明を追加します

ルール名	ルール説明
`importOrder`	左から順に import 順を並び替えます
`importOrderSeparation`	`importOrder` を 1 つのグループとしその前後に改行を追加します

以下のようなコマンドを実行し、整形を行います

yarn prettier --write .

コマンドの実行結果
Before, After 例を載せておきます

before.ts

import hoge from "./"
import foo from "@foo/baz"
import foo from "@foo/bar"

after.ts

import foo from "@foo/bar"
import foo from "@foo/baz"

import hoge from "./"