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

문제 상황

• import 문을 상대경로로 작성할 경우, 파일이나 폴더 구조를 변경하면 파일을 찾지 못하는 경우가 발생한다.
• 파일 위치 변경 시 자동으로 import 문을 변경할거냐고 묻는 알림창이 뜨는데, 분명 Yes 를 선택했음에도 오류가 종종 발생하더라.. (변경은 해주는데 저장은 안해주는 것 같다.)
• import 문을 절대경로로 설정하기 위해서는 tsconfig 파일에 baseUrl 을 설정 하면 된다.
  • 아래와 같이 작성하면 src 하위 폴더를 @ 를 통해 표현할 수 있다.

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

• 나의 경우에는, 프로젝트 초기 설정시 baseUrl을 설정해주어서 프로젝트에서 절대 경로로 작성된 경로를 읽는데에는 문제가 없었으나, VSCode에서 import 문을 자동으로 상대경로로 작성하는 문제가 있었다.

해결 방법

• VSCode 설정 변경

VSCode > Ctrl + Shift + P > Preferences: Open Setting(UI) > TypeScript › Preferences: Import Module Specifier를 non-relative로 변경

[변경 전]

[변경 후]

• 이제 자동완성 시에도 상대경로로 잘 불러온다!
  

References

[다담다] import 경로 절대경로로 변경하기