Введение

Неорганизованный импорт сильно беспокоит меня при работе над проектом. Обычно я предпочитаю, чтобы вся кодовая база была как можно более организованной, так как это значительно упрощает просеивание файлов. С помощью красивее и плагина мы можем легко сортировать импорт!

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

Сортировка импорта: настройка всего

Во-первых, давайте установим необходимые зависимости. Нам понадобится всего два: красивее и плагин 📦.

npm install prettier @trivago/prettier-plugin-sort-imports --save-dev

Сортировка импорта: настройка правил

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

Так, например, в моем небольшом примере проекта у меня есть следующие файлы:

Поэтому нам нужно установить правила для их настройки. Обычно мне нравится следующий порядок:

  1. Пакет/сторонний импорт
  2. Импорт проекта
  3. Относительный импорт

Это покроет в основном все! Итак, давайте создадим .prettierrc (более красивый файл конфигурации) на маршруте нашего проекта.

Внутри этого файла добавьте следующее правило:

{ 
    "importOrder": [ "^components/(.*)$", "^[./]" ],
    "importOrderSeparation": true, 
    "importOrderSortSpecifiers": true 
}

Разберем эти варианты. Они разбираются с помощью регулярных выражений (да, я знаю язык дьявола). Но это примерно один и тот же формат для каждого типа импорта.

Во-первых, любой тип регулярного выражения, который не включен, будет отправлен наверх. Это важно. Поскольку не включенные сторонние зависимости будут просто идти вверх, как мы хотим. После этого мы используем папку components без псевдонима, а затем импортируем нашу относительную. У меня также есть два дополнительных правила для добавления разрывов строк между группами импорта и для сортировки спецификаторов в объявлении импорта.

В этом репозитории GitHub вы можете найти список других доступных правил.

Сортировка импорта: результат

Теперь, как только мы сохраним файл (если у вас есть формат при сохранении в той IDE, которую вы используете) или отформатируем файл, вы увидите следующий результат:

Вау, внешний вид стал намного чище 👌🏼

Заключение

Надеемся, что благодаря этому у вас будет более организованный импорт в ваших проектах! Если у вас есть какие-либо другие советы по очистке кода, оставьте их в комментариях ниже!

Больше контента на Relatable Code

Если вам это понравилось, не стесняйтесь связаться со мной в LinkedIn или Twitter.

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

Первоначально опубликовано на https://relatablecode.com 30 марта 2022 г.