Vite 의 alias path

Vite는 import path를 별칭으로 설정가능하다

사실 typescript 에서 가능한거임…

‘./src’ 를 @ 로 설정한다면

import 문을 이쁘게 바꿀수 있다.

일단 tsconfig.json 의 설정을 바꾸면 쉽게 설정가능하다.

vite로 React프로젝트를 만들었다면 3가지의 tsconfig파일이 존재하는데

이중 tsconfig.app.json 파일에 설정하면 된다.

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

위 처럼 compileOption에 paths를 추가 하면된다.

이제 모든 src 를 통해 import 되는 import 문 들은 @ 로 대체 가능하다.

하지만 이렇게만 하면 vite 측에서 오류를 뿜기때문에 아래와 같이 vite.config.ts 파일도 설정을 해줘야한다.

npm install -D vite-tsconfig-paths

위 플러그인을 설치후 vite.config파일에서

import tsconfigPaths from "vite-tsconfig-paths";
export default defineConfig({
	plugins: [react(), checker({ typescript: true }), tsconfigPaths()],
	...
})

플러그인을 위처럼 설정해준다.

(checker는 typescript 문법 체크 플러그인 이다.)

Vscode 의 auto import 기능을 alias path로 하기

vscode는 auto import 기능을 지원한다.

하지만 위 설정만 해둔 상태라면 자주 이용하는 auto import 기능이 alias 가 아닌 relative 경로로 import 된다.

그렇다면 vscode 설정을 직접 바꾸면 되는데

아래와 같이 두가지 js, ts import 설정을 non-relative로 바꾸면 된다.