Prettierでimportの順番を自動で整理する

背景

フロントエンドPJのimport文は、複数のモジュールをインポートする際に使われます。
しかし、複数のモジュールをインポートする場合、どういう順番でインポートすればコードが見やすくなるのかは悩ましい問題です。
この記事では、PrettierのimportOrderを使って、import文を自動的に整理する方法を紹介します。

prettier-plugin-sort-importsのインストール

PrettierのimportOrder設定は、インポート文を特定の順序に並べ替えるためのものです。
importOrderを使うには、prettier-plugin-sort-importsというプラグインをインストールする必要があります。

npmでインストール

npm install --save-dev @trivago/prettier-plugin-sort-imports

yarnでインストール

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

importOrderの設定

importしたいファイルパスのパターンを列挙し、その順序でimportをソートしてくれます。

例えば、以下のような設定をすると、

{
  "importOrder": [
    "^react",
    "^@?\\w",
    "^[./]"
  ]
}

以下のようにimportがソートされます。

import React from 'react';
import { Button } from '@material-ui/core';
import { useUser } from './hooks';

デフォルトでは、"^[./]"というパターンが設定されていて、相対パスや絶対パスで始まるファイルを意味します。
他のパターンを追加したい場合は、自分のプロジェクトに合わせてカスタマイズしてください。

おまけ

自分がよく使う設定を紹介します。

module.exports = {
  // ...
  importOrder: [
    "^(react/(.*)$)|^(react$)",
    "^(next/(.*)$)|^(next$)",
    "<THIRD_PARTY_MODULES>",
    "",
    "^types$",
    "^@local/(.*)$",
    "^@/config/(.*)$",
    "^@/lib/(.*)$",
    "^@/components/(.*)$",
    "^@/styles/(.*)$",
    "^[./]",
  ],
  importOrderSeparation: false,
  importOrderSortSpecifiers: true,
  importOrderBuiltinModulesToTop: true,
  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
  importOrderMergeDuplicateImports: true,
  importOrderCombineTypeAndValueImports: true,
  plugins: ["@ianvs/prettier-plugin-sort-imports"],
}

• Reactは常に最初にインポートする
• 次に、Next.jsの公式パッケージであるnext/image、next/linkなどをインポートする
• その後に、サードパーティ製のパッケージをインポートする
• グループ間に空行を挿入する
• 最後に、types、config、lib、componentsの順でローカルファイルをインポートする