feat: Template Forge 1.0.0
- генерация файлов и папок из шаблонов с подстановкой переменных - каскадный поиск .templates вверх по дереву каталогов - подсветка синтаксиса и автодополнение переменных в шаблонах - webview и inputBox режимы ввода переменных - локализация ru/en - ядро генерации через @gromlab/create - Gitea Actions CI для автопубликации
This commit is contained in:
192
README.md
192
README.md
@@ -1,151 +1,85 @@
|
||||
[🇬🇧 English](#english) | [🇷🇺 Русский](#russian)
|
||||
# Template Forge
|
||||
|
||||
<div id="english">🇬🇧 English</div>
|
||||
Расширение для VS Code. Генерирует файлы и папки из ваших шаблонов с подстановкой переменных.
|
||||
|
||||
# MyTemplateGenerator — template and component generator for React, Vue, Next.js, Angular, and more
|
||||
Подсветка синтаксиса и автодополнение переменных прямо в файлах шаблонов.
|
||||
|
||||
myTemplateGenerator is a powerful VSCode extension for generating templates, components, and project structures for all popular frameworks: React, Vue, Next.js, Angular, Svelte, Nuxt, NestJS, Express, Gatsby, Remix, SolidJS, Preact. Instantly scaffold files, folders, and boilerplate code for any modern JavaScript or TypeScript project.
|
||||
## Как работает
|
||||
|
||||
## Features
|
||||
- Syntax highlighting and autocomplete for template variables in template files (`{{name}}`, `{{name.camelCase}}`, etc.)
|
||||
- Generate project structure, files, and folders for popular frameworks: **React**, **Vue**, **Next.js**, **Angular**, **Svelte**, **Nuxt**, **NestJS**, **Express**, **Gatsby**, **Remix**, **SolidJS**, **Preact**
|
||||
- Quickly create components: create React components, Vue components, Next.js components, Angular components, and more
|
||||
- Visual configurator and localization support (Russian/English)
|
||||
- Flexible settings: templates folder path, variable input mode, overwrite protection
|
||||
1. Создайте папку `.templates` в корне проекта
|
||||
2. Внутри -- каждая подпапка это шаблон
|
||||
3. Используйте переменные в именах файлов и содержимом: `{{name}}` присутствует всегда, дополнительно можно использовать любое количество своих -- `{{author}}`, `{{module}}` и т.д.
|
||||
4. ПКМ по папке в проводнике -- **Создать из шаблона...**
|
||||
|
||||
|
||||
|
||||
Расширение само найдёт все переменные в шаблоне и предложит заполнить каждую.
|
||||
|
||||
**How to use:**
|
||||
1. Create a folder with templates (default: `.templates`).
|
||||
2. Use variables in templates: `{{name}}`, `{{name.pascalCase}}`, etc.
|
||||
3. Right-click any folder in your project → **Create from template...**
|
||||
4. Select a template, fill in variables — the structure is generated automatically.
|
||||
## Пример
|
||||
|
||||
Структура шаблона:
|
||||
|
||||
**Example template:**
|
||||
```
|
||||
.templates/
|
||||
component/
|
||||
{{name}}/
|
||||
index.tsx
|
||||
{{name.camelCase}}.module.css
|
||||
{{name.pascalCase}}/
|
||||
{{name.pascalCase}}.tsx
|
||||
types/
|
||||
{{name.kebabCase}}.type.ts
|
||||
styles/
|
||||
{{name.kebabCase}}.module.css
|
||||
```
|
||||
|
||||
**Available modifiers:**
|
||||
Содержимое `{{name.pascalCase}}.tsx`:
|
||||
|
||||
| Modifier | Example (`name = myComponent`) |
|
||||
|-----------------------|-------------------------------|
|
||||
| `{{name}}` | myComponent |
|
||||
| `{{name.pascalCase}}` | MyComponent |
|
||||
| `{{name.camelCase}}` | myComponent |
|
||||
| `{{name.snakeCase}}` | my_component |
|
||||
| `{{name.kebabCase}}` | my-component |
|
||||
| `{{name.screamingSnakeCase}}` | MY_COMPONENT |
|
||||
| `{{name.upperCase}}` | Mycomponent |
|
||||
| `{{name.lowerCase}}` | mycomponent |
|
||||
| `{{name.upperCaseAll}}` | MYCOMPONENT |
|
||||
| `{{name.lowerCaseAll}}` | mycomponent |
|
||||
```tsx
|
||||
import cl from 'clsx'
|
||||
import type { {{name.pascalCase}}Props } from './types/{{name.kebabCase}}.type'
|
||||
import styles from './styles/{{name.kebabCase}}.module.css'
|
||||
|
||||
**Supported modifiers:** pascalCase, camelCase, snakeCase, kebabCase, upperCase, lowerCase, and more.
|
||||
/**
|
||||
* <Назначение компонента {{name.pascalCase}} в 1 строке>.
|
||||
*
|
||||
* Используется для:
|
||||
* - <сценарий 1>
|
||||
* - <сценарий 2>
|
||||
*/
|
||||
export const {{name.pascalCase}} = (props: {{name.pascalCase}}Props) => {
|
||||
const { children, className, ...htmlAttr } = props
|
||||
|
||||
**Framework compatibility:**
|
||||
|
||||
This extension works with **any framework** — you define your own templates for any structure you need!
|
||||
|
||||
| Framework | Components | Store/State | Pages/Routes | Services | Utils |
|
||||
|--------------|:----------:|:-----------:|:------------:|:--------:|:-----:|
|
||||
| React | ✅ | ✅ | ✅ | ✅ | ✅ |
|
||||
| Vue | ✅ | ✅ | ✅ | ✅ | ✅ |
|
||||
| Angular | ✅ | ✅ | ✅ | ✅ | ✅ |
|
||||
| Svelte | ✅ | ✅ | ✅ | ✅ | ✅ |
|
||||
| Next.js | ✅ | ✅ | ✅ | ✅ | ✅ |
|
||||
| Nuxt | ✅ | ✅ | ✅ | ✅ | ✅ |
|
||||
| Solid | ✅ | ✅ | ✅ | ✅ | ✅ |
|
||||
| Vanilla JS/TS| ✅ | ✅ | ✅ | ✅ | ✅ |
|
||||
|
||||
Just create a template for your favorite stack — and generate any structure you want! 🎉
|
||||
|
||||
**Configuration:**
|
||||
All settings are managed via the standard VSCode user settings (or the visual configurator).
|
||||
|
||||
To open the settings menu, press <kbd>Ctrl</kbd>+<kbd>P</kbd>, type `Configure myTemplateGenerator...` and select the menu item.
|
||||
|
||||
You can also find all options in VSCode settings under `myTemplateGenerator`.
|
||||
|
||||
**Keywords / Ключевые слова:**
|
||||
template, templates, template generator, component generator, scaffold, scaffolding, boilerplate, starter template, project structure, file generator, folder generator, structure generator, react component generator, vue component generator, nextjs component generator, angular component generator, svelte component generator, nuxt component generator, nestjs generator, express generator, gatsby generator, remix generator, solidjs generator, preact generator, react templates, vue templates, nextjs templates, angular templates, svelte templates, nuxt templates, nestjs templates, express templates, gatsby templates, remix templates, solidjs templates, preact templates, project templates, framework templates, file templates, folder templates, create react component, create vue component, create nextjs component, create angular component, create svelte component, create nuxt component, create nestjs module, create express route, create gatsby page, create remix route, create solidjs component, create preact component, generate files, generate folders, generate structure
|
||||
|
||||
<div id="russian">🇷🇺 Русский</div>
|
||||
|
||||
# MyTemplateGenerator — генерация шаблонов и компонентов для React, Vue, Next.js, Angular и других
|
||||
|
||||
myTemplateGenerator — это расширение для VSCode, предназначенное для генерации шаблонов, компонентов и структуры проектов для всех популярных фреймворков: React, Vue, Next.js, Angular, Svelte, Nuxt, NestJS, Express, Gatsby, Remix, SolidJS, Preact. Мгновенно создавайте файлы, папки и boilerplate-код для любых современных проектов на JavaScript и TypeScript.
|
||||
|
||||
## Возможности
|
||||
- Подсветка и автокомплит переменных в шаблонных файлах (`{{name}}`, `{{name.camelCase}}` и др.)
|
||||
- Генерация структуры проекта, файлов и папок для популярных фреймворков: **React**, **Vue**, **Next.js**, **Angular**, **Svelte**, **Nuxt**, **NestJS**, **Express**, **Gatsby**, **Remix**, **SolidJS**, **Preact**
|
||||
- Быстрое создание компонентов: создание React компонентов, Vue компонентов, Next.js компонентов, Angular компонентов и других
|
||||
- Визуальный конфигуратор и поддержка локализации (русский/английский)
|
||||
- Гибкая настройка: путь к шаблонам, режим ввода переменных, запрет/разрешение перезаписи файлов
|
||||
|
||||
|
||||
|
||||
|
||||
**Как использовать:**
|
||||
1. Создайте папку с шаблонами (по умолчанию `.templates`).
|
||||
2. Используйте переменные в шаблонах: `{{name}}`, `{{name.pascalCase}}` и т.д.
|
||||
3. Кликните правой кнопкой по папке в проекте → **Создать из шаблона...**
|
||||
4. Выберите шаблон, заполните переменные — структура будет создана автоматически.
|
||||
|
||||
**Пример шаблона:**
|
||||
```
|
||||
.templates/
|
||||
component/
|
||||
{{name}}/
|
||||
index.tsx
|
||||
{{name.camelCase}}.module.css
|
||||
return (
|
||||
<div {...htmlAttr} className={cl(styles.root, className)}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
**Доступные модификаторы:**
|
||||
При вводе `user-profile` получите:
|
||||
|
||||
| Модификатор | Пример (`name = myComponent`) |
|
||||
|----------------------|-------------------------------|
|
||||
| `{{name}}` | myComponent |
|
||||
| `{{name.pascalCase}}`| MyComponent |
|
||||
| `{{name.camelCase}}` | myComponent |
|
||||
| `{{name.snakeCase}}` | my_component |
|
||||
| `{{name.kebabCase}}` | my-component |
|
||||
| `{{name.screamingSnakeCase}}` | MY_COMPONENT |
|
||||
| `{{name.upperCase}}` | Mycomponent |
|
||||
| `{{name.lowerCase}}` | mycomponent |
|
||||
| `{{name.upperCaseAll}}` | MYCOMPONENT |
|
||||
| `{{name.lowerCaseAll}}` | mycomponent |
|
||||
```
|
||||
UserProfile/
|
||||
UserProfile.tsx
|
||||
types/
|
||||
user-profile.type.ts
|
||||
styles/
|
||||
user-profile.module.css
|
||||
```
|
||||
|
||||
**Поддерживаемые модификаторы:** pascalCase, camelCase, snakeCase, kebabCase, upperCase, lowerCase и др.
|
||||
## Модификаторы
|
||||
|
||||
**Совместимость с фреймворками:**
|
||||
| Модификатор | `user-profile` |
|
||||
|---|---|
|
||||
| `{{name}}` | user-profile |
|
||||
| `{{name.pascalCase}}` | UserProfile |
|
||||
| `{{name.camelCase}}` | userProfile |
|
||||
| `{{name.snakeCase}}` | user_profile |
|
||||
| `{{name.kebabCase}}` | user-profile |
|
||||
| `{{name.screamingSnakeCase}}` | USER_PROFILE |
|
||||
|
||||
Плагин подходит для **любых фреймворков** — вы сами задаёте шаблоны для любой структуры!
|
||||
## Настройки
|
||||
|
||||
| Фреймворк | Компоненты | Store/State | Страницы/Роуты | Сервисы | Утилиты |
|
||||
|--------------|:----------:|:-----------:|:--------------:|:-------:|:-------:|
|
||||
| React | ✅ | ✅ | ✅ | ✅ | ✅ |
|
||||
| Vue | ✅ | ✅ | ✅ | ✅ | ✅ |
|
||||
| Angular | ✅ | ✅ | ✅ | ✅ | ✅ |
|
||||
| Svelte | ✅ | ✅ | ✅ | ✅ | ✅ |
|
||||
| Next.js | ✅ | ✅ | ✅ | ✅ | ✅ |
|
||||
| Nuxt | ✅ | ✅ | ✅ | ✅ | ✅ |
|
||||
| Solid | ✅ | ✅ | ✅ | ✅ | ✅ |
|
||||
| Vanilla JS/TS| ✅ | ✅ | ✅ | ✅ | ✅ |
|
||||
|
||||
Создайте шаблон под свой стек — и генерируйте любые структуры! 🎉
|
||||
|
||||
**Настройка:**
|
||||
Все параметры задаются через стандартные пользовательские настройки VSCode (или визуальный конфигуратор).
|
||||
|
||||
Чтобы открыть меню настроек, нажмите <kbd>Ctrl</kbd>+<kbd>P</kbd>, введите `Настроить myTemplateGenerator...` (или `Configure myTemplateGenerator...` для английского интерфейса) и выберите соответствующий пункт.
|
||||
|
||||
Также вы можете найти все параметры в настройках VSCode по ключу `myTemplateGenerator`.
|
||||
|
||||
**Ключевые слова:**
|
||||
создание шаблонов, генерация шаблонов, шаблоны компонентов, создание react компонентов, создание vue компонентов, создание nextjs компонентов, создание angular компонентов, создание svelte компонентов, создание nuxt компонентов, создание nestjs модулей, создание express роутов, создание gatsby страниц, создание remix роутов, создание solidjs компонентов, создание preact компонентов, генератор компонентов, генератор react компонентов, генератор vue компонентов, генератор nextjs компонентов, генератор angular компонентов, генератор svelte компонентов, генератор nuxt компонентов, генератор nestjs модулей, генератор express роутов, генератор gatsby страниц, генератор remix роутов, генератор solidjs компонентов, генератор preact компонентов, react шаблоны, vue шаблоны, nextjs шаблоны, angular шаблоны, svelte шаблоны, nuxt шаблоны, nestjs шаблоны, express шаблоны, gatsby шаблоны, remix шаблоны, solidjs шаблоны, preact шаблоны, шаблоны для проектов, шаблоны для фреймворков, структура проекта, структура папок, генерация файлов, генерация папок, файловый генератор, генератор папок, стартер шаблон
|
||||
| Ключ | Описание | По умолчанию |
|
||||
|---|---|---|
|
||||
| `templateForge.templatesPath` | Путь к шаблонам | `.templates` |
|
||||
| `templateForge.overwriteFiles` | Перезапись существующих файлов | `false` |
|
||||
| `templateForge.inputMode` | Режим ввода: `webview` или `inputBox` | `webview` |
|
||||
| `templateForge.language` | Язык интерфейса (`ru` / `en`) | `en` |
|
||||
|
||||
Reference in New Issue
Block a user