Как я решил проблему гибкого управления порядком импортов в большом проекте

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

Проблема

Наш проект разрастался, и с каждым днём количество импортов в файлах росло. Различные стили, нестыковки и расхождения в оформлении создавали трудности при поддержке кода. Существующие ESLint-плагина, предназначенные для сортировки импортов, не удовлетворяли нашим требованиям по гибкой настройке порядка и группировки. Мы хотели иметь возможность задать:

• Отдельную сортировку для именованных импортов;

• Группировку импортов по различным категориям (например, «Core Imports», «Components», «Third-Party Libraries»);

• Управление количеством пустых строк между группами;

• Возможность автоматически исправлять код через ESLint с помощью флага --fix.

Решение

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

Во второй версии были добавлены:

• Дополнительные параметры для настройки группировки импортов (например, includes, emptyLinesBeforeGroup и preserveNonImportCode);

• Тесты, обеспечивающие стабильность работы плагина;

• Более подробная документация

Плагин получил название eslint-plugin-import-group ^[1]и уже завоевал признание в нашей команде.

Описание правил

Плагин включает два основных правила:

1. named-imports ^[2]
   Это правило отвечает за сортировку именованных импортов. Оно позволяет:

   • Сортировать именованные импорты в алфавитном порядке (поддерживаются опции asc, desc и none);

   • Форматировать импорт таким образом, чтобы каждый элемент был на новой строке (опция newline);

   • Настраивать отступы внутри фигурных скобок с помощью параметра indent.

   Пример конфигурации:

   {
     "group-imports/named-imports": ["warn", {
       "sort": "asc",
       "newline": true,
       "indent": 2
     }]
   }
   

2. group-imports ^[3]
   Это правило позволяет группировать импорты по категориям. Вы можете задавать собственные группы, определяя:

   • Название группы;

   • Набор шаблонов для сопоставления (с возможностью использовать exact, regex или includes);

   • Порядок сортировки внутри группы;

   • Количество пустых строк между группами с помощью emptyLinesBetweenGroups или emptyLinesBeforeGroup для отдельных групп.

   Пример конфигурации:

   {
     "group-imports/group-imports": ["warn", {
       "groups": [
         {
           "name": "Core Imports",
           "patterns": [
             { "exact": "vue" },
             { "exact": "vue-router" },
             { "exact": "aloha-vue" }
           ]
         },
         {
           "name": "Components",
           "patterns": [
             { "regex": ".vue$" }
           ],
           "sort": "asc"
         },
         {
           "name": "Third-Party Libraries",
           "patterns": [
             { "exact": "_rest_", "sort": "desc" },
             { "exact": "lodash-es" }
           ]
         }
       ],
       "emptyLinesBetweenGroups": 1
     }]
   }
   

Для чего этот плагин хорош?

Плагин eslint-plugin-import-group позволяет:

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

• Экономить время на ручной рефакторинг старого кода, благодаря поддержке автоматического исправления с помощью ESLint.

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

Планы на будущее

В планах — расширение функционала плагина за счёт добавления новых правил, позволяющих ещё более гибко управлять структурой импортов, а также улучшение конфигурационных опций для более тонкой настройки поведения.

Автор: Ilia Brykin