📌 VS Code에서 자동 import 시 alias가 아닌 상대 경로가 표시되는 문제 해결

📌 VS Code에서 자동 import 시 alias가 아닌 상대 경로가 표시되는 문제 해결

개발 중에 Quick Fix (자동 import)를 사용할 때, 원하는 alias 경로가 아닌 상대 경로가 자동으로 추가되는 문제가 발생했다.

• 원하는 import 형태

import Logo from "@/components/logo";

• 실제 자동 import된 형태

import Logo from "./logo";

이 문제의 원인은 VS Code 설정(typescript.preferences.importModuleSpecifier)이 alias 대신 상대 경로를 우선하도록 되어 있기 때문이다.

---

✅ 해결 방법: VS Code 설정 변경

VS Code 설정 열기 Ctrl + Shift + P (Mac: Cmd + Shift + P) → "Preferences: Open Settings (JSON)" 검색 후 선택

설정 추가 아래 JSON 설정을 추가한다.

{
  "typescript.preferences.importModuleSpecifier": "non-relative"
}

VS Code 재시작 변경된 설정이 적용되도록 VS Code를 재시작하거나, Ctrl + Shift + P (Mac: Cmd + Shift + P) → "TypeScript: Restart TS Server" 실행

---

이제 Quick Fix를 실행하면 상대 경로가 아닌 alias import가 정상적으로 적용될 것이다. 🚀 앞으로도 alias import가 잘 유지되는지 확인하면서 개발하면 좋을 것 같다! 🎯