React Component MakerReact Component Maker
Menu
Расширение VS Code — v0.0.8

React-компонент
одним правым кликом

Генерируйте полноценные React-компоненты по своим шаблонам — со стилями, index-файлами, типами и тестами — не выходя из VS Code.

TypeScript и JavaScript5 стилей именованияКонфигурация на проектCSS / SCSS / Modules

Как это работает

Три шага от папки до компонента

01

Правый клик по папке

В проводнике VS Code кликните правой кнопкой по любой папке и выберите «Create React Component».

02

Назовите компонент

Введите имя компонента. Стиль написания применяется автоматически согласно настройкам.

03

Выберите шаблон

Выберите один из своих шаблонов. Файлы генерируются мгновенно.

Всё что нужно

Гибкая, шаблонная генерация компонентов

Свои шаблоны

Создавайте компоненты по собственным .jsx / .tsx шаблонам из папки .react-templates.

TypeScript и JavaScript

Поддержка .tsx и .jsx — переключается одной настройкой.

Файлы стилей

Автоматическая генерация CSS, SCSS или CSS Modules вместе с каждым компонентом.

Index и Types файлы

Barrel re-exports и types.ts генерируются из настраиваемых шаблонов.

Unit-тесты

Тестовые файлы создаются в подпапке tests/ по вашему шаблону.

Стили именования

Выбирайте PascalCase, camelCase, kebab-case, snake_case или lowercase — отдельно для файлов и папок.

Конфигурация на проект

Добавьте .rcmakerrc.json рядом с package.json — и глобальные настройки больше не нужны.

Работа по правому клику

Правый клик по папке, «Create React Component» — и готово.

Конфигурация на проект

Один файл — один проект

Добавьте .rcmakerrc.json рядом с package.json, и расширение подхватит его автоматически. Больше не нужно менять глобальные настройки при переключении между проектами.

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

.rcmakerrc.json
{
  "useTypeScript": true,
  "folderNameStyle": "kebab-case",
  "fileNameStyle": "PascalCase",
  "createStyleFile": true,
  "styleExtension": "module.css",
  "generateIndexFile": true,
  "indexInComponentFolder": false
}

Готовы ускорить разработку?

Установите из VS Code Marketplace и начните генерировать компоненты за секунды.

Agama Labs — Web & App Development and Digital Marketing

 — Web & App Development · Digital Marketing