Vite + Yarn + Typescript + React 환경에서 path alias 설정

Vite + Yarn + Typescript + React 환경에서 path alias 설정

vite.config.ts에 alias(별칭) 설정하기

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
  },
  resolve: {
    alias: [{ find: '@', replacement: '/src' }],
},
});

tsconfig.json에 다음과 같이 추가하기

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

but, 🚨 다음과 같이 tsconfig.json이 tsconfig.app.json과 tsconfig.node.json을 참조하고 있기 때문에
위 코드를 tsconfig.app.json과 tsconfig.node.json에도 추가해야 한다. ⭐️⭐️⭐️⭐️⭐️
(내가 이것 때문에 지금 학교 축제를 못 가고 있다 ㅠ.ㅠㅠ.ㅠ.)

"references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }],
  

이와 같이 alias를 설정해준다.
이렇게 하면 @를 붙이면 절대경로로 /src까지는 생략된 채로 인식한다.
예를 들어 ./../../components/~~ ← 대신 @/components/~~ 가 가능하다. 아주아주 편해진다!

😇 VSCode Import Module 경로 설정

추가로 아아아주 편하게 import 할 때 일일이 등록할 필요 없이 바로 @ ← 붙어서 절대 경로로 나오게 하는 방법..!

VSCode 설정에서 typescript.preferences를 검색하고 import Module Specifier 부분을 non-relative로 설정해주자 >.<

wow. 너무 편함 굳.

오류 없이 아주 잘 뜬다 ! import 도 편하게 등록된다 !!