# Template File Generator Расширение для VS Code. Генерирует файлы и папки из ваших шаблонов с подстановкой переменных. Подсветка синтаксиса и автодополнение переменных прямо в файлах шаблонов. ## Как работает 1. Создайте папку `.templates` в корне проекта 2. Внутри -- каждая подпапка это шаблон 3. Используйте переменные в именах файлов и содержимом: `{{name}}` присутствует всегда, дополнительно можно использовать любое количество своих -- `{{author}}`, `{{module}}` и т.д. 4. ПКМ по папке в проводнике -- **Создать из шаблона...** Расширение само найдёт все переменные в шаблоне и предложит заполнить каждую. ## Пример Структура шаблона: ``` .templates/ component/ {{name.pascalCase}}/ {{name.pascalCase}}.tsx types/ {{name.kebabCase}}.type.ts styles/ {{name.kebabCase}}.module.css ``` Содержимое `{{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 (
{children}
) } ``` При вводе `user-profile` получите: ``` UserProfile/ UserProfile.tsx types/ user-profile.type.ts styles/ user-profile.module.css ``` ## Модификаторы | Модификатор | `user-profile` | |---|---| | `{{name}}` | user-profile | | `{{name.pascalCase}}` | UserProfile | | `{{name.camelCase}}` | userProfile | | `{{name.snakeCase}}` | user_profile | | `{{name.kebabCase}}` | user-profile | | `{{name.screamingSnakeCase}}` | USER_PROFILE | ## Настройки | Ключ | Описание | По умолчанию | |---|---|---| | `templateFileGenerator.templatesPath` | Путь к шаблонам | `.templates` | | `templateFileGenerator.overwriteFiles` | Перезапись существующих файлов | `false` | | `templateFileGenerator.inputMode` | Режим ввода: `webview` или `inputBox` | `webview` | | `templateFileGenerator.language` | Язык интерфейса (`ru` / `en`) | `en` |