[ESLint] import 순서 정렬하기(eslint-plugin-import)

1. 개요

본 글에서는 ESLint를 사용하여 import 구문의 순서를 정의하는 방법을 다룹니다. 특히, eslint-plugin-import 플러그인과 타입스크립트 환경에서의 설정 방법에 초점을 맞춥니다.

[ESLint] import 순서 정렬하기(eslint-plugin-import)

ESLint import/order 와 eslint-plugin-import 설명

1. ESLint import/order 규칙

import/order 규칙은 JavaScript/TypeScript 코드에서 import 구문의 순서를 정의하는 ESLint 규칙입니다. 코드의 가독성과 일관성을 유지하는 데 도움이 됩니다.

 

2. eslint-plugin-import 플러그인

eslint-plugin-import 플러그인은 import/order 규칙을 포함하여 import 관련 다양한 규칙을 제공합니다.

 

3. 주요 설정

• groups: import 문의 그룹 순서 정의
• pathGroups: 특정 경로 패턴에 대한 그룹 설정
• alphabetize: 각 그룹 내 import 문의 알파벳 순서 정렬
• newlines-between: 그룹 간 빈 줄 설정

4. 예시

{
  "rules": {
    "import/order": ["error", {
      "groups": ["builtin", "external", "internal", "parent", "sibling", "index"],
      "pathGroups": [{
        "pattern": "@components/**",
        "group": "internal"
      }],
      "alphabetize": {
        "order": "asc",
        "caseInsensitive": true
      },
      "newlines-between": "always"
    }]
  }
}

위 설정은 다음과 같은 import 순서를 적용합니다.

1. 내장 모듈 (예: react, fs)
2. 외부 모듈 (예: lodash, antd)
3. 내부 모듈 (예: src/components/Button)
4. 상위 디렉토리 모듈
5. 동일 디렉토리 모듈
6. index.js 파일

5. 타입스크립트 설정

타입스크립트 환경에서는 @typescript-eslint/parser 및 eslint-import-resolver-typescript 패키지를 추가로 설치해야 합니다.

2. 설치

1. [eslint-plugin-import](https://github.com/import-js/eslint-plugin-import/tree/main) 플러그인 설치

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

2. @typescript-eslint/parser 및 eslint-import-resolver-typescript 설치 (타입스크립트 사용 시)

npm install @typescript-eslint/parser eslint-import-resolver-typescript --save-dev

3. 설정

1. .eslintrc.json 파일 생성
2. plugins 항목에 eslint-plugin-import 추가

{
  "plugins": ["eslint-plugin-import"]
}

3. extends 항목에 eslint-plugin-import/recommended 추가

{
  "extends": ["eslint-plugin-import/recommended"]
}

4. rules 항목에 import/order 규칙 정의

{
  "rules": {
    "import/order": ["error", {
      "groups": ["builtin", "external", "internal", "parent", "sibling", "index"],
      "pathGroups": [{
        "pattern": "@components/**",
        "group": "internal"
      }]
    }]
  }
}

• groups: import 문의 그룹 순서 정의
• pathGroups: 특정 경로 패턴에 대한 그룹 설정

4. 추가 설정 (타입스크립트)

1. parser 항목에 @typescript-eslint/parser 설정

{
  "parser": "@typescript-eslint/parser"
}

2. settings 항목에 import/resolver 설정

{
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}

5. 예시

  rules: {
    "import/order": [
      "error",
      {
        groups: ["builtin", "external", "parent", "sibling", "index", "object"],
        pathGroups: [
          {
            pattern: "~/**",
            group: "external",
            position: "before",
          },
          { pattern: "@*", group: "external", position: "after" },
          { pattern: "@*/**", group: "external", position: "after" },
        ],
        pathGroupsExcludedImportTypes: ["react"],
        "newlines-between": "always",
        alphabetize: {
          order: "asc",
          caseInsensitive: true,
        },
      },
    ],
  },

주어진 ESLint import/order 규칙 설정을 분석해보겠습니다.

 

세부사항:

• groups: import 문을 분류하는 그룹을 정의합니다.
  • builtin: 내장 모듈 (예: "fs", "path")
  • external: 프로젝트 외부의 모듈(예: "react", "lodash")
  • parent: 상위 디렉터리 모듈
  • sibling: 동일 디렉터리 모듈
  • index: index.js 또는 index.ts 파일
  • object: 객체 비구조화 할당 사용 시(예: import { Button } from 'components')
• pathGroups: 특정 경로 패턴을 기반으로 그룹을 지정합니다.
  • pattern: "~/"** : 프로젝트 루트 경로 바로 아래의 모든 경로를 지정합니다. 이들은 'external' 그룹으로 분류되며, 다른 'external'보다 우선시 됩니다. (position: "before")
  • *pattern: "@\" ": 범위 지정 패키지(@scope/package-name)를 'external' 그룹으로 설정합니다. (position: "after")
  • pattern: "@*/": 범위 지정 패키지의 하위 경로도 'external' 그룹으로 설정합니다. (position: "after")
• pathGroupsExcludedImportTypes: ["react"]: 특정 import 타입(이 경우 'react')는 pathGroups의 적용을 받지 않도록 합니다.
• newlines-between: "always" import 그룹 사이에 항상 빈 줄이 있도록 요구합니다.
• alphabetize:
  • order: "asc": 각 그룹 내에서 import 문을 알파벳 순으로 정렬합니다.
  • caseInsensitive: true: 대소문자를 구분하지 않고 정렬합니다.

요약

이 설정은 체계적인 import 정렬을 강제하여 코드의 가독성과 일관성을 향상시킵니다. 내장 모듈과 외부 모듈들을 분리하고, 프로젝트 루트의 하위 경로 및 범위 지정 패키지들을 특정 외부 모듈 그룹 내에서 우선시하는 등 세밀한 import 관리를 할 수 있도록 해줍니다.