Настраиваем удобные псевдонимы путей в Vite

Проблема длинных путей импорта

Каждый раз при импорте компонентов или хуков в проекте на Vite приходится писать длинные относительные пути вроде ../../. Это не только некрасиво и неудобно, но и приводит к проблемам при рефакторинге структуры проекта.

Что такое путь псевдонимов?

Псевдоним пути позволяет заменить длинный относительный путь коротким символом. Например, вместо того чтобы писать:

import Button from "../../../components/ui/Button";

можно использовать более короткий вариант:

import Button from "@components/ui/Button";

Это делает код чище, предсказуемее и устойчивым к изменениям структуры проекта.

Настройка псевдонима пути в Vite

Настроить псевдонимы путей в Vite очень просто. Для этого нужно выполнить несколько шагов.

Шаг 1: Конфигурация Vite (`vite.config.ts`)

Откройте файл конфигурации Vite и добавьте следующие настройки:

// vite.config.ts
import { resolve } from "path"

export default {
  resolve: {
    alias: [
      { find: /^\@components/, replacement: resolve(__dirname, './src/components') },
      { find: /^\@hooks/, replacement: resolve(__dirname, './src/hooks') },
      { find: /^\@utils/, replacement: resolve(__dirname, './src/utils') }
    ]
  }
}

Теперь вы можете использовать псевдонимы типа @components, @hooks и другие в своих импортных путях.

Шаг 2: Обновление конфигурационного файла TypeScript (`tsconfig.json`)

Если ваш проект использует TypeScript, необходимо также обновить файл tsconfig.json:

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

Эти изменения позволят компилятору TypeScript распознавать новые псевдонимы.

Заключение

Использование псевдонимов путей значительно упрощает работу над проектом, делая его структуру более понятной и удобной для поддержки.

Advanced Path Aliases в Vite: избавляемся от ../../ навсегда