[ESLint] import/order 규칙으로 import 순서 미세 조정하기

 

eslint-plugin-import를 활용하면 아래와 같은 import문들의 순서를 직접 조정할 수 있다.

 

먼저 eslintrc 파일의 plugins 배열에 "import"를 추가하거나 또는 extends 배열에 "plugin:import/recommended"를 추가해야 한다. (plugins와 extends 모두 위 문자열을 추가하면 rules에서 규칙을 직접 수정할 수 있게 되며, extends의 경우에는 권장되는 기본 설정이 추가된다. extends에 추가하고 rules를 수정하면 기본 설정 위에 덮어씌우게 된다.)

{
  "plugins": ["import"]
}

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

 

이제 rules에서 "import/order" 규칙을 직접 수정하면 된다.

{
    "import/order": [
      "error",
      {
        "groups": [
          "type",
          "builtin",
          "external",
          "internal",
          "parent",
          "sibling",
          "index",
          "unknown"
        ],
        "pathGroups": [
          {
            "pattern": "react*",
            "group": "external",
            "position": "before"
          },
          {
            "pattern": "@hooks/*",
            "group": "internal",
            "position": "after"
          },
          {
            "pattern": "@pages/*",
            "group": "internal",
            "position": "after"
          },
          {
            "pattern": "@components/*",
            "group": "internal",
            "position": "after"
          }
        ],

        "pathGroupsExcludedImportTypes": ["@tanstack*"],
        "alphabetize": {
          "order": "asc"
        }
      }
    ]
}

groups

각 import문의 그룹별 순서를 나눈다. 그룹에는 builtin, external, internal, unknown, parent, sibling, index, object, type이 있다. 예를 들어 외부 라이브러리들은 external 그룹에 속하고, 상대 경로로 가져오는 모듈들은 parent, sibling, index 그룹에 속하고, import type은 type 그룹에 속한다. 먼저 입력한 순서대로 그룹의 우선순위가 정해진다.

 

만약 groups에 문자열 대신 ["parent", "sibling", "index"]와 같이 문자열들을 배열로 묶어서 넣으면 하나의 그룹으로 합쳐지게 된다.

 

pathGroups

pathGroups에서는 경로명의 패턴을 통해 좀 더 세부적인 순서를 정할 수 있다. pattern, patternOptions, group, position 총 4가지 속성이 있다. pattern은 minimatch pattern을 의미하고, patternOptions은 minimatch 라이브러리의 options와 동일한 내용이다. group에 위에서 언급한 그룹 이름 중 하나를 입력하면 patttern에 해당하는 경로명의 import문이 여기서 정한 그룹에 속하게 된다. position은 해당 group의 앞에 위치할 지(before), 뒤에 위치할 지(after)를 설정하는 속성이다.

 

예를 들어 react 관련 import문들을 다른 외부 라이브러리들보다 더 위에 위치시키고 싶으면 아래와 같이 작성한다.

{
  "pattern": "react*",
  "group": "external",
  "position": "before"
}

react로 시작하는 경로명들이 external 그룹의 앞에 위치하게 되므로 그 어떤 외부 라이브러리보다도 앞에 위치하게 된다. react로 시작하는 경로명에는 'react', 'react-dom', 'react-router-dom' 등이 있으므로 이러한 모듈들의 import문이 위로 올라가게 된다.

 

pathGroups는 경로 alias를 사용할 때 더욱 유용하다. alias를 사용한다면 unknown 그룹에 속하게 되는데, pathGroups에서 group을 변경하여 순서를 바꿀 수 있다.

{
  "pattern": "@hooks/*",
  "group": "internal",
  "position": "after"
},
{
  "pattern": "@pages/*",
  "group": "internal",
  "position": "after"
},
{
  "pattern": "@components/*",
  "group": "internal",
  "position": "after"
}

이렇게 하면 @로 시작하는 경로들이 internal 뒤에 위치하게 되면서 상대경로들(parent, sibling, index)보다 더 앞서게 된다. 그리고 @hooks, @pages, @components 간의 순서 또한 위에서 작성한대로 우선순위가 정해지게 된다.

 

pathGroupsExcludedImportTypes

pathGroups에 적용된 규칙을 적용하지 않을 import 타입을 설정한다. group명 또는 minimatch pattern을 입력할 수 있다. 기본값이 ["builtin", "external", "object"]로 되어 있다.

 

예를 들어, 위에서 작성한 react로 시작하는 경로에 관한 규칙은 기본값에 있는 external 때문에 무시된다. 따라서 pathGroups에 작성한 규칙을 올바르게 적용시키려면 pathGroupsExcludedImportTypes를 빈 배열로 만들면 된다.

{
  "pathGroups": [
    {
      "pattern": "react*",
      "group": "external",
      "position": "before"
    }
  ],
  "pathGroupsExcludedImportTypes": []
}

 

만약 react-hook-form 이라는 라이브러리의 import문을 react로 시작하는 다른 라이브러리들(react, react-dom 등)과 분리하여 다른 외부 라이브러리들과 동일한 우선순위를 갖도록 하려면 pathGroupsExcludedImportTypes에 명시하여 pathGroups 규칙이 적용되지 않도록 할 수 있다.

{
  "pathGroups": [
    {
      "pattern": "react*",
      "group": "external",
      "position": "before"
    }
  ],
  "pathGroupsExcludedImportTypes": ["react-hook-form"]
}

 

alphabetize

동일한 그룹 내에 있는 경로의 알파벳 순서에 의한 정렬 여부를 설정한다. order를 통해 알파벳 오름차순, 내림차순을 결정할 수 있고, caseInsensitive를 통해 대소문자 구분 여부를 설정할 수 있다.

// 오름차순 정렬, 대소문자 구분 하지 않음
{
  "order": "asc",
  "caseInsensitive": true
}

 

 

이 외에도 import문 간에 줄바꿈을 결정하는 newlines-between 및 그 외 몇 가지 속성이 더 존재한다. eslint-plugin-import 깃헙 문서에 모든 속성에 대한 설명이 나와 있다.

 

 

참고자료

https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md

GitHub - import-js/eslint-plugin-import: ESLint plugin with rules that help validate proper imports.

https://db2dev.tistory.com/entry/ESLint-importorder-%EA%B7%9C%EC%B9%99-%EC%84%A4%EC%A0%95%ED%95%98%EA%B3%A0-%EB%92%A4%EC%A3%BD%EB%B0%95%EC%A3%BD-import-%EC%BD%94%EB%93%9C-%EA%B0%9C%EC%84%A0%ED%95%98%EA%B8%B0#newlines-between

[ESLint] import/order 규칙 설정하고 뒤죽박죽 import 코드 개선하기

https://velog.io/@eenaree/eslint-import-order

eslint import 순서 정렬하기