Как ускорить написание повторяющегося кода в 10 раз

Привет, Хабр! Меня зовут Никита и я пишу сайты на React.

Эта статья — про создание шаблонов для ускорения написания кода, знакомство с двумя расширениями для VSCode, которые помогают создавать новые папки/файлы на потоке — то есть много и часто. Возможно, эти плагины пригодятся и вам.

В статье разберём:

• Проблему

• Какие есть решения

• Плагины для VSCode

• Немного теории и практики

• Заключение

Проблема: Рутина замедляет прогресс

Часто приходится заниматься создании множества однотипных компонентов, включающих в себя React-компонент, индексный файл, файл с типами, стили, кастомные хуки, тесты, storybook и т.д. Каждый новый компонент – это несколько файлов, которые нужно создавать вручную, следя за соблюдением единого стиля и структуры проекта.

Самый простой наш компонент обычно выглядит так:

• CustomComponent.module.css – стили

• CustomComponent.tsx – реализация компонента

• CustomComponent.types.ts – определение типов

• index.ts – точка входа

Даже создание такой простой структуры занимает около 1-1.5 минуты, в то время как шаблон позволяет сделать это за 10-15 секунд. А если компонент сложный, с глубокой вложенностью и логикой, время увеличивается многократно.

Какие есть решения

Если нет желания сильно париться вот основные подходы:

1. Генераторы шаблонов:

   • Plop

   • Hygen

2. Расширения VS Code:

   • Folder Templates

Почему стоит выбрать Folder Templates вместо Plop/Hygen:

1. Минимум конфигурации — максимум пользы
   В отличие от Plop и Hygen, Folder Templates не требует сложной настройки в JavaScript. Шаблон – это просто папка с файлами и небольшой конфигурационный файл.

2. Интуитивно понятно
   Документация проста и понятна, начать работать можно уже через 5 минут.

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

4. Не требует зависимости от Node.js
   Folder Templates работает без необходимости установки дополнительных зависимостей через npm. Это может быть плюсом в проектах, где хочется обойтись без npm-скриптов.

Plop/Hygen будет уместен, если вам нужны:

1. Сложная логика генерации (например, модификация уже существующих файлов);

2. Множественные шаги в сценарии генерации;

3. Интерактивные CLI-опросы и выбор опций.

Folder Templates: Практика создания шаблонов

Ссылочка на плагин - Folder Templates

Для создания шаблонов есть два варианта:

1. Создание шаблона в файловой системе

2. Настройка шаблона в settings.jsonVSCode

Мы рассмотрим создание шаблонов в файловой системе

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

Значение <FTName> (для Windows используется [FTName]) интерполируется в имя компонента, которое вас просят ввести при создании структуры.Также есть возможность преобразовывать имя компонента и переменные с шаблоном <FTName | transformer> (<FTName % transformer> для Windows). Пока одна из нерешенных проблем, это то, что родительская папка не будет преобразовываться в необходимый формат.

Внутри папки .fttemplates создаем структуру папок и файлов. Например:

Файл .ftsettings.json содержит настройки для вашего шаблона. Вот пример:

{
  "name": "ReactComponent",
  "openFilesWhenDone": ["<FTName>.tsx", "<FTName>.module.css"],
  "omitParentDirectory": false,
  "overwriteExistingFiles": "never",
  "customVariables": ["interfaceFirstProp", "interfaceFirstPropType=>string"]
}

Разберем параметры:

• name: Название папки, которая будет создана.

• openFilesWhenDone: Список файлов, которые будут открыты в редакторе после создания компонента.

• omitParentDirectory: Если установлено в true, шаблон будет создан непосредственно в текущей папке. Иначе будет создана папка с именем шаблона внутри текущей папки. По умолчанию: false.

• overwriteExistingFiles: Определяет, перезаписывать ли структуру, если папка с таким же именем уже существует. По умолчанию: 'never'.

• customVariables: Список переменных, которые будут запрошены у пользователя при создании компонента. В данном случае, мы запрашиваем название первого пропса (interfaceFirstProp) и его тип (interfaceFirstPropType, по умолчанию выбрали string).

С остальными настройками можно познакомиться на страничке расширения.

Заглянем в структуру нашего компонента.

• Пустой CSS файл.

• Файл React-компонента. Здесь мы импортируем интерфейс с именем компонента и постфиксом Props, также стили из файла [FTName].module.css. Диструктурируем props interfaceFirstProp, который мы ранее определили в .ftsettings.json и ввели при создании компонента.

• Файл с типами. Интерфейс состоит из 2х кастомных переменных, которые мы вводим на этапе создания компонента.

• Индексный файл. Тут ничего сложного, просто импорт и последующий экспорт компонента

Чтобы создать компонент, щелкните правой кнопкой мыши по папке, в которой вы хотите создать компонент, и выберите "Create New Templated Folder" (или можно назначить горячую клавишу). Выберите шаблон, введите имя компонента и значения для кастомных переменных, если они есть.

Результат

Можно создавать любую вложенность, расширения файлов и тд.

TypeScript Barrel Generator: Автоматический экспорт модулей

Второй полезный плагин – TypeScript Barrel Generator . Он автоматизирует экспорт модулей в файл index.ts.

Просто щелкните правой кнопкой мыши по папке и выберите "Export all modules". Плагин автоматически создаст или обновит файл index.ts, содержащий все экспорты из файлов в этой папке. Также можно (даже нужно) добавить слушатель, чтобы плагин автоматически обновлял index.ts при добавлении или удалении файлов.

В настройках VS Code можно выбрать формат экспорта:

• export * from "./..." – стандартный экспорт

• export { default as ... } from "./..." – именованный экспорт по умолчанию

При необходимости есть возможность исключить из слушателя определенные файлы, переименовать дефолтный index.ts файл и еще пара настроек.

Заключение: Время – ценный ресурс

Использование Folder Templates в комбинации с TypeScript Barrel Generator значительно сократило время на создание компонентов. Мы устранили рутину, освободив время для более важных задач. Настройка этих инструментов и знакомство с документацией занимает немного времени, но экономия времени и повышение продуктивности стоят того.

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