[Vite + eslint] 절대경로 설정하기

CRA로 생성한 리액트 앱에서 src 경로에 있는 컴포넌트를 import 해올 때 절대경로에서 불러와서 쓰곤 했는데,

이번에 vite로 생성한 프로젝트에는 절대경로 설정하는 법이 조금 달라 설정해주는데 헤맸다.

 

 

 

src/foo/boo... 와 같은 방식으로 import 해오는 방법

import MyComponent from 'src/foo/boo'

 

vite.config.ts 파일

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      src: '/src',
    },
  },
})

 

tsconfig.json 파일

{
  "compilerOptions": {
    //(...생략)
    "baseUrl": "./",
    "paths": {
      "src/*": ["./src/*"]
    }
  },
  "include": ["src", "**/*.ts", "**/*.tsx"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

 

 

 

 

 

 

 

 

 

 

 

 

참고사이트

https://l4279625.tistory.com/entry/vite-%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94-%EB%B2%95

https://stackoverflow.com/questions/68241263/absolute-path-not-working-in-vite-project-react-ts

https://stackoverflow.com/questions/70648181/how-to-resolve-absolute-path-using-vite-and-eslint-in-svelte