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

거슬리는 import 코드

그동안 나름대로의 규칙을 가지고 import 코드를 최대한 보기 좋게 정리하고 있었다. 하지만 한 파일에서 사용하는 모듈이 한 두개가 아니기 때문에 매번 이렇게 수작업으로 일일이 import 순서를 맞춰주는 게 여간 귀찮은 일이 아닐 수 없었다. 그리고 아무리 잘 한다고 해도 모든 파일에서 동일한 규칙을 따르기가 쉽지 않았다. 따라서 ESLint로 규칙을 정하고 강제화 하는 작업을 진행했다.

일일이 정리했던 import 코드...귀찮아...

ESLint의 eslint-plugin-import

ESLint는 eslint-plugin-import를 통해 import/export 구문의 린트를 지원한다. 추가적으로 나는 Webpack과 TypeScript를 사용해서 절대 경로(alias)를 설정해놓고 사용하고 있기 때문에 프로젝트에 eslint-plugin-import와 eslint-import-resolver-webpack, eslint-import-resolver-typescript 패키지들을 설치했다.

# yarn 
yarn add -D eslint-plugin-import eslint-import-resolver-webpack eslint-import-resolver-typescript

# npm 
npm install --save-dev eslint-plugin-import eslint-import-resolver-webpack eslint-import-resolver-typescript

그리고 import/resolver 셋팅을 아래와 같이 했다.

// .eslintrc

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

import/order 규칙 설정하기

이제 ESLint 규칙에 import/order을 추가하기만 하면 된다. import/order 규칙은 import 순서의 컨벤션을 정하고, 그것을 강제화한다. 그리고 --fix 명령어를 사용하면 일괄적으로 룰에 맞지 않는 코드를 한 번에 수정할 수도 있다. 그럼 이제 옵션들을 하나씩 살펴보자.

groups

• import 되는 순서를 정의. 그룹 내 각 요소의 순서와 동일
• 생략된 문자열은 마지막 요소와 함께 그룹화
• 가능한 그룹 문자열: builtin, external, internal, unknown, parent, sibling, index, object, type

{
    "groups": [
      "builtin",
      "external",
      "internal",
      // `sibling`, `parent`, `index` 타입은 상대 경로의 파일로부터 import 되는 모듈을 뜻한다. 
      // 차례대로 하나의 그룹으로 모아 import 한다. 
      ["sibling", "parent", "index"],
      "type",
      // 생략된 `object` 타입과 함께 가장 마지막에 import 된다. 
      "unknown"
    ],
}

pathGroups

• 추가적으로 옵션을 설정하고 싶은 경로를 별칭과 함께 다시 그룹화
• 프로퍼티
  • pattern
    • 경로의 minimatch pattern
  • patternOptions
    • minimatch를 위한 옵션
    • 기본값은 default: { nocomment: true }
  • group
    • 적용될 그룹의 타입
  • position
    • 적용될 그룹에 배치될 위치
    • after 또는 before
    • 생략할 경우 앞, 뒤가 아닌 그룹과 같이 배치됨

나는 react와 관련된 경로를 external 그룹 중에서도 가장 위에 배치하고, 스타일과 관련된 파일을 unknown 그룹으로 설정해 import 코드 내에 가장 마지막으로 배치하고자 했다.

{
    "pathGroups": [
      // react가 포함된 경로는 external 그룹 내에서 가장 앞에 위치시킨다. 
      {
        "pattern": "{react*,react*/**}",
        "group": "external",
        "position": "before"
      },
      // 아래는 전부 스타일 관련 파일들을 unknown 그룹 하나로 묶어주는 역할을 한다. 
      {
        "pattern": "@saas-fe/**/*.style",
        "group": "unknown"
      },
      {
        "pattern": "@pages/**/*.style",
        "group": "unknown"
      },
      {
        "pattern": "@components/**/*.style",
        "group": "unknown"
      },
      {
        "pattern": "./**/*.style",
        "group": "unknown"
      },
      {
        "pattern": "../**/*.style",
        "group": "unknown"
      },
      {
        "pattern": "*.style",
        "group": "unknown"
      }
    ],
}

