eslint-plugin-import

2022-10-14 hit count image

ESLintのeslint-plugin-importを使って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'
...

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

今回のブログポストではESLinteslint-plugin-importを使って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を実行したら下記のようなエラーが出ることが確認できます。

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

これで私たちが設定したeslint-plugin-importが上手く動作してることが確認できます。

完了

これでESLinteslint-plugin-importを設定してimport部分をソートする方法について見てみました。今からはコンポーネントとライブラリを追加するためのimport部分を綺麗にソートして管理することができるようになりました。

私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!

アプリ広報

今見てるブログを作成たDekuが開発したアプリを使ってみてください。
Dekuが開発したアプリはFlutterで開発されています。

興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。

Posts