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

df4a10494ecad6aebaef02aeb53fc6ef.png

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

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

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

  • Проблему

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

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

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

  • Заключение

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

216d196a124d34951e2fe49c97f3708e.jpg

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

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

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

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

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

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

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

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

7c642aff5dadbe6c8deb0bf2bf7ca95f.jpg

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

  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.

178e9c1629f9f00c238141ddb0ed65eb.pngb67c7e4249aa2c3fe8b85c4b65a2f0a1.png

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

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

a52d723f89b868e4ef338e0023921dad.png

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

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

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

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

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

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

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

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

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

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

924acd1474f90bbd77f977d8189a69c5.png

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

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

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

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


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

9aed87b9371c11876ef90ae04860d186.pngРезультат
Результат

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

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

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

17b5ed644dd10851f275bea507ae8608.png

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

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

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

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

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

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

fa0113103ea05a15349464d7dee551b3.jpg

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

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

© Habrahabr.ru