[VSCode] import문 자동완성 절대 경로 설정

처음으로 비교적 장기간(?) 프로젝트를 시작하면서 컨벤션을 꼼꼼하게 잡아보았다.

그중에서도 다음과 같은 이유로 import 시 절대 경로를 사용하는 것을 컨벤션으로 정했다:

1. 폴더 구조가 깊어질 가능성이 높기에 가독성 향상이 필요함
2. 파일 위치 변경시 상대 경로가 깨질 가능성이 높음
3. 코드 리뷰와 협업 시, 절대 경로가 상대 경로보다 경로를 파악하기 쉬움

이를 위해 프로젝트 시작 전에 tsconfig.json에 다음과 같은 설정을 추가했다.

    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }

이 설정으로 인해 자동으로 절대 경로를 사용할 수 있을 것이라 생각했지만, 여전히 import가 상대 경로로 작성되는 문제가 발생했다.

---

문제 원인 분석

처음에는 ESLint나 Prettier 설정에서 상대 경로로 변환하는 규칙이 적용된 게 아닌가? 싶어 확인했지만 설정에는 문제가 없었다.

알고 보니 VSCode 설정 자체가 상대 경로를 기본값으로 사용하도록 되어 있어, 앞서 작성한 TypeScript 설정을 덮어쓴 것이었다.

---

해결 방법

이 문제는 다음과 같은 과정으로 간단히 해결할 수 있었다:

1. VSCode에서 Command Palette 열기
   • Ctrl(Commadn) + Shift + P
2. Preferences: Open Settings (UI) 선택
3. TypeScript Import 설정 변경
   • 검색창에 import module specifier 입력
   • TypeScript > Preferences: Import Module Specifier를 non-relative로 변경
4. VSCode 재시작