2026-04-02 21:10:25 +03:00
# Template File Generator
2025-07-13 18:33:25 +03:00
2026-04-02 19:12:35 +03:00
Расширение для VS Code. Генерирует файлы и папки из ваших шаблонов с подстановкой переменных.
2025-07-13 18:33:25 +03:00
2026-04-02 19:12:35 +03:00
Подсветка синтаксиса и автодополнение переменных прямо в файлах шаблонов.
2025-07-13 18:33:25 +03:00
2026-04-02 19:12:35 +03:00
## Как работает
2025-07-15 13:05:52 +03:00
2026-04-02 19:12:35 +03:00
1. Создайте папку `.templates` в корне проекта
2. Внутри -- каждая подпапка это шаблон
3. Используйте переменные в именах файлов и содержимом: `{{name}}` присутствует всегда, дополнительно можно использовать любое количество своих -- `{{author}}` , `{{module}}` и т.д.
4. ПКМ по папке в проводнике -- **Создать из шаблона...**
2025-07-13 18:33:25 +03:00
2026-04-02 19:12:35 +03:00
Расширение само найдёт все переменные в шаблоне и предложит заполнить каждую.
2025-07-13 20:40:45 +03:00
2026-04-02 19:12:35 +03:00
## Пример
Структура шаблона:
2025-07-13 18:33:25 +03:00
```
2025-07-15 09:22:48 +03:00
.templates/
2025-07-14 23:37:01 +03:00
component/
2026-04-02 19:12:35 +03:00
{{name.pascalCase}}/
{{name.pascalCase}}.tsx
types/
{{name.kebabCase}}.type.ts
styles/
{{name.kebabCase}}.module.css
2025-07-13 18:33:25 +03:00
```
2026-04-02 19:12:35 +03:00
Содержимое `{{name.pascalCase}}.tsx` :
```tsx
import cl from 'clsx'
import type { {{name.pascalCase}}Props } from './types/{{name.kebabCase}}.type'
import styles from './styles/{{name.kebabCase}}.module.css'
/**
* < Назначение компонента {{ name . pascalCase }} в 1 строке > .
*
* Используется для:
* - < сценарий 1 >
* - < сценарий 2 >
*/
export const {{name.pascalCase}} = (props: {{name.pascalCase}}Props) => {
const { children, className, ...htmlAttr } = props
return (
< div { . . . htmlAttr } className = {cl(styles.root, className ) } >
{children}
< / div >
)
}
```
2025-07-13 18:33:25 +03:00
2026-04-02 19:12:35 +03:00
При вводе `user-profile` получите:
2025-07-13 18:33:25 +03:00
```
2026-04-02 19:12:35 +03:00
UserProfile/
UserProfile.tsx
types/
user-profile.type.ts
styles/
user-profile.module.css
2025-07-13 18:33:25 +03:00
```
2026-04-02 19:12:35 +03:00
## Модификаторы
| Модификатор | `user-profile` |
|---|---|
| `{{name}}` | user-profile |
| `{{name.pascalCase}}` | UserProfile |
| `{{name.camelCase}}` | userProfile |
| `{{name.snakeCase}}` | user_profile |
| `{{name.kebabCase}}` | user-profile |
| `{{name.screamingSnakeCase}}` | USER_PROFILE |
## Настройки
| Ключ | Описание | По умолчанию |
|---|---|---|
2026-04-02 22:35:09 +03:00
| `templateFileGenerator.templatesPath` | Путь к шаблонам | `.templates` |
| `templateFileGenerator.overwriteFiles` | Перезапись существующих файлов | `false` |
| `templateFileGenerator.inputMode` | Режим ввода: `webview` или `inputBox` | `webview` |
| `templateFileGenerator.language` | Язык интерфейса (`ru` / `en` ) | `en` |