S.Gromov
bdb99ade62
- перенесены каноны и VitePress-конфиги в projects/<slug> - добавлены корневой и проектные build.ts для сборки артефактов - добавлены shared-библиотеки сборки в projects/_shared/lib - обновлены CI, Dockerfile, package.json, gitignore и README - удалена сборка frontend-агента
98 lines
3.6 KiB
Markdown
98 lines
3.6 KiB
Markdown
---
|
||
title: Создание шаблонов генерации
|
||
description: "Структура шаблонов, синтаксис переменных и примеры."
|
||
keywords: [шаблоны, templates, .templates, syntax, переменные, kebabCase, pascalCase, scaffold]
|
||
---
|
||
|
||
<!-- @formatter:off -->
|
||
::: v-pre
|
||
|
||
# Создание шаблонов генерации
|
||
|
||
Структура шаблонов, синтаксис переменных и примеры.
|
||
|
||
## Структура шаблонов
|
||
|
||
Все шаблоны лежат в `.templates/` в корне проекта. Каждая папка — отдельный шаблон.
|
||
|
||
```text
|
||
.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](/docs/applied/templates/templates-usage).
|
||
|
||
## Синтаксис шаблонов
|
||
|
||
### Переменные
|
||
|
||
Переменные работают в именах файлов/папок и внутри файлов:
|
||
|
||
```text
|
||
{{variable}}
|
||
```
|
||
|
||
Переменные могут быть любыми. `name` — дефолтная, подставляется генератором автоматически. Если реализация требует дополнительных параметров — можно использовать произвольные наборы переменных.
|
||
|
||
### Модификаторы
|
||
|
||
Модификаторы меняют регистр и формат записи переменной:
|
||
|
||
```text
|
||
{{name.pascalCase}} → MyButton
|
||
{{name.camelCase}} → myButton
|
||
{{name.kebabCase}} → my-button
|
||
{{name.snakeCase}} → my_button
|
||
{{name.screamingSnakeCase}} → MY_BUTTON
|
||
```
|
||
|
||
## Как создать новый шаблон
|
||
|
||
1. Создать папку в `.templates/` с именем шаблона (например `hook`).
|
||
2. Внутри разместить файлы и папки, используя `{{name}}` и модификаторы в именах и содержимом.
|
||
3. Шаблон сразу доступен и в расширении VS Code, и в CLI.
|
||
|
||
Пример — создание шаблона для хука:
|
||
|
||
```text
|
||
.templates/
|
||
└── hook/
|
||
└── {{name.kebabCase}}/
|
||
├── {{name.kebabCase}}.hook.ts
|
||
└── index.ts
|
||
```
|
||
|
||
```ts
|
||
// .templates/hook/{{name.kebabCase}}.hook.ts
|
||
export const {{name.camelCase}} = () => {
|
||
|
||
}
|
||
```
|
||
|
||
```ts
|
||
// .templates/hook/index.ts
|
||
export { {{name.camelCase}} } from './{{name.kebabCase}}.hook'
|
||
```
|
||
|
||
## Дальше
|
||
|
||
- [Использование](/docs/applied/templates/templates-usage) — генерация через VS Code плагин и CLI.
|
||
|
||
:::
|