Всем привет! Меня зовут Владимир и работаю джуниор фронтенд разработчиком в одной из лучших компаний:)
Сегодня хочу вам рассказать, как можно немного причесать ваш проект чтобы он выглядел более читабельным.

И так рецепт нашего блюда

• Конечно же наш Prettier

• Редактор кода

• Плагин @trivago/prettier-plugin-sort-imports": "^5.2.2

• И конечно же ваш проект(в моем случае это будет NextJs) с файлом .prettierrc для конфига нашего Prettier форматера)

• 15 минут вашего времени)

1 - Для начала устанавливаем плагин в ваш редактор кода(в моем случае это vsCode). Если вы пишите в блокноте - значит дальше вам читать нет смысла. Далее открываем вкладку с расширениями и находим данный плагин Prettier - Code formatter. Устанавливаем

2 - Далее после установки надо зайти в конфиг данного плагина. Это можно сделать нажав на кнопку шестеренку при открытие плагина в магазине и затем выбрать Параметры.
После ищем поле Config Path и добавляем название файла конфига, которые лежит в корне проекта. У меня он называется .prettierrc .

3 - затем устанавливаем в дев зависимости проекта наш пакет для сортировки и пишем
npm i prettier @trivago/prettier-plugin-sort-imports -D

4 - затем открываем наш файл .prettierrc и закидываем туда конфиги, которые вам нужны. Помимо сортировки импортов вы можете туда добавить добавление одинарных или двойных кавычек, отступы, перенос строк. Думаю вы знакомы с этим плагином, так как каждый день он помогает навести порядок в вашем проекте.

5 - начинаем прописывать туда конфиги. В проекте использую FSD архитектуру и импортирую по значимости для меня в работе(порядок вы всегда можете поменять).

{
  "semi": true, // точка с запятой в конце кода
  "singleQuote": true, // одинарные кавычки
  "printWidth": 80, // максимальная длина строки
  "tabWidth": 2, // сколько отступов от начала строки при переходе на новую
  "trailingComma": "es5", // версия EcmaScrirt
  "bracketSameLine": true, // вот этот не помню :D
  "plugins": ["@trivago/prettier-plugin-sort-imports"], // наш плагин для сортировки
  "importOrder": [ // и тут начинается порядок импортов
    "^[react]", // все что идет со словом react
    "^./hooks", // затем пользовательские хуки
    "^~/icons", // наши иконки 
    "^@(?!/)", // все файлы начинающиеся с @ без /
    "^@/entities", // наши сущности
    "^@/features", // фичи
    "^@/widget", // виджеты
    "^@/shared", // shared
    "^./ui", // все доп компоненты лежащие рядом с основным
    "^[./]" // стили которые лежат в файлах ts (мы используем cva для стилей)
  ],
  "importOrderSeparation": true, // импорты у нас разделены пробелами
  "importOrderSortSpecifiers": true // а это для чего? вопрос для читателей)
}

И теперь заходим в любой файл нашего проекта и нажимаем cmd + s и получаем сортированные импорты.

Спасибо всем кто дочитал до конца!
Буду очень рад если посоветуете как это можно улучшить с вашей точки зрения:D
По вопросам и предложениям работы можно писать мне в телеграм https://t.me/sadbatya