Я недавно начал делиться статьями и документацией публично.
Раньше всё ограничивалось внутренними релизами: документацией, ресёрчами, роадмапами. Всё — внутри команды.

Но после того как я выпустил свой первый плагин для Vite, захотелось рассказать о нём миру, собрать обратную связь и понять, насколько он действительно полезен. А вдруг кто-то подкинет идею, баг, или просто скажет “спасибо”? В процессе написания статьи я вдруг осознал: мне это нравится. После публикации я уже думал о следующей теме — и понял, что таких тем у меня полно. Но сначала — вернёмся к этому плагину.

Как всё началось: вдохновение из NestJS

Я работаю разработчиком уже больше пяти лет. В основном — фронтенд, но с недавних пор начал осваивать и бэкенд. Сначала это был Node.js с Express, но затем мы в компании запустили новый проект: автоматизация звонков пользователям и анализ транскриптов через OpenAI. Я взялся за реализацию и выбрал для этого NestJS. Знаком был поверхностно, но быстро пришлось углубиться.

И вот, запускаю nest g resource, и в терминале появляется полноценный модуль. Я буквально сказал вслух:
«А почему такого нет в React?!»

Да, есть сниппеты, есть сторонние генераторы. Но я хотел шаблон. Я хотел: написал команду — и всё готово. Как в Nest.

Рутинная боль фронтенда

Потом я вернулся к новому внутреннему проекту — Telegram Web App на стеке Vite + TypeScript + React + Zustand. Простое, небольшое приложение. Начинаю писать — и тут снова:
• Создай папку
• Создай Component.tsx
• Добавь index.ts
• Пропиши интерфейс пропсов
• Подключи стили
• И так далее…

Когда прилетел дизайн на новую страницу — и всё это снова повторилось — у меня реально задёргался глаз. Я психанул, написал простой bash-скрипт с шаблоном, сделал его исполняемым, назвал create-component. И знаете что? Это было счастье.

Потом добавил create-store, create-page и так далее. Всё стало сильно удобнее. Но оставались проблемы:
• В каждом проекте шаблоны немного разные
• Структура у всех отличается
• Иногда нужно сгенерировать что-то новое, и приходится заново писать скрипт

Особенно тяжело было в одном “наследии 2010-х” — Angular 1.5 + React. Лучше бы вы не знали, как там устроена структура.

Vite deserves nest g

В какой-то момент я подумал:

“Я люблю Vite. Почему бы не сделать для него что-то вроде nest g resource, настраиваемое и расширяемое?”

Так и родился vite-plugin-create — плагин и CLI, который позволяет быстро генерировать компоненты, страницы, сторы и всё, что захочешь. Шаблоны — кастомизируемые. Нейминг — на выбор. Команда — одна.

⸻

Реализация: почему оказалось не так просто

Первым делом я решил начать с простого плагина — так родился vite-plugin-import-alias. Он был легче в реализации, и на нём я «набил руку» на публикации, npm, документации и реакциях от людей. Но уже тогда я знал — следующим будет vite-plugin-create.

На первый взгляд идея казалась простой. Я уже писал bash-скрипты, которые создавали компоненты, сторы и страницы по шаблону. Почему бы не повторить ту же логику, только красиво, внутри Vite-плагина?

Я представлял это так:
• Есть шаблоны файлов.
• Есть конфиг, где указаны имена, пути, стиль нейминга.
• А дальше — в index-файле плагина ловим команду vite create:component Button, и всё создаётся.

А вот и первое разочарование

Я быстро понял, что Vite не предоставляет API для добавления своих CLI-команд. Увы — нельзя добавить vite create:component, чтобы оно выглядело как “нативное расширение Vite”. Очень хотелось, чтобы всё выглядело как nest g resource, но пришлось признать: так просто не получится.

Решение: свой CLI

Я добавил bin/cli.ts и вынес туда команды. А в package.json прописал отдельную точку входа:

	"bin": {
	  "vite-create": "./dist/bin/cli.js"
	}

Теперь можно запускать всё через:

	npx vite-create component Button

Это, конечно, не полноценное расширение Vite CLI, но и не костыль — выглядит нормально, работает стабильно.

⸻

Конфигурация и нейминг

Следующим шагом было решить: как задавать стиль имён?
Компоненты логично делать в PascalCase, но для других сущностей — кто-то захочет camelCase, кто-то kebab-case.

Я добавил параметр fileNameStyle в конфиг, где можно выбрать:
• pascalCase
• camelCase
• kebabCase
• original (оставить как есть)

По умолчанию используется PascalCase, но в будущем я хочу, чтобы для каждого генератора (component, store, page, и т.д.) можно было задавать свой стиль.

⸻

Конфиг и шаблоны

Одна из целей плагина — быть максимально простым и кастомизируемым. Чтобы начать пользоваться, не нужно думать: “куда положить шаблоны”, “что туда писать” и “в каком формате конфиг”.

Для этого я добавил команду:

	npx vite-create init

Она создаёт:
• Директорию templates/ с базовым шаблоном компонента
• Файл vite-create.config.json — где уже есть пример генератора.

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

{
  "defaultPath": "src",
  "fileNameStyle": "pascalCase",
  "generators": {
    "component": {
      "path": "components/{{name}}",
      "files": {
        "{{name}}.tsx": "templates/component/component.tsx",
        "index.ts": "templates/component/index.ts",
        "{{name}}.module.scss": "templates/component/style.scss"
      }
    }
  }
}

Шаблоны — это обычные .tsx, .scss и .ts файлы с Handlebars-переменными ({{name}}, {{PascalCaseName}}, и т.д.).

import styles from './{{name}}.module.scss';

export interface Props {
  className?: string;
}

export const {{name}}: React.FC<Props> = ({ className }) => {
  return <div className={styles.root}>{{name}} component</div>;
};

А вот как может выглядеть шаблон компонента — обычный .tsx с переменными.

⸻

Что делает vite-plugin-create уже сейчас

Генерирует компоненты (и не только) из ваших шаблонов
Поддерживает .tsx, .scss, .test.tsx и любые другие файлы
Подстраивается под ваши нейминг-правила (PascalCase, camelCase и т.д.)
Позволяет задать собственные генераторы: vite-create my-thing

⸻

Roadmap

Вот что я планирую добавить в следующих версиях:
• ✅ Кастомные генераторы — пользователь сам решает, что он хочет создать, и задаёт структуру в конфиге
• 🔀 Формат шаблонов по умолчанию — .tsx или .jsx по выбору (может даже через --jsx флаг)
• 📁 Шаблоны по директориям — например, отдельная логика для pages/, widgets/, shared/
• ⚙️ Параметры на уровне генераторов — чтобы у component был один стиль, у hook — другой

Возможно, в будущем появится и минимальный GUI — чтобы конфиг можно было настраивать не только руками, но и через простой визуальный интерфейс (например, в браузере или через CLI).

Если вы тоже устали от однотипной рутины при создании компонентов — попробуйте vite-plugin-create
Буду рад фидбеку, идеям и, конечно, вашим pull request'ам

Плагин полностью open source, MIT лицензия — если хотите внести вклад, идеи или улучшения — welcome!

А что если бы у Vite был свой nest g? Теперь есть