TSX. Сортировка импортов

🧱 Суть

Порядок импортов не влияет на работу приложения, но сильно влияет на читаемость.

📦 Проблема

В больших проектах по импортам сразу должно быть понятно:

какие зависимости внешние;
какие относятся к общим модулям;
какие используются только внутри текущей фичи;
где находятся стили.

Хороший порядок делает код предсказуемым и уменьшает количество конфликтов при работе команды.

✅ Решение

1. Сторонние библиотеки (npm)

Сначала идут внешние зависимости:

import React from 'react';
import { observer } from 'mobx-react-lite';

2. Абсолютные импорты

Общие модули проекта:

import { api } from 'shared/api';
import { useStore } from 'entities/store';

Обычно используются через алиасы:

@/shared
@/entities
@/features

3. Относительные импорты

Импорты внутри текущего модуля:

import { WeatherCurrent } from './ui/WeatherCurrent';
import { useWeather } from './model/useWeather';

4. Стили

Обычно в конце:

import './styles.css';

💻 Код

Пример структуры

// 1. Библиотеки
import React from 'react';
 
// 2. Shared / общие модули
import Button from 'shared/ui/Button';
import Preloader from 'shared/ui/Preloader';
 
// 3. Текущая фича
import { WeatherCurrent } from './ui/WeatherCurrent';
import { WeatherForecast } from './ui/WeatherForecast';
 
// 4. Логика
import { useCity } from './model/useCity';
import { useWeather } from './model/useWeather';
 
// 5. Стили
import './styles.css';

Автоматическая сортировка

Используют:

npm install --save-dev eslint-plugin-simple-import-sort

Добавить плагин:

plugins: [
	'simple-import-sort'
]

Добавить правила:

rules: {
	'simple-import-sort/imports': 'warn',
	'simple-import-sort/exports': 'warn'
}

Теперь ESLint сможет автоматически исправлять порядок:

eslint --fix

🎯 Вывод

Хороший порядок:

npm-библиотеки
абсолютные импорты проекта
относительные импорты
стили

LETUNOFF DOCS

Навигация