114 lines
3.7 KiB
Markdown
114 lines
3.7 KiB
Markdown
|
# Шаблоны генерации кода
|
|||
|
|
|
|||
|
|
Подход к использованию шаблонов и генерации кода для стандартизации структуры и ускорения разработки.
|
|||
|
|
|
|||
|
|
## Что генерируем
|
|||
|
|
|
|||
|
|
- Компоненты (`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.pascalCase}}}/
|
|||
|
|
│ ├── index.ts
|
|||
|
|
│ ├── {{{name.pascalCase}}}.tsx
|
|||
|
|
│ └── {{{name.pascalCase}}}.module.css
|
|||
|
|
└── store/ # шаблон Zustand стора
|
|||
|
|
└── {{{name.camelCase}}}Store/
|
|||
|
|
├── index.ts
|
|||
|
|
├── {{{name.camelCase}}}Store.ts
|
|||
|
|
└── {{{name.camelCase}}}Store.type.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 * from './{{name.pascalCase}}'
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
// .templates/component/{{name.pascalCase}}.tsx
|
|||
|
|
import { FC, HTMLAttributes } from "react";
|
|||
|
|
import styles from './{{name.kebabCase}}.module.css'
|
|||
|
|
import cl from 'clsx'
|
|||
|
|
|
|||
|
|
interface IOwnProps extends HTMLAttributes<HTMLDivElement> {}
|
|||
|
|
|
|||
|
|
export const {{name.pascalCase}}:FC<IOwnProps> = ({className, ...htmlAttr}) => {
|
|||
|
|
return (
|
|||
|
|
<div {...htmlAttr} className={cl(styles.root, className)}>
|
|||
|
|
{{name.kebabCase}}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
/* .templates/component/{{name.kebabCase}}.module.css */
|
|||
|
|
.root {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
```
|