Contents
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.
- eslint-plugin-import: https://github.com/import-js/eslint-plugin-import
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
Deku.Deku created the applications with Flutter.If you have interested, please try to download them for free.
