TypeScript 5.8의 Auto-Import 개선 사항 적용 후기

배경

회사 프로젝트를 TypeScript 5.7에서 5.8로 업그레이드했다. 릴리즈 노트를 보니 auto-import 관련해서 몇 가지 개선이 있었는데, 실제로 적용해보니 예상치 못한 부분에서 기존 설정과 충돌이 발생했다.

문제 상황

5.8부터는 auto-import 시 named import를 자동으로 알파벳순으로 정렬해준다. 좋은 기능이지만 우리 팀은 eslint-plugin-import의 sort-imports 규칙을 사용 중이었고, 정렬 기준이 달랐다.

// TS 5.8 auto-import 결과
import { Button, Card, Input } from '@/components';

// ESLint 기대 결과 (대소문자 구분)
import { Button, Card, Input } from '@/components';

단순해 보이지만 컴포넌트명이 섞여있을 때 TS는 case-insensitive 정렬을, ESLint는 case-sensitive 정렬을 적용해서 매번 저장 시 순서가 바뀌는 문제가 있었다.

해결 방법

tsconfig.json에 organizeImports 옵션을 명시적으로 설정했다.

{
  "compilerOptions": {
    "organizeImports": {
      "caseInsensitive": false
    }
  }
}

ESLint 설정도 일부 조정했다. sort-imports 대신 TypeScript 내장 정렬을 신뢰하기로 결정하고 해당 규칙을 비활성화했다.

// .eslintrc.js
modules.exports = {
  rules: {
    'sort-imports': 'off',
    'import/order': ['error', {
      'groups': ['builtin', 'external', 'internal'],
      'alphabetize': { 'order': 'asc' }
    }]
  }
};

추가 개선 사항

5.8에서는 barrel export 파일(index.ts)에서의 import 성능도 개선됐다고 한다. 실제로 대규모 컴포넌트 라이브러리에서 auto-import 속도가 체감상 빨라진 것 같다.

다만 여전히 path alias 설정이 복잡한 모노레포 환경에서는 가끔 잘못된 경로를 제안하는 경우가 있어서, paths 설정을 더 명확하게 정리할 필요가 있다.

결론

TypeScript의 auto-import 개선은 분명 생산성 향상에 도움이 되지만, 기존 린팅 도구와의 조율이 필요하다. 팀 컨벤션을 먼저 정하고, 그에 맞춰 도구를 설정하는 것이 중요하다.