5. Path Alias Strategy (@/)

Wajib menggunakan path alias @/ untuk merujuk ke folder root project (atau folder src/ jika menggunakan src). Ini menghilangkan ketergantungan pada path relatif yang rapuh, panjang, dan sulit dibaca seperti ../../../components/ui/Button. Dengan path alias, import menjadi lebih bersih dan konsisten: import { Button } from '@/components/ui/Button'.

A. Konfigurasi untuk Project Tanpa Folder src/

Karena kita meletakkan folder app/, components/, lib/, dll. langsung di tingkat root (tanpa folder src/), maka path alias @/ diarahkan langsung ke direktori dasar (./).

1. Konfigurasi tsconfig.json

Tambahkan konfigurasi baseUrl dan paths di dalam compilerOptions:

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

2. Konfigurasi vite.config.ts (Untuk Project Vite)

Untuk memastikan bundler Vite dapat membaca resolusi path alias tersebut, gunakan package vite-tsconfig-paths (direkomendasikan) atau konfigurasikan manual menggunakan path Node.js:

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./"),
    },
  },
});

B. Konfigurasi untuk Project Dengan Folder src/ (Opsional/Legacy)

Jika project Anda menggunakan konvensi folder src/, maka path alias @/ harus diarahkan ke dalam direktori src/ tersebut.

1. Konfigurasi tsconfig.json

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

2. Konfigurasi vite.config.ts

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});