[Vue.js] VSCode 에서 '@/~' 로 임포트한 모듈 자동완성(IntelliSense) 적용하기

관련 포스트
링크 - WebStorm 에서 '@/~' 로 임포트한 모듈 자동완성(IntelliSense) 적용하기

Vue.js 개발 시 VSCode를 사용하면서

상대경로로 모듈을 import 하게되면 해당 모듈의 메소드 및 속성이 자동완성(IntelliSense)이 되었지만..

webpack에 의해서 src를 가리키는 @ 기호를 이용한 import는 자동완성이 되지 않아 불편했었다.


PS.
Ctrl + 마우스왼쪽클릭 시에도 해당 모듈로 바로 넘어가지 않는부분 또한 많이 불편한 부분중에 하나였다.

상대경로로 import 했을 시

@기호를 이용하여 import 했을 시

VSCode 메뉴얼을 보다보니 아래와 같이 jsconfig.json 을 이용하여 자동완성이 될 수 있도록 할 수 있었다.


1. Project Root 경로에 jsconfig.json 파일을 만들고 내용에 아래와 같이 넣어준다.
1004lucifer

1004lucifer

jsconfig.json 파일내용

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

jsconfig.json 파일을 작업해주면 아래와 같이 @ 기호를 사용했을 시에도 자동완성 기능이 동작하며, Ctrl+마우스클릭 시 해당 모듈로 바로 넘어가게 된다.
1004lucifer

PS.
Vue.js 에서 @기호 때문에 jsconfig.json 파일을 작성했지만..
React or Angular 같은 곳에서 특정 디렉토리를 바로 참조해야 하거나 할때도 마찬가지로 사용이 가능하다.


참고
 - https://code.visualstudio.com/docs/languages/jsconfig