Как из каши импортов сделать сортированный список Frontend

Всем привет! Меня зовут Владимир и работаю джуниор фронтенд разработчиком в одной из лучших компаний 🙂

Сегодня хочу вам рассказать, как можно немного причесать ваш проект чтобы он выглядел более читабельным.

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

• Конечно же наш 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 и получаем сортированные импорты.

Спасибо всем, кто дочитал до конца!

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