[ Vite + React + Vscode ] 절대 경로 별칭 @로 자동 import 하기

 

 

난리났음

 

 

자동 import의 상대경로들이 너무 지저분해보이기도 하고, 한번에 경로를 알아보기가 힘든 것 같아 import를 절대 경로로 바꾸어주기로 했다.

 

대부분 글을 검색하면 tsconfig.json 과 vite.config.ts 파일 설정법만 알려주기에, vscode의 기능을 활용하여 자동 import 시에도 절대 경로를 설정하는 법을 기록한다.  

---

1. VS Code 설정 변경

1. typescript.preferences.importModuleSpecifier 설정

VS Code는 기본적으로 상대 경로를 선호하도록 설정되어 있다. 이를 절대 경로로 변경하려면 VS Code 설정을 업데이트해야 한다.

1. VS Code 설정 열기
   • Ctrl + , (Windows) 또는 Cmd + , (macOS)를 눌러 설정 창을 연다.
2. 검색창에 importModuleSpecifier 입력.
3. typescript.preferences.importModuleSpecifier를 non-relative로 설정한다.

typescript.preferences.importModuleSpecifier를 non-relative로 설정

 

 

2. Vite.config.ts

1.라이브러리 설치 

 

먼저, 필요한 라이브러리를 설치한다. svgr은 svg를 컴포넌트처럼 사용할 수 있게 해주는 모듈인데, 거의 필수적으로 사용하는 편이라 함께 설치하였다.

npm install @types/node 
npm install vite-tsconfig-paths // tsconfig의 paths를 적용시켜주는 플러그인
npm install --save-dev vite-plugin-svgr // svg 관련 플러그인

 

1.vite.config.ts에 내용 작성

 

'@' 별칭이 'src' 폴더로 시작하는 경로들을 가리키도록 설정한다. 

따로 별칭을 지어주고 싶은 경로가 있다면 이 곳에서 하면 된다.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import svgr from "vite-plugin-svgr";
import tsconfigPaths from "vite-tsconfig-paths";
import path from "path";

// https://vite.dev/config/
export default defineConfig({
  envDir: ".env",
  plugins: [react(), svgr(), tsconfigPaths()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
});

 

 

3. tsconfig.json

1.파일 수정 

기본적으로 적혀있는 json 파일에, 아래 내용을 추가한다.

{
  "compilerOptions": {
    "baseUrl": ".", // 프로젝트 루트를 기준으로 경로 설정
    "paths": {
      "@/*": ["src/*"] // '@' 별칭을 'src'로 매핑
    }
  }
}

 

전체 코드는 다음과 같다.

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".", // 프로젝트 루트를 기준으로 경로 설정
    "paths": {
      "@/*": ["src/*"] // '@' 별칭을 'src'로 매핑
    }
  }
}

 

 

4. tsconfig.app.json

1.파일 수정 

기본적으로 적혀있는 json 파일에, 아래 내용을 추가한다.

 

/* 추가설정 */
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }

 

 

전체 코드는 아래와 같다.

 

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,

    /* 추가설정 */
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"]
}

 

 

 

/src/components 폴더에 Test.tsx 파일을 만들고, 테스트 컴포넌트를 import 해보자.

 

자동 import에서 @/components 경로로 뜨는 모습

 

 

 

 

@ 별칭을 이용한 절대 경로로 잘 import 되는 것을 확인할 수 있다. 끝 ~