📦 Абсолютные пути в импортах: как навести порядок в проекте?

Каждый разработчик хотя бы раз сталкивался с этим:

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

Чем больше вложенность — тем страшнее становится.

😱 Почему относительные пути — боль

• Сложно понять, откуда что импортируется.
• Один перенос файла — и всё ломается.
• В больших проектах — просто ад.

✅ Почему стоит использовать абсолютные импорты

1. Избавление от “путевого ада”

Чёткая структура без лесенок из ../../../../../.

import Button from 'components/ui/Button';

2. Упрощение рефакторинга

Меняешь структуру — и ничего не ломается.
Больше не надо пересчитывать, сколько уровней вверх.

3. Единообразие кода

Все импорты читаются одинаково, независимо от глубины.

4. Быстрая навигация

Современные IDE (WebStorm, VSCode) понимают абсолютные пути и дают:

• автодополнение,
• переход к определению (Ctrl+Click),
• подсветку несуществующих путей.

🛠 Как реализовать?

JavaScript / TypeScript (Webpack/Vite)

Vite

vite.config.ts:

import { defineConfig } from 'vite';
import path from 'path';
 
export default defineConfig({
	resolve: {
		alias: {
			'@': path.resolve(__dirname, './src')
		}
	}
});

tsconfig.json:

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

Webpack

webpack.config.js:

const path = require('path');
 
module.exports = {
	resolve: {
		alias: {
			'@': path.resolve(__dirname, 'src')
		}
	}
};

Next.js

В jsconfig.json или tsconfig.json:

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

И используйте так:

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

🚫 Когда не стоит использовать?

• В маленьких pet-проектах, где один-два уровня вложенности.
• В монорепозиториях без единого root.
• Если проект строго следует стандарту, запрещающему алиасы.

💡 Преимущества абсолютных импортов

• 🔍 Четкость структуры — видно, откуда импортируется.
• 🔄 Устойчивость к изменениям — структура может меняться, импорты — нет.
• 👥 Совместимость между командами — легче читать и понимать чужой код.
• 🧹 Легче рефакторить — безопасное перемещение файлов.
• 🧪 Тестируемость — тесты не зависят от текущего местоположения.

📝 Вывод

Абсолютные импорты — это как уборка в проекте:
Сначала непривычно, потом — не понимаешь, как жил без них.

📌 Настройте alias’ы, добавьте их в tsconfig и забудьте про ../../../.

Ваш код и ваша команда - скажет спасибо 🙌