ESlint를 사용하여 import 자동 정렬

import이 늘어날 때 그 순서에 신경을 쓴다.
외부 프로그램 라이브러리의 가져오기를 원합니다. react 가져오는 것은 위에 고정시키고 싶습니까?
ESlinteslint-plugin-import 플러그인을 사용하면 간단하게 정렬할 수 있습니다.
사용하는 규칙은 eslint-plugin-import의import/order이다.
다양한 설정이 있어 어느 정도의 자유도로 순서를 정할 수 있다.이 규칙은fixableeslint --fix로 명령을 통해 자동으로 정렬할 수 있습니다.

정렬 예

이것은 즉각 eslint-plugin-import의import/order를 사용하여 정렬한 예이다.
위쪽이 아래쪽처럼 예뻐졌어요.
정렬 후react의 가져오기가 맨 위에 있고 그 다음은 다른 외부 라이브러리, 별명에서 가져오기@src/**, 부모 디렉터리에서 가져오기입니다.
이런 순서와 별명도 자신의 환경과 취향에 따라 자유롭게 설정할 수 있다.
마지막으로 typescript의 형식 가져오기는 다른 플러그인과의 조합을 통해 이루어집니다.
상세한 설정 방법은 다음과 같다.

정렬 전

import { TextField, Box, BoxProps } from '@mui/material';
import { LoadingButton } from '@mui/lab';
import { useAddAppNotification } from '@src/common/hooks/useAppNotifications';
import { SubmitHandler, useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { useEffect } from 'react';
import { useSignIn } from '../hooks/useSignIn';

정렬 후

import { useEffect } from 'react';

import { LoadingButton } from '@mui/lab';
import { TextField, Box } from '@mui/material';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';

import { useAddAppNotification } from '@src/common/hooks/useAppNotifications';

import { useSignIn } from '../hooks/useSignIn';

import type { BoxProps } from '@mui/material';
import type { SubmitHandler } from 'react-hook-form';

설정 방법

상술한 정렬은 아래 설정을 통해 이루어진 것이다.
정렬 순서는 ESlint 규칙 옵션에 의해 설정됩니다.
.eslintrc.js

{
  rules:{
    'import/order': [
      'error',
      {
        groups: ['builtin', 'external', 'parent', 'sibling', 'index', 'object', 'type'],
        pathGroups: [
          {
            pattern: '{react,react-dom/**,react-router-dom}',
            group: 'builtin',
            position: 'before',
          },
          {
            pattern: '@src/**',
            group: 'parent',
            position: 'before',
          },
        ],
        pathGroupsExcludedImportTypes: ['builtin'],
        alphabetize: {
          order: 'asc',
        },
        'newlines-between': 'always',
      },
    ],
    '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports' }],
    // その他のルール
  }
}

구성 설명

상기 설정 예시를 사용하여 각 항목의 의미와 설정 방법을 설명한다.
더 자세한 내용을 알고 싶으면 아래github의 해설 페이지를 보십시오.
https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md#importorder-enforce-a-convention-in-module-import-order

groups

각 그룹의 가져오기 순서를 설정할 수 있습니다.그룹은 외부 라이브러리, 부모 디렉토리와 같은 이미 정의된 분류입니다.다음은 모든 그룹의 이름입니다.이름은 대체로 상상할 수 있고, 상세한 설명은github로 확인할 수 있다.['builtin', 'external', 'internal', 'unknown', 'parent', 'sibling', 'index', 'object', 'type']

pathGroups

상기groups 외에도 path를 기준으로 자신의 조합을 만들어 임의의 곳에 놓을 수 있다.이렇게 하면 자유도가 높은 순서를 정할 수 있다.
예를 들어 다음은@src/** 시작된 경로의 가져오기를 그룹으로 하고 parent 그룹 이전에 가져온 설정이다.
새로 생성된 그룹은 group 및 position를 사용하여 배치 위치를 지정합니다.group에서 위치 기준이 되는 이미 지정된 그룹 이름을 지정합니다.position에 after 또는 before를 설정하면 새 그룹은 데이텀 그룹의 다음 또는 앞에 있습니다.선택하지 않으면 새 그룹이 데이텀 그룹에 포함됩니다.position는 제가 따로 설정한 별명입니다. 설정하지 않으면@src/** 외부 프로그램 라이브러리로 처리됩니다.그래서 이 설정이 필요하다.

{
  pattern: '@src/**',
  group: 'parent',
  position: 'before',
}

또한 다음 설정에서 @,react,react-dom/**의 도입을 하나의 그룹으로 설정하고react-router-dom 이전에 설정한다.
여기builtin 사용pattern과{}.**는 pattern로 해석되기 때문에 minimatch에서 사용할 수 있는 모델을 사용할 수 있다.

{
  pattern: '{react,react-dom/**,react-router-dom}',
  group: 'builtin',
  position: 'before',
}

pathGroupsExcludedImportTypes

minimatchpattern 판정의 영향을 받지 않는 그룹을 설정할 수 있습니다.
기본값은 pathGroups입니다.['builtin', 'external', 'object'] 관련 가져오기react는 external가 기본값이면 적용되지 않는다pathGroupsExcludedImportTypes.pathGroups를 pathGroupsExcludedImportTypes로 설정하면 위에서 소개한 ['builtin', 'object']가 효과를 발휘할 수 있다.
참고로 github의docspathGroups에는 이런 예가 있지만 이 용법은 잘못된 것이다.수정도 있는 것 같다재설정 요청.

alphabetize

그룹 내의 정렬 방법입니다.그룹 내에서 순서대로 정렬하지 않고 알파벳 오름차순과 내림차순을 선택할 수 있습니다.

newlines-between

그룹 간의 공간 설정이번 설정에는 공간을 설정해야 합니다.

분류 가져오기

"pathGroupsExcludedImportTypes": ["react"]처럼 typescript 형식의 가져오기를 Type-only imports 형식으로 나누려면 다른 ESlint 규칙이 필요합니다.
상술한 규칙 설정례의 마지막import type ...이 바로 이것이다.
이렇게 하면 @typescript-eslint/consistent-type-imports의 형식으로 분리형 가져오고import type ...로 정렬할 수 있다.