[ESLint] eslint-plugin-import

概要

フロントエンド開発をしたら次のようにimportを使ってたくさんのコンポーネントとライブラリを読んで使う場合があります。

import type { NextPage, GetStaticProps } from 'next'
import Head from 'next/head'
import styles from 'styles/Home.module.css'
import { i18n } from 'next-i18next.config'
import { useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { Stack, Button } from '@mui/material'
import { SampleLocale } from 'components/SampleLocale'
...

しかし、何かのルールを決めて管理しないとどのコンポーネントを追加したか把握できなくて、管理が難しいなる問題があります。

今回のブログポストではESLintのeslint-plugin-importを使ってimport部分をソートする方法について説明します。

eslint-plugin-import: https://github.com/import-js/eslint-plugin-import

今回のブログポストはESLintがプロジェクトに設定されたと仮定して説明します。

eslint-plugin-importのインストール

eslint-plugin-importを使ってimport部分をソートするためにはeslint-plugin-importをインストールする必要があります。次のコマンドを使ってeslint-plugin-importをインストールします。

npm install eslint-plugin-import --save-dev

eslint-plugin-importの設定

このようにインストールしたeslint-plugin-importを使うためにはeslint-plugin-importを設定する必要があります。

eslint-plugin-importを設定するため.eslintrc.jsファイルを開いて下記のように修正します。

module.exports = {
  ...
  plugins: [
    ...
    'import',
  ],
  rules: {
    ...
    'import/order': [
      'error',
      {
        groups: ['builtin', 'external', 'internal'],
        pathGroups: [
          {
            pattern: '{react,react-dom/**}',
            group: 'external',
            position: 'before',
          },
        ],
        pathGroupsExcludedImportTypes: ['react'],
        'newlines-between': 'always',
        alphabetize: {
          order: 'asc',
          caseInsensitive: true,
        },
      },
    ],
  },
}

eslint-plugin-importの検査

このようにeslint-plugin-importを設定したら、次はESLintを実行してみます。eslint-plugin-importを設定してESLintを実行したら下記のようなエラーが出ることが確認できます。

1  Error: There should be at least one empty line between import groups  import/order
1  Error: There should be at least one empty line between import groups  import/order
1  Error: `next-i18next.config` import should occur before import of `styles/Home.module.css`  import/order
1  Error: `next-i18next` import should occur before import of `next/head`  import/order
1  Error: `next-i18next/serverSideTranslations` import should occur before import of `next/head`  import/order
1  Error: There should be at least one empty line between import groups  import/order
1  Error: `@mui/material` import should occur before import of `next`  import/order
1  Error: `components/SampleLocale` import should occur before import of `styles/Home.module.css`  import/order