Всем привет! Меня зовут Владимир и работаю джуниор фронтенд разработчиком в одной из лучших компаний :-)
Сегодня хочу вам рассказать, как можно немного причесать ваш проект чтобы он выглядел более читабельным.
И так рецепт нашего блюда
Конечно же наш 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 и получаем сортированные импорты.
Спасибо всем, кто дочитал до конца!
Буду очень рад, если посоветуете, как это можно улучшить с вашей точки зрения.
По вопросам и предложениям работы можно писать мне в телеграм.
