[Rule] import/order의 module alias 정렬 문제

[giwan-dev]

제안

From titicacadev/triple-air-web#928

AS-IS: Rule of Standard

module alias를 사용한 임포트 문들이 임포트 문중 가장 아래에 위치합니다.

import React from 'react'
import { Container } from '@titicaca/core-elements'

import foo './foo'

import Button from '$components/button'

TO-BE

module alias를 사용한 임포트 문은 external 아래, local 위에 있어야 합니다.

import React from 'react'
import { Container } from '@titicaca/core-elements'

import Button from '$components/button' // or import Button from '@/components/button'

import foo './foo'

예상 해결 방법

eslint-plugin-import에 pathGroups라는 옵션을 사용하면 새로운 그룹을 만들 수 있습니다. 그런데 eslint-plugin-import가 next.js에서 사용하는 @/ 접두사를 external로 분류하는 것으로 보입니다. external 모듈은 pathGroups 옵션의 패턴 매칭에서 아예 제외되기 때문에 새로운 그룹을 만들어 낼 수 없습니다. 그래서 다음 두 가지 해결책이 있습니다.

1. 기존에 사용하던 $src를 pathGroups에 추가하여 정렬한다.
2. @/*를 internal 모듈로 인식하도록 eslint-plugin-import를 수정한다.

---

댓글로 이모지 또는 새로운 의견을 남겨주세요~
ex) - 3️⃣ : 나는 요래조래

• 1️⃣ : 기존안 유지
• 2️⃣ : 제안대로 수정

[inbeom]

1️⃣ 같은 3️⃣?: minimatch pattern으로 @/** 를 써주면 1️⃣ 처럼 path group을 만들어줄 수 있을 것 같아요!

[giwan-dev]

@/가 인식이 안되는 문제가 수정은 되었는데 아직 릴리즈는 안되었군요... 😢
import-js/eslint-plugin-import#1854

[rhiokim]

저도 pathGroup 을 추가하는 쪽으로 1️⃣ 한표 행사해봅니다. 🙏

[inbeom]

흐흑 거의 1달이 지나갔는데.. 아직도 릴리즈 전이네요 😢

[giwan-dev]

오 이거 어제 릴리즈 됐네요ㅎㅎㅎ작업해보겠슴다

[giwan-dev]

윽 수정이 order에 적용된게 아니라 extension에만 적용 된 것 같네요ㄷㄷ

[giwan-dev]

저 PR이 order쪽엔 영향을 안 주는데요. 자세히 읽어보니 스코프 모듈(@abc/def)인지 구분하는 함수가 두 개로 쪼개져 있더라구요...ㄷㄷ

근데 수정과 별개로 pathGroups를 사용할 그룹을 정하는 옵션이 있었어요. @/**가 external 모듈로 분류 되기 때문에 분리가 안되는 문제였는데, 기본이 ['builtin', 'external']이었어요. pathGroupsExcludedImportTypes 옵션을 ['builtin']으로 바꿔주면 작동하네요.....