eslint-plugin-import

2022-10-14 hit count image

Let's see how to clean up the import part using ESLint's eslint-plugin-import.

Outline

When we develop the frontend, we usually see the import part that imports the various components and libraries like the following.

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'
...

However, if there is no rule to manage them, it’s difficult to understand which components are imported or find the component in them.

In this blog post, I will introduce eslint-plugin-import that is a plugin of ESLint to sort the import part.

This blog post is written by assuming that ESLint is configured in the project.

Install eslint-plugin-import

To use eslint-plugin-import for sorting the import part, you need to install eslint-plugin-import. Execute the following command to install eslint-plugin-import.

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

Configure eslint-plugin-import

After installing eslint-plugin-import, you need to configure eslint-plugin-import into ESLint.

To configure eslint-plugin-import, open .eslintrc.js file and modify it like the following.

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,
        },
      },
    ],
  },
}

Check eslint-plugin-import

After configuring eslint-plugin-import, try to execute ESLint. If eslint-plugin-import is installed and configured well, you can see a similar result like the following when you execute 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

Then, you can know that eslint-plugin-import is working well.

Completed

Done! we’ve seen how to configure ESLint’s eslint-plugin-import to sort the import part. From now, you can manage the import part clean to import the components and libraries.

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

App promotion

You can use the applications that are created by this blog writer Deku.
Deku created the applications with Flutter.

If you have interested, please try to download them for free.

Posts