[VSCode] 자동 import 시 alias 경로 적용 안될 때

vscode vite + react + ts 환경에서 alias 설정을 위해 tsconfig.json 및 vite.config.ts 등 필요한 설정을 추가했지만

자동 import를 할 때 설정한 alias 가 아닌 기본 상대 경로로 추가되는 문제가 발생했습니다 ,,

 

import { Button } from "./components/ui/button";

 

 

 

- 해결방법

vscode 설정에서 importModuleSpecifier 항목을 non-relative 로 변경해줍니다

mac 단축키: cmd + shift + p

Code > 기본 설정 > 설정

// json 설정의 경우
{
    "javascript.preferences.importModuleSpecifier": "non-relative",
    "typescript.preferences.importModuleSpecifier": "non-relative"
}

 

 

 

확인해보면 설정한 alias대로 import가 잘 적용되었습니다!

import { Button } from "@/components/ui/button";

 

 

 

- 그래도 바로 변경되지 않는다면?

Restart TS Server을 통해 다시 시작하거나 vscode 재시작

mac 단축키: cmd + ,

보기 > 명령 팔레트 > restart ts server