Eslint의 import/order 규칙 사용하기

ESLint와 eslint-plugin-import를 사용하여 import 문의 순서와 구조를 정리하는 방법을 소개하겠습니다. eslint의 import/order 규칙을 중점적으로 다룰 것입니다.

ESLint와 eslint-plugin-import 소개

ESLint는 JavaScript 및 TypeScript 코드의 패턴을 식별하고 보고하는 데 사용되는 정적 코드 분석 도구입니다. eslint-plugin-import는 이러한 import 문과 관련된 다양한 규칙을 제공하는 플러그인입니다. import/order 규칙은 이 플러그인을 통해 사용할 수 있으며, import 문의 순서와 그룹화를 관리하는 데 매우 유용합니다.

1. 설치 방법

1-1. ESLint 설치

프로젝트에 ESLint가 설치되어 있지 않다면, 다음 명령어로 설치하세요.

npm install eslint --save-dev

또는 yarn을 사용하는 경우:

yarn add eslint --dev

1-2. eslint-plugin-import 설치

이 플러그인은 다음과 같이 설치할 수 있습니다.

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

또는 yarn을 사용하는 경우:

yarn add eslint-plugin-import --dev

2. import/order 규칙 추가

설치가 완료되면, ESLint 구성 파일 (예: .eslintrc.js 또는 .eslintrc.json)에 import/order 규칙을 추가하여 사용할 수 있습니다. 예를 들어:

module.exports = {
  // ... 기타 ESLint 규칙 및 설정
  plugins: [
    // ... 기타 플러그인
    'import',
  ],
  rules: {
    // ... 기타 규칙
    'import/order': [
      'error',
      {
        // ... import/order 규칙 설정
        groups: [['builtin', 'external', 'internal']],
        'newlines-between': 'always',
        alphabetize: {
          order: 'asc',
          caseInsensitive: true,
        },
      },
    ],
  },
};

이렇게 설정하면 import/order 규칙을 ESLint에서 활성화할 수 있습니다.

3. import/order 규칙의 세부 설정

import/order 규칙은 다음과 같은 세부 사항으로 구성됩니다:

3-1. groups

import 문은 여러 그룹으로 나눌 수 있습니다. 기본적으로 eslint는 다음과 같은 그룹을 제공합니다:

builtin: Node.js 내장 모듈 (예: fs, path)
external: node_modules에서 가져온 외부 모듈 (예: react, lodash)
internal: 별칭을 사용해 설정된 내부 모듈 (프로젝트 내부 경로에 대한 별칭)
parent: 상위 디렉토리로부터 가져온 모듈 (예: ../utils/my-utils)
sibling: 같은 디렉토리 내의 모듈 (예: ./my-component)
index: 현재 디렉토리의 인덱스 파일 (예: ./)
object: import 할 때 중괄호 안에 여러 이름을 넣는 경우 (예: import { a, b } from 'module')
type: TypeScript에서 타입만을 import하는 경우 (예: import type { MyType } from './myTypes')

3-2. pathGroups

pathGroups 설정은 특정 패턴의 경로들을 사용자 정의 그룹으로 분류할 수 있게 해줍니다. 이를 통해 프로젝트 특정의 경로나 라이브러리를 별도의 그룹으로 관리할 수 있습니다. 각 pathGroup은 pattern과 group 속성을 가집니다.

pattern: 매칭시킬 경로의 패턴입니다. 예를 들어, 특정 폴더나 와일드카드(*)를 사용할 수 있습니다.
group: 이 패턴이 속할 그룹입니다. builtin, external, internal 등 기존 그룹을 사용하거나 새로운 그룹을 정의할 수 있습니다.
position: 선택적 속성으로, 그룹 내에서의 위치를 before 또는 after로 지정할 수 있습니다. 예를 들어, @/로 시작하는 경로를 내부 모듈로 분류하려면 다음과 같이 설정할 수 있습니다:

'import/order': ['error', {
  'pathGroups': [
    {
      'pattern': '@/**',
      'group': 'internal',
      'position': 'after'
    }
  ],
  // ... 기타 설정
}]

3-3. pathGroupsExcludedImportTypes

pathGroupsExcludedImportTypes 설정은 특정 import 유형을 pathGroups 패턴 매칭에서 제외시키는 데 사용됩니다. 이는 external, internal 등의 기본 import 유형을 pathGroups 설정에서 제외시키고 싶을 때 유용합니다.

예를 들어, external 유형의 import를 pathGroups 패턴 매칭에서 제외하려면 다음과 같이 설정할 수 있습니다:

'import/order': ['error', {
  'pathGroupsExcludedImportTypes': ['external'],
  // ... 기타 설정
}]

3-2. Newlines between groups

그룹 간에 새 줄을 추가하여 가독성을 향상시킵니다.

3-3. Alphabetize

import 문을 알파벳 순으로 정렬합니다.

eslint 구성 파일에서 import/order 규칙을 다음과 같이 설정할 수 있습니다:

.eslintrc.json

{
  "extends": ["next/core-web-vitals"],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "react/display-name": "off",
    "import/order": [
      "error",
      {
        "groups": [
          "builtin",
          "external",
          "internal",
          "parent",
          "sibling",
          "index",
          "object",
          "type"
        ],
        "pathGroups": [
          { "pattern": "@*/**", "group": "internal" },
          { "pattern": "@const", "group": "internal" }
        ],
        "pathGroupsExcludedImportTypes": ["react"],
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        },
        "newlines-between": "always"
      }
    ]
  },
  "plugins": ["import"],
  "parserOptions": {
    "requireConfigFile": false
  }
}