Eslint Import/Order (import 순서) 설정하기

 

React/Next/Javscript Eslint Import/Order (import 순서) 설정하는 방법

 

0. 이 글을 쓰게 된 계기

 

과거부터 지금까지 import를 순서를 관리한다면 일일이 수동으로 알파벳 순으로 맞춰주었었는데 리엑트에서 폴더가 많아지고, 컴포넌트가 많아지다 보니 불편함을 느꼈습니다. 그러던 와중 다른 크루가 import/order에 대해 포스팅 한 글을 보고 적용해 봐야겠다고 마음먹었었고, 새로운 프로젝트를 할 때 어떻게 했는지 기억하기 위해 작성하게 되었습니다.

 

 

1. Import 순서를 설정하면 좋은 점

 

일관성 유지: import 문이 일관된 순서로 작성되면 코드를 이해하기 쉬워집니다.
모듈 경로를 알파벳순으로 정렬하면 모듈 검색이 용이해집니다.

충돌 방지: 일부 모듈은 다른 모듈에 의존합니다.
올바른 순서로 import 하지 않으면 코드 충돌이 발생할 수 있습니다.

누락 방지: 일부 모듈은 다른 모듈에 의존합니다.
올바른 순서로 import 하지 않으면 코드를 실행할 때 모듈이 누락될 수 있습니다.

실수 방지: import 순서를 강제로 정하면 실수로 잘못된 모듈을 import 하거나, 올바른 모듈을 import 하더라도 잘못된 위치에 놓는 등의 실수를 방지할 수 있습니다.


따라서 import/order 규칙을 사용하여 일관성 있는 코드 작성 및 코드 충돌, 누락, 실수 등의 문제를 방지할 수 있습니다.

 

2. 설정하는 방법

 

2-0. import/order을 설치한다.

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


// yarn
yarn add --dev eslint-plugin-import

 

eslint-plugin-import

 

2-1.. eslintrc 파일을 생성하고 규칙을 작성한다.

 

 

groups

import/order 규칙에서 groups는 import 문을 그룹화하는 데 사용되는 설정입니다.
groups는 다음과 같은 값 중 하나로 설정할 수 있습니다.

"builtin" : 노드 내장 모듈을 그룹화합니다.
"external" : 프로젝트 외부에서 가져온 모듈을 그룹화합니다.
"internal" : 프로젝트 내부의 모듈을 그룹화합니다.
"parent" : 현재 파일에서 부모 모듈로 가져온 모듈을 그룹화합니다.
"sibling" : 현재 파일과 같은 디렉터리에서 가져온 모듈을 그룹화합니다.
"index" : 상대적 경로를 사용하여 가져온 모듈을 그룹화합니다.

 

 

pathGroups

 

pathGroups 설정을 사용하면, 일반적인 모듈 그룹화 이외의 복잡한 그룹화가 필요한 경우에 유용합니다. 예를 들어, 일부 모듈은 경로 패턴에 따라 내부 또는 외부 모듈로 분류되는 경우에 사용할 수 있습니다. 또는 특정 모듈이 그룹 내에서 일정한 위치에 있어야 하는 경우에도 사용할 수 있습니다.

각 pathGroups 객체는 pattern, group, position으로 구성됩니다.

"pattern" : 이 그룹에 속하는 모듈을 찾기 위한 패턴입니다.
와일드카드(*)를 사용할 수 있습니다.

"group" : 해당 모듈을 그룹화할 그룹을 지정합니다.

"position" (선택 사항) : 해당 모듈을 그룹화한 후 그룹 내에서 모듈의 위치를 지정합니다. "before" 또는 "after" 중 하나를 선택할 수 있습니다. 기본값은 "before"입니다.

 

alphabetize

alphabetize는 import 문을 알파벳 순서대로 정렬하는 설정입니다.

caseInsensitive : true로 설정하면, 알파벳 순서 정렬에서 대소문자를 구분하지 않습니다. 기본값은 false입니다.

order : "asc" 또는 "desc" 중 하나를 설정하여 정렬 방향을 지정합니다. 기본값은 "asc"입니다.

 

pathGroupsExcludedImportTypes

 

pathGroups 설정은 동일한 디렉터리 경로에 속하는 모듈을 그룹화할 수 있습니다. 그러나 때로는 일부 유형의 import 문에서만 해당 디렉터리 경로를 그룹화하고 싶을 수 있습니다. 이때 pathGroupsExcludedImportTypes 설정을 사용하여, 그룹화하지 않을 import 유형을 지정할 수 있습니다.

Example)

  "pathGroupsExcludedImportTypes": ["internal"],

 

 

 

newlines-between

 

newlines-between 설정은 import문 사이에 삽입할 빈 줄의 수를 지정합니다.

"always" : import문 사이에 항상 빈 줄을 추가합니다.
"never" : import문 사이에 빈 줄을 추가하지 않습니다.
"ignore" : 해당 옵션은 무시됩니다.
"always-and-inside-groups" : 그룹 내부와 그룹 간에 항상 빈 줄을 추가합니다.

 

 

 

.eslintrc

{
  "extends": [...],
  "rules": {
    ... // 여기 부분 !
    "import/order": [
      "error",
      {
        "groups": [
          "type",
          "builtin",
          "external",
          "internal",
          "parent",
          "sibling",
          "index",
          "unknown"
        ],
        "pathGroups": [
          {
            "pattern": "react*",
            "group": "external",
            "position": "before"
          },
          {
            "pattern": "@recoil/**",
            "group": "internal",
            "position": "after"
          },
          {
            "pattern": "@pages/**",
            "group": "internal",
            "position": "after"
          },
          {
            "pattern": "@components/**",
            "group": "internal",
            "position": "after"
          },
        ],
        "alphabetize": {
          "caseInsensitive": true,
          "order": "asc"
        },
        "pathGroupsExcludedImportTypes": []
      }
    ]
  }
}

 

 

import/order을 더 잘 사용하는 방법

 

1. 절대 경로 사용하기

 

저의 경우 상대 경로보다, 절대 경로를 사용했을 때 더 유용하게 사용할 수 있었습니다.

 

CRA(create-react-app)로 만든 프로젝트 / Storybook 7 버전에서 절대 경로를 설정하는 방법 (with Typescript)

 

2. eslint의 auto save 기능 사용하기

 

 

vscode 환경에서 eslint extension을 사용한다면 저장하기 전 고칠 수 있는 코드라면 자동으로 고쳐주는 기능이 있습니다.

 

작동이 안된다면 settings.json에서 다음의 코드를 추가해보세요

 

"editor.codeActionsOnSave": {
    "source.fixAll": true
}

 

 

VScode - Auto fix eslint on save