S.Gromov
cfbe03e06e
- генерация файлов и папок из шаблонов с подстановкой переменных - каскадный поиск .templates вверх по дереву каталогов - подсветка синтаксиса и автодополнение переменных в шаблонах - webview и inputBox режимы ввода переменных - локализация ru/en - ядро генерации через @gromlab/create - Gitea Actions CI для автопубликации
86 lines
2.8 KiB
Markdown
86 lines
2.8 KiB
Markdown
# Template Forge
|
||
|
||
Расширение для 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 (
|
||
<div {...htmlAttr} className={cl(styles.root, className)}>
|
||
{children}
|
||
</div>
|
||
)
|
||
}
|
||
```
|
||
|
||
При вводе `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 |
|
||
|
||
## Настройки
|
||
|
||
| Ключ | Описание | По умолчанию |
|
||
|---|---|---|
|
||
| `templateForge.templatesPath` | Путь к шаблонам | `.templates` |
|
||
| `templateForge.overwriteFiles` | Перезапись существующих файлов | `false` |
|
||
| `templateForge.inputMode` | Режим ввода: `webview` или `inputBox` | `webview` |
|
||
| `templateForge.language` | Язык интерфейса (`ru` / `en`) | `en` |
|