133 lines
4.1 KiB
Markdown
133 lines
4.1 KiB
Markdown
---
|
||
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 {
|
||
|
||
}
|
||
```
|