eslint-plugin-simple-import-sort が良い感じ

近年のフロントエンド開発では多くのファイルにモジュールを分割して管理することが多いと思います。 その際に気になるのがimport文が多くなってしまうことです。 npmのモジュールなのかローカルで定義したコンポーネントなのか、型定義なのかごちゃごちゃして分かりにくいですよね。

そこで、import文を自動で並べ替えてくれるeslint-plugin-simple-import-sortというプラグインを導入してみました。

下記コマンドを実行してプロジェクトに導入します。

パッケージインストール

yarn add --dev eslint-plugin-simple-import-sort
 or
npm install --save-dev  eslint-plugin-simple-import-sort

その後設定を聞かせるためeslintの設定ファイル（ここではeslint.jsとします）に追記します。

eslint.js

module.exports = {
  // ...
  plugins: [..., 'simple-import-sort'],
  rules: {
    'simple-import-sort/imports': 'error'
  },
  // ...
}

これで設定は完了です。

早速フォーマットを整形してみましょう。

index.tsx (before)

import Post from '../../types/post';
import { GetStaticProps, NextPage } from 'next';
import Container from '../components/container';
import Layout from '../components/layout';
import MoreStories from '../components/more-stories';
import Head from 'next/head';
import { getAllPosts } from '../lib/api';

例えば、上記のようにimportを追加した順番に記述したり、改行の規則も定まっていないような場合はとても見づらくくコードの解読に時間がかかります。
自分以外が見たときにぱっと見で分かりにくいですね。

整形後は

index.tsx (after)

import { GetStaticProps, NextPage } from 'next';
import Head from 'next/head';

import Post from '../../types/post';
import Container from '../components/container';
import Layout from '../components/layout';
import MoreStories from '../components/more-stories';
import { getAllPosts } from '../lib/api';

かなり見やすくなりましたね。

ちなみに並べる順番はeslintの設定にoptionnを渡してあげることでカスタマイズ出来ます。

eslint.js

module.exports = {
  // ...
  plugins: [..., 'simple-import-sort'],
  rules: {
    'simple-import-sort/imports': 'error',
    // option記述
    "sort-imports": ["error", { "ignoreDeclarationSort": true }],
  },
  // ...
}

良い感じになりましたね。