ReactやNext.jsで開発をしていると、
import文がごちゃごちゃしてくること、ありませんか？
-
react,next,@/components/...,../utils/...などが混在していて読みにくい… - 手動で並び替えるのは面倒…
今回は、保存するだけでimportを自動整列できる環境構築方法を紹介します。
📌 使用ツール
- Prettier：コード整形ツール
-
@trivago/prettier-plugin-sort-imports：import順を自動で並び替え -
prettier-plugin-tailwindcss：Tailwindのクラスも自動整形（任意）
📌 導入手順
① パッケージのインストール
npm install -D prettier @trivago/prettier-plugin-sort-imports
② Prettier設定ファイルを作成
プロジェクトルートに prettier.config.js を作成：
my-app/
├── node_modules/
├── public/
├── src/
│ └── app/
│ └── ...
├── .vscode/
│ └── settings.json ← VSCodeの保存設定
├── .gitignore
├── package.json ← npmスクリプトや依存管理
├── tsconfig.json ← TypeScriptの設定
├── tailwind.config.ts ← Tailwindの設定
├── prettier.config.js ← ✅ ←← ここに置く！
└── README.md
module.exports = {
plugins: [
"@trivago/prettier-plugin-sort-imports",
],
importOrder: [
"^react",
"^next",
"<THIRD_PARTY_MODULES>",
"^@/app/(.*)",
"^@/components/(.*)",
"^@/utils/(.*)",
"^[./]",
],
importOrderSeparation: true,
importOrderSortSpecifiers: true,
};
③ VSCode設定にフォーマットを追加
.vscode/settings.json に以下を追記：
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
これで保存時に自動で整形が効くようになります。
📌 並び替えの例
Before
import z from "zod";
import { useForm } from "react-hook-form";
import { createClient } from "@/utils/supabase/clients";
import React from "react";
import Button from "@/app/components/button/Button";
After
import React from "react";
import { useForm } from "react-hook-form";
import z from "zod";
import Button from "@/app/components/button/Button";
import { createClient } from "@/utils/supabase/clients";
📌 注意点
- コメントの複製を防ぐため、コメントアウトは
"use client"やimport文の下に記載してください。
（Prettierのimport並び替え時に、先頭コメントが複製される不具合を回避するため）
📌 おわりに
importの順序を自動で整えるだけで、コードの見通しや可読性が大幅にアップします！
まだ導入していない方はぜひ試してみてください！