[Vue x vite] @ path 별칭 의미 및 VSCode 설정

최근 Vue 설치하신분들은 Vite(비트)를 Build Tool로 지정하여 사용하실 텐데요.

Vite에서 @ Alias(별칭)에 대한 소개가 별로 없어서 정리해보겠습니다.

Vite 설정파일

Vite 설정파일은 Project 폴더 바로 아래 위치합니다.

해당 파일 안에서 alias를 지정할 수 있는데요. 기본적으로 ./src -> @ 로 지정되어있습니다.

 

vite.config.js

vite.config.js 내용

위 이미지처럼 alias 를 지정하였기 때문에 @를 사용해서 경로 지정이 가능합니다.

@를 이용한 경로지정

./src/components -> @/components <!-- 같은 path -->

이런식으로 작성하면 상대 경로를 고민할 필요없이 간단하게 작성이 가능합니다.

VSCode Editor에 별칭 등록

Vite는 Build Tool이기 떄문에 Compile시에 Alias를 정해진 Url로 바꿔줄수 있지만 Editor는 알 수 없습니다.

VScode Editor에도 별칭을 등록하면 해당 별칭의 Url을 인식하여 자동완성 기능을 사용할 수 있습니다.

순서

1. 루트 경로(프로젝트 폴더 하위)에 jsconfig.json 생성

2. 코드 작성

3. Reload Window

jsconfig.json

// jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [		// @ 별칭 등록
        "./src/*"	
      ]
    }
  },
  "exclude": [
    "node_modules",
    "dist",
    "public"
  ]
}

jsconfig.json 적용을 위해 창을 리로드 합니다.

Ctrl + Shift + p(커맨드 팔레트) > Reload Window

Reload Window

자동완성 적용

 

이상으로 @ path 의미와 별칭에 대해 알아보고 Editor에 별칭 등록하는 것 까지 알아보았습니다.

감사합니다.