vite + typescript 절대경로 설정

• 아래 이미지처럼 상대경로로 찾던 것을 절대경로로 바꾸고 싶을때

vscode 설정

• Setting 옆 아이콘 누르면 json으로 입력 가능 

// setting.json
"javascript.preferences.importModuleSpecifier": "non-relative",
"typescript.preferences.importModuleSpecifier": "non-relative",

 

--- 

• src 별칭을 ~로 할 것인데 @로 하고 싶으면 ~ 대신 @ 작성

vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [{ find: "~", replacement: "/src" }],
  },
});

tsconfig.json

• baseUrl, paths, include 작성

{
  "compilerOptions": {
    ...
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"],
    }
  },
  "include": ["src", "**/*.ts", "**/*.tsx"],
  "references": [{ "path": "./tsconfig.node.json" }]
}