NextJS Style Guide

Appearance

Создание шаблонов генерации ​

Структура шаблонов, синтаксис переменных и примеры.

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

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

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

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

Переменные ​

Переменные работают в именах файлов/папок и внутри файлов:

text
{{variable}}

Переменные могут быть любыми. name — дефолтная, подставляется генератором автоматически. Если реализация требует дополнительных параметров — можно использовать произвольные наборы переменных.

Модификаторы ​

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

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

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

text
.templates/
└── hook/
    └── {{name.kebabCase}}/
        ├── {{name.kebabCase}}.hook.ts
        └── index.ts
ts
// .templates/hook/{{name.kebabCase}}.hook.ts
export const {{name.camelCase}} = () => {

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

Дальше ​