vscode에서 Vite react 절대경로 자동 설정

똘똘이·2023년 3월 30일
3

vite react 절대경로 설정

절대경로 설정

vite.config.js

밑의 내용은 ./src를 @로 대체한다는 뜻. @대신 원하는 것을 넣으시면 됩니다.

import { defineConfig } from 'vite';
import { resolve } from 'node:path';
import react from '@vitejs/plugin-react';

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

를 해줘도 절대경로로 import 자동적용이 안되었는데

VSCode 자동완성 설정

위 설정만 한다면 파일을 import할 수 있지만, VSCode는 이를 인지하지 못하기 때문에 경로를 자동으로 완성해주지 않습니다.

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

만약 Typescript 프로젝트가 아니라면 jsconfig.json에 정의해주세요.

위 코드를 작성해주시면 VSCode도 절대 경로를 인식할 수 있습니다.

import NavBar from "@/components/Common/NavBar";

이와 같이 자동으로 적용됩니다.

출처

[Vue] 절대 경로 import

를 통해서 해결했다.

profile
똘똘이

0개의 댓글