[Refactor/ESlint] ESlint-plugin-import로 import문 순서 린팅하기

* 코드스테이츠 메인 프로젝트로 진행한 "JOYING: 세상의 모든 OTT 컨텐츠를 한 곳에 보여조잉"을 팀원들과 함께 리팩토링하면서 작성한 일지입니다.

메인프로젝트 소개와 회고 보기

 

메인프로젝트 끝나고 리팩토링을 하면서 제일 먼저 초기 세팅을 몇가지 추가했다.

path alias 설정과 ESlint 규칙 추가를 했는데 path alias 설정은 금방 했지만 ESlint는 설정할 때마다 eslintrc의 설정 항목들이 너무 많고 원치 않는 오류가 날 때 어떻게 해결해야 할지 모르겠어서 어렵다.

오늘은 ESlint-plugin-import를 이용해 임포트문 순서 컨벤션을 린팅하는 설정을 하다가 머리가 뽀개지고 말았다😢

 

ESlint-plugin-import 인스톨하기

우리 프로젝트는 타입스크립트를 사용하고 있기 때문에 필요한 플러그인들을 함께 설치해야 한다.

# 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

이렇게 eslint-plugin-import와 eslint-import-resolver-webpack, eslint-import-resolver-typescript를 깔아주면 웹팩과 타입스크립트를 사용하는 프로젝트에서 임포트문 규칙을 쉽게(?) 린팅할 수 있다.

 

룰 추가하기

플러그인 설치를 하고 나서 임포트문 순서를 정하는 룰을 eslintrc.json에 추가해야 했다. 추천 설정을 가져와 쓸 수도 있고 커스텀을 할 수도 있다. 나는 커스텀 룰을 다음과 같이 지정했다.

  "rules": {
    "import/no-unresolved": "error", //import문에서 해결할 수 없는 모듈을 사용하면 에러 발생
    "import/order": [
      "error",
      {
        /* import문 순서 지정 */
        "groups": [
          "builtin", //내장 모듈
          "external", //외장 모듈
          "internal", //프로젝트 내부 모듈
          ["sibling", "parent", "index"], //부모, 형제 디렉토리 모듈과 같은 디렉토리 내 index 모듈
          "type", //type 모듈
          "unknown"
        ],
        "pathGroups": [
          {
            "pattern": "@/**", //커스텀 path alias 지정
            "group": "internal",
            "position": "after"
          }
        ],
        /* 같은 순서의 group일 때 알파벳 정렬 순서 지정 */
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        }
      }
    ]
  },

 

파싱 에러 멈쳐조..

그러나 끝도 없는 에러가 나를 기다리고 있었으니.. 일단은 설정을 마쳤는데도 린트가 린팅을 안 해줘서 import문 부분에 오류가 뜨지를 않았다. npm run lint 명령어로 ESlint를 실행하면 ESlint의 어떤 부분에서 에러가 나는지를 알 수 있다고 해서 해 보니 진작부터 eslintrc.json 파일이 잘못돼 있었다.

 

 

프리티어 관련 룰을 'rules' 안에 추가해야 하는데 최상단에 두어서 에러가 났던 것. 잘못된 ESlint 설정으로 프로젝트 마무리까지 달려 버린 팀이 있다..?ㅠㅠㅠ

그런데 이 오류를 해결하고 시도했더니 이제는 import문 부분에 오류가 뜨기는 하는데 자꾸 파싱 에러가 났다. tsconfig 파일 경로를 잘못 인식하고 있었는데 그 오류를 해결하려고 parserOptions의 project 부분의 경로를 고치면 이번엔 import문 린팅하는 부분에서 자꾸 경로 에러가 떴다.

 

tsconfig 파일은 client 폴더 안에 있으므로 client 경로를 추가하면

이번엔 여기에서 client/client를 찾고 있음..

 

그래서 그냥 경로명을 루트 경로 내 모든 곳에서 찾게 바꿔서 일단은 해결을 했다... 그렇지만 왠지 찝찝 ㅠㅠ

  "parserOptions": {
    "project": "./**/tsconfig.json"
    }

마지막으로 타입스크립트에서 React.MouseEvent나 JSX.element 같이 타입을 지정해 줄 때 'React'나 'JSX'가 정의돼 있지 않다는 에러가 떴는데, 이것은 global 변수를 설정해줌으로써 해결했다.

  "globals": {
    "React": true,
    "JSX": true
  }

그런데 블로깅하면서 더 자세히 알아보니 ESlint에서는 공식적으로 타입스크립트 프로젝트에서 'no-def'룰을 꺼두는 식으로 해당 문제를 해결하라고 권하고 있(었다고는 하는데 지금 보니까 사라진 것 같다).

 

어차피 이렇게 설정하느라고 고생할 거면 그냥 에어비앤비 갖다 쓸걸...🥲🥲🥲

 

---

내가 보려고 정리하는 참고자료

no-def rule

https://stackoverflow.com/questions/64170868/why-eslint-consider-jsx-or-some-react-types-undefined-since-upgrade-typescript