- Переработан раздел Workflow: заголовки, описания, порядок разделов - Добавлены новые разделы: Генерация кода (workflow), Настройка VS Code (applied) - Убран суффикс .ui.tsx из документации и примеров - Переработан раздел Структура проекта — только Next.js, без React SPA - Приоритет стилизации перенесён из applied/styles в workflow/styling - Убрано дублирование инструментов генерации — единая точка в applied/templates-generation - Переписан concat-md.js: без внешних зависимостей, мета-якоря для навигации в RULES.md - Удалена зависимость concat-md - Обновлена главная страница: названия разделов, URL на RULES.md - Добавлен AGENTS.md с правилами для агентов
4.8 KiB
4.8 KiB
title
| title |
|---|
| Именование |
Именование
Именование должно быть предсказуемым, коротким и отражать смысл сущности.
Базовые правила
| Что | Рекомендуется |
|---|---|
| Папки | kebab-case |
| Файлы | kebab-case |
| Переменные | camelCase |
| Константы | SCREAMING_SNAKE_CASE |
| Классы | PascalCase |
| React-компоненты | PascalCase |
| Хуки | useSomething |
| CSS классы | camelCase |
Архитектурный неймспейс
Соглашение о суффиксах, которые обозначают слой (уровень абстракции), роль или тип файла.
- Суффиксы используются для обозначения слоя, роли или типа файла.
- Суффиксы всегда пишутся в единственном числе.
- Формат имени:
name.<suffix>.tsилиname.<suffix>.tsx.
UI и слои FSD
.screen.tsx— экран.layout.tsx— layout.widget.tsx— виджет.feature.tsx— UI фичи.entity.tsx— UI сущности
Остальные .tsx файлы (компоненты в shared/ui/, дочерние компоненты в ui/) не помечаются суффиксами — расширение .tsx само по себе означает UI‑компонент.
Логика и модель
.store.ts— стор.service.ts— сервис
Типы и контракты
.type.ts— типы и интерфейсы.interface.ts— файл с интерфейсами (если нужен отдельный контракт).enum.ts— enum.dto.ts— внешние DTO.schema.ts— схемы валидации.constant.ts— константы.config.ts— конфигурация
Утилиты и хелперы
.util.ts— утилиты.helper.ts— вспомогательные функции.lib.ts— вспомогательные функции
Тесты
.test.ts/.test.tsx.mock.ts
Хорошо
src/
├── screens/
│ └── main/
│ ├── main.screen.tsx
│ └── index.ts
├── features/
│ └── auth-by-email/
│ ├── ui/
│ │ └── login-form.tsx
│ ├── auth-by-email.feature.tsx
│ └── index.ts
└── shared/
└── ui/
└── icon/
├── styles/
│ └── icon.module.css
├── types/
│ └── icon.interface.ts
├── icon.tsx
└── index.ts
Плохо
// Плохо: нет единых правил для слоёв и публичных файлов.
src/
├── screens/
│ └── Main/
│ └── Main.tsx
└── features/
└── authByEmail/
└── login-form.tsx
Булевы значения
- Использовать префиксы
is,has,can,should.
Хорошо
const isReady = true;
const hasAccess = false;
const canSubmit = true;
const shouldRedirect = false;
Плохо
// Плохо: неясное булево значение без префикса.
const ready = true;
const access = false;
const submit = true;
События и обработчики
- Обработчики начинать с
handle. - События и колбэки начинать с
on.
Хорошо
const handleSubmit = () => { ... };
const onSubmit = () => { ... };
Плохо
// Плохо: неочевидное назначение имени.
const submitClick = () => { ... };
Коллекции
- Для массивов использовать имена во множественном числе.
- Для словарей/мап — использовать суффиксы
ById,Map,Dict.
Хорошо
const users = [];
const usersById = {} as Record<string, User>;
const userIds = ['u1', 'u2'];
const ordersMap = new Map<string, Order>();
const featureFlagsDict = { beta: true, legacy: false } as Record<string, boolean>;
Плохо
// Плохо: имя не отражает, что это коллекция.
const user = [];
// Плохо: словарь назван как массив.
const usersMap = [];
// Плохо: по имени непонятно, что это словарь.
const users = {} as Record<string, User>;