[React + Typescript + Vite] ESLint import / order Rule 적용하기

ESLint룰 중 유용하다고 생각한 룰 중 하나가 import/order 이다.
react + typescript + vite 로 구성된 새 프로젝트에서 import order rule을 적용할때 있었던 이슈에 관해 정리해보려고 한다.

적용 방법

설정하는 과정, 방법은 잘 정리된 글이 많아서 생략한다.
아래 목록은 내가 도움이 많이 되었던 글들이며, 참고하면 도움이 될 것이다!
참고 1
참고 2
참고 3
참고 4

이슈 1. pathGroupsExcludedImportTypes

이슈라기 보다는.. 고민되었던 설정값이 있다.

공식문서에 pathGroups 에 구성되지 않은 import types을 정의한다고 나와있는데, 예를 들어 타사 모듈에 대한 가져오기 유형이 pathGroups순서에 따라 정렬되는 것을 의미한다.

즉, pathGroups 설정을 했음에도 불구하고 적용되지 않는 타입들을 예외처리하여 적용될 수 있도록 도와준다. (보통 external group에 해당되는 것)

예시로 나와있는 react는 적용이 잘 되는 것 같아서, tanstack을 추가해주었다.

이슈 2. unresolved

eslint-plugin-import 플러그인을 찾아서 설치해서 열심히 적용했는데, 다음과 같은 에러가 발생했다.

Unable to resolve path to module 'App'.eslintimport/no-unresolved

이는 eslint-plugin-import 플러그인이 eslint team에 의해 관리되지 않기 때문에 발생한 것이었고, eslintrc 파일에 다음과 같은 설정을 추가해주고, eslint-import-resolver-typescript룰 설치해주어야 해결된다. 해당 이슈 확인하기

  settings: {
    'import/resolver': {
      typescript: {
        directory: './src',
      },
    },
    'import/parsers': { '@typescript-eslint/parser': ['.ts', '.tsx'] },
  },

이슈 2.동작 안됨

이상하게 App.tsx와 main.tsx 둘다 맨 아래줄에 있는 코드만 lint가 돌지 않았다. 각각의 코드는 다음과 같았다.

처음엔 최상단과 최하단의 import 구분은 적용이 되지 않는 것일까? 싶어서 챗 쥐피티에게 물어보니 그럴 수 있다고 했다. 그래서 의아했는데.. 그것이 문제가 아니었다.

App.tsx와 main.tsx 최하단 줄의 공통점이 보이는가?
그렇다. 바로 .css 때문이었다.

css 파일 import 같은 경우 적용이 안돼서 해당 코드 직전/직후에 있으면 적용이 안되는 것이었다. 그래서 import order rule에 아래와 같이 추가해주었다.

{
  "pattern": '*.css',
  "group": "index",
  "position": "after"
}

근데 여전히 적용이 되지 않았다. 찾아보니 eslint-plugin-import에 이런 이슈가 있었고, 별도로 css import order 플러그인을 설치해줘야하는 것 같았다.

어차피 안쓸거니까 지워버리고 수동으로 최하단에 배치했다.~~ 앞으로의 프로젝트에서 css파일을 import할 일이 없는데 굳이..~~

이슈에 관한 더 나은 해결 방법이 있다면 언제든 댓글로 공유해주세요~ ٩( ᐛ )و