frontend-style-guide/parts/8-1-templates-generation.md

---
title: Шаблоны генерации кода
---

# Шаблоны генерации кода

Подход к использованию шаблонов и генерации кода для стандартизации структуры и ускорения разработки.

## Что генерируем

- Компоненты (`screens`, `layouts`, `widgets`, `features`, `entities`).
- Страницы (nextjs `app`, `pages`)
- Типовые инфраструктурные модули (например, `store`).

## Чем генерируем

### VSCode extension

[расширение VS Code](https://open-vsx.org/extension/MyTemplateGenerator/mytemplategenerator) — создание файлов и папок из шаблонов через UI‑интерфейс внутри редактора.

### CLI (для агентов)

[@gromlab/create](https://gromlab.ru/gromov/create) — CLI для генерации файлов и папок по шаблонам.

Примеры:
```bash
# Создать компонент
create component button

# Создать компонент используя NPX
npx @gromlab/create component button
```

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

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

## Синтаксис

- Переменные в шаблонах работают в именах файлов/папок и внутри файлов.
- Базовая переменная — `name`.

Формат записи переменной:

```text
{{variable}}
```

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

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

Пример использования в шаблоне:

```text
{{name}}.tsx
{{name.pascalCase}}.tsx
```

```tsx
export const {{name.pascalCase}} = () => {
  return <div>{{name}}</div>
}
```

## Шаблон компонента

Рекомендуемая структура компонента, создаётся генератором по шаблону.

```ts
// .templates/component/index.ts
export { {{name.pascalCase}} } from './{{name.kebabCase}}.ui'
```

```ts
// .templates/component/types/{{name.kebabCase}}.interface.ts
import type { HTMLAttributes } from 'react'

/**
 * Параметры {{name.pascalCase}}.
 */
export interface {{name.pascalCase}}Props extends HTMLAttributes<HTMLDivElement> {}
```

```tsx
// .templates/component/{{name.kebabCase}}.ui.tsx
import type { FC } from 'react'
import cl from 'clsx'
import type { {{name.pascalCase}}Props } from './types/{{name.kebabCase}}.interface'
import styles from './styles/{{name.kebabCase}}.module.css'

/**
 * {{name.pascalCase}}.
 */
export const {{name.pascalCase}}: FC<{{name.pascalCase}}Props> = ({ className, ...htmlAttr }) => {
  return (
    <div {...htmlAttr} className={cl(styles.root, className)}>
      {{name.kebabCase}}
    </div>
  )
}
```

```css
/* .templates/component/styles/{{name.kebabCase}}.module.css */
.root {

}
```