Шаблоны и генерация кода

Как работают шаблоны, как их создавать, синтаксис переменных и как генерировать код с помощью расширения VS Code и CLI.

Структура шаблонов

Все шаблоны лежат в .templates/ в корне проекта. Каждая папка — отдельный шаблон.

.templates/
├── component/                  # шаблон компонента
│   └── {{name.kebabCase}}/
│       ├── styles/
│       │   └── {{name.kebabCase}}.module.css
│       ├── types/
│       │   └── {{name.kebabCase}}.type.ts
│       ├── {{name.kebabCase}}.tsx
│       └── index.ts
└── store/                      # шаблон Zustand стора
    └── {{name.kebabCase}}/
        ├── {{name.kebabCase}}.store.ts
        ├── {{name.kebabCase}}.type.ts
        └── index.ts

Синтаксис шаблонов

Переменные работают в именах файлов/папок и внутри файлов. Базовая переменная — name.

{{variable}}

Модификаторы меняют регистр и формат записи:

{{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.

Пример — создание шаблона для хука:

.templates/
└── hook/
    └── {{name.kebabCase}}/
        ├── {{name.kebabCase}}.hook.ts
        └── index.ts

// .templates/hook/{{name.kebabCase}}.hook.ts
export const {{name.camelCase}} = () => {

}

// .templates/hook/index.ts
export { {{name.camelCase}} } from './{{name.kebabCase}}.hook'

Примеры шаблонов

Шаблон компонента

// .templates/component/index.ts
export { {{name.pascalCase}} } from './{{name.kebabCase}}'

// .templates/component/types/{{name.kebabCase}}.type.ts
import type { HTMLAttributes } from 'react'

/**
 * Параметры {{name.pascalCase}}.
 */
export type {{name.pascalCase}}Params = {}

/** HTML-атрибуты корневого элемента. */
type RootAttrs = HTMLAttributes<HTMLDivElement>

export type {{name.pascalCase}}Props = RootAttrs & {{name.pascalCase}}Params

// .templates/component/{{name.kebabCase}}.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}}.
 */
export const {{name.pascalCase}} = (props: {{name.pascalCase}}Props) => {
  const { children, className, ...htmlAttr } = props

  return (
    <div {...htmlAttr} className={cl(styles.root, className)}>
      {children}
    </div>
  )
}

/* .templates/component/styles/{{name.kebabCase}}.module.css */
.root {

}

Генерация через VS Code

Template File Generator | gromlab (Marketplace, Open VSX) — расширение для генерации файлов и папок из шаблонов через интерфейс редактора.

1. ПКМ на целевой папке в проводнике VS Code.
2. Generate from template → выбрать шаблон.
3. Ввести имя (например button) — расширение подставит его во все переменные {{name}}.

Генерация через CLI

@gromlab/create — CLI для генерации из тех же шаблонов. Используется через npx, глобальная установка не требуется.

npx @gromlab/create <шаблон> <имя> <путь>

Команда	Что создаёт
npx @gromlab/create component button src/shared/ui	Компонент
npx @gromlab/create module auth src/business	Бизнес-модуль
npx @gromlab/create widget header src/widgets	Виджет
npx @gromlab/create layout admin src/layouts	Layout
npx @gromlab/create store auth src/business/auth/stores	Стор