import 구문을 자동 정렬할 수 있는 lint

팀 프로젝트에서 import 구문의 순서에 대한 코드 컨벤션이 있었다. 컨벤션을 정해놓기는 했지만 일부 파일에서는 지켜지고 다른 파일에서는 지켜지지 않았다. 후반부로 갈 수록 시간에 쫓기다보니 더 신경쓰지 못했다. 

 

코드 컨벤션에 관한 팀 노션 페이지 중 일부

 

프로젝트가 끝난 후 이런 아쉬움을 달래줄 수 있는 방법이 있다는 걸 알게 되었다! import 구문 순서 규칙을 정할 수 있는 eslint 플러그인이 있었다. 역시 개발의 세계에서 그냥 노가다로 때워야 하는 건 없는 법이다. 이미 선배(의 선배의 선배...)들이 다 만들어놨어. 

 

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

 

위의 플러그인을 설치한 후 eslint 설정 파일에서 자신이 원하는 순서 규칙을 설정해주면 된다. 

 

{
  // 확장할 설정
  "extends": "next/core-web-vitals",
  // 플러그인 추가
  "plugins": ["import"],
  // 사용할 규칙 설정
  "rules": {
    "import/order": [
      "error",
      {
        "groups": [
          "builtin",
          "external",
          "internal",
          "parent",
          "sibling",
          "index"
        ],
        "pathGroups": [
          { "pattern": "next", "group": "builtin" },
          { "pattern": "react", "group": "builtin" },
          { "pattern": "@/components/**", "group": "internal" },
          { "pattern": "@/hooks/**", "group": "internal" },
          { "pattern": "@/util/**", "group": "internal" }
        ],
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        }
      }
    ]
  }
}

 

import/order의 규칙을 조금 더 상세히 살펴보자. 

 

1) error 

정한 규칙대로 순서가 아닌 경우, 에러 메시지를 띄워준다. 

 

2) groups

지켜야 하는 순서를 정의한다. "builtin", "external", "internal", "unknown", "parent", "sibling", "index", "object", "type"의 문자열을 가질 수 있다. 적용된 순서는 그룹 내 각 요소의 순서와 동일하다. 생략된 유형이 있는 경우 암묵적으로 마지막 요소로 함께 그룹화된다. 

디폴트 값은 ["builtin", "external", "parent", "sibling", "index"] 이다. 

 

3) pathGroups

추가 옵션을 설정하고 싶은 경로를 별칭과 함께 다시 그룹화할 수 있다. 

- pattern : 이 그룹에 포함될 경로에 대한 최소 일치 패턴 (builtin 또는 external에는 사용되지 않는다.)

- group : 허용된 그룹 중 하나를 선택한다. pathGroup은 이 그룹을 기준으로 배치된다. 

 

4) alphabetize 

import 경로를 기준으로 각 그룹 내 순서를 알파벳 순으로 정렬한다. 

- order: 오름차순 정렬은 asc, 내림차순 정렬은 desc를 지정 (디폴트 값: ignore)

- caseInsensitive : 대소문자 구분을 무시하려면 true, 대소문자를 구분하려면 false (디폴트 값: false) 

 

변경 전

세팅을 하고 파일을 보면 import 구문 순서를 따르지 않은 경우, 빨간 밑줄 표시가 뜬다. 밑줄에 마우스를 가져가면 다음과 같은 에러 메시지를 보여준다. 

 

빠른 수정을 클릭해서 fix all import/order problems를 선택한다. 

자동정렬 적용 후

 

하지만 이렇게 파일에서 일일이 수정하기보다는 터미널에서 --fix 명령어를 사용하는 편이 좋다. 

 

// eslint global 설치를 안 한 경우
./node_modules/.bin/eslint --fix .

// global 설치를 한 경우
eslint --fix


// 참고: eslint global 설치 명령어
npm install --save-dev -g eslint

 

개인 프로젝트에서는 TS를 사용하고 있지 않은데, TS를 사용하는 프로젝트의 경우 eslint-plugin-import 외에도 eslint-import-resolver-typescript, eslint-import-resolver-webpack 패키지를 설치하고 관련 설정을 추가로 해야 한다. 

 

 

📚 참고 자료

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