참고로 스타일 파일의 pattern 프로퍼티 값을 {react*,react*/**} 처럼 minimatch 패턴을 적용해서 작성하고 소스를 줄이고 싶었는데 맘처럼 되지 않았다. minimatch 패턴을 다시 살펴봐야지. (minimatch 패턴은 위의 링크보다는 이 cheat-sheet을 참고하는 걸 추천한다.)

pathGroupsExcludedImportTypes

• pathGroups에서 설정에 의해 처리되지 않는 import type을 정의
• external 그룹처럼 보이는 pathGroups 옵션을 처리할 때 주로 필요

사실 잘 이해하지 못하고 쓰고 있다. 😭 위에 설정한 pathGroups 기준으로 아래와 같이 설정하지 않으면 적용이 되지 않는다는 것만 참고!

{
    "pathGroupsExcludedImportTypes": ["react", "unknown"],
}

newlines-between

• 그룹 사이에 줄바꿈을 강제화 하거나 금지하는 옵션
• ignore
  • 그룹 간에 줄바꿈이 없어도 에러 발생하지 않음
• always
  • 그룹 간에 최소 한 줄 이상의 줄바꿈이 강제화되며, 그룹 안에서의 줄바꿈은 금지됨
  • 여러 줄의 줄바꿈을 방지하기 위해서 no-multiple-empty-lines 규칙을 사용할 수 있음
• always-and-inside-groups
  • 그룹 간에 최소 한 줄 이상의 줄바꿈이 강제화되며, 그룹 안에서의 줄바꿈도 허용됨
• never
  • 전체 import 코드 내에서 줄바꿈이 허용되지 않음

나는 빈 라인으로 그룹 간에 구분이 가시적으로 되는 것을 선호하므로 always를 적용했다.

{
    "newlines-between": "always"
}

alphabetize

• 그룹 내에서 알파벳을 기준으로 정렬 순서를 설정
• 프로퍼티
  • order
    • 기본값: ignore
    • 오름차순 asc 또는 내림차순 desc
  • caseInsensitive
    • 기본값: false
    • true
      • 대소문자 무시

{
    "alphabetize": {
      "order": "asc",
      "caseInsensitive": true
    },
}

warnOnUnassignedImports

• 등록되지 않은 import의 순서가 잘못됐을 경우 경고 발생 여부
• 기본값: false
• true
  • 경고 발생
  • --fix 명령어를 통해 자동적으로 수정되지 않음

최종 설정

// .eslintrc

{
    "rules": {
        "import/order": [
            "error",
            {
                "groups": [
                    "builtin",
                    "external",
                    "internal",
                    ["sibling", "parent", "index"],
                    "type",
                    "unknown"
                ],
                "pathGroups": [
                    {
                        "pattern": "{react*,react*/**}",
                        "group": "external",
                        "position": "before"
                    },
                    {
                        "pattern": "@saas-fe/**/*.style",
                        "group": "unknown"
                    },
                    {
                        "pattern": "@pages/**/*.style",
                        "group": "unknown"
                    },
                    {
                        "pattern": "@components/**/*.style",
                        "group": "unknown"
                    },
                    {
                        "pattern": "./**/*.style",
                        "group": "unknown"
                    },
                    {
                        "pattern": "../**/*.style",
                        "group": "unknown"
                    },
                    {
                        "pattern": "*.style",
                        "group": "unknown"
                    }
                ],
                "pathGroupsExcludedImportTypes": ["react", "unknown"],
                "newlines-between": "always"
                "alphabetize": {
                    "order": "asc",
                    "caseInsensitive": true
                },

            }
        ],
    }
}

개선된 import 코드

처음보다 훨씬 체계적이고 깔끔하게 정리됐다!

이제는 규칙에 맞지 않으면 코드 상에서 ESLint 에러가 나기 때문에 잘못된 부분을 놓치지 않을 수 있고, 일일이 맞춰줄 필요없이 자동적으로 수정도 된다. 최고다. ESLint를 잘 활용하면 이렇게나 개발의 질이 올라간다! 😎👍