Simplifying Imports in a Vite Project Using "@/"

Managing import paths in your Vite project can become significantly easier by using "@/" for imports. Traditional import paths like "../../" can be cumbersome, especially when you move files around or reorganize your project structure. Using "@/" to refer to the src/ directory, and "&/" to refer to the project root, helps to mitigate these issues.

Updata tsconfig.json

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

Example Usage

import { App } from '@/pages'; // instead of import { App } from '../pages' ❌
import { Types } from '&/types'; // instead of import { Types } from '../../types'❌