Создание шаблонов генерации

Структура шаблонов, синтаксис переменных и примеры.

Структура шаблонов

Все шаблоны лежат в .templates/ в корне проекта. Каждая папка — отдельный шаблон.

.templates/
├── component/                  # шаблон компонента
│   └── {{name.kebabCase}}/
│       ├── styles/
│       │   └── {{name.kebabCase}}.module.css
│       ├── types/
│       │   └── {{name.kebabCase}}-props.type.ts
│       ├── {{name.kebabCase}}.tsx
│       └── index.ts
└── store/                      # шаблон Zustand стора
    └── {{name.kebabCase}}/
        ├── {{name.kebabCase}}.store.ts
        ├── {{name.kebabCase}}.type.ts
        └── index.ts

Обязательный шаблон компонента

Перед созданием компонентов в проекте должен существовать шаблон .templates/component.

Если шаблона нет, компонент не создаётся вручную. Сначала создаётся шаблон компонента, затем компонент генерируется через VS Code или CLI.

Синтаксис шаблонов

Переменные

Переменные работают в именах файлов/папок и внутри файлов:

{{variable}}

Переменные могут быть любыми. name — дефолтная, подставляется генератором автоматически. Если реализация требует дополнительных параметров — можно использовать произвольные наборы переменных.

Модификаторы

Модификаторы меняют регистр и формат записи переменной:

{{name.pascalCase}}          → MyButton
{{name.camelCase}}           → myButton
{{name.kebabCase}}           → my-button
{{name.snakeCase}}           → my_button
{{name.screamingSnakeCase}}  → MY_BUTTON

Как создать новый шаблон

Создать папку в .templates/ с именем шаблона (например hook).
Внутри разместить файлы и папки, используя {{name}} и модификаторы в именах и содержимом.
Шаблон сразу доступен и в расширении VS Code, и в CLI.

Пример — создание шаблона для хука:

.templates/
└── hook/
    └── {{name.kebabCase}}/
        ├── {{name.kebabCase}}.hook.ts
        └── index.ts

// .templates/hook/{{name.kebabCase}}.hook.ts
export const {{name.camelCase}} = () => {

}

// .templates/hook/index.ts
export { {{name.camelCase}} } from './{{name.kebabCase}}.hook'

Дальше

Использование — генерация через VS Code плагин и CLI.

:::

3.5 KiB Raw Blame History Unescape Escape