75 lines
2.6 KiB
Markdown
75 lines
2.6 KiB
Markdown
|
---
|
|||
|
|
title: Стиль кода
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# Стиль кода
|
|||
|
|
|
|||
|
|
## Отступы
|
|||
|
|
|
|||
|
|
Используем 2 пробела для отступов во всём проекте. Не используем табы.
|
|||
|
|
|
|||
|
|
|
|||
|
|
## Кавычки
|
|||
|
|
|
|||
|
|
Используем **одинарные кавычки** для строк в JavaScript/TypeScript, и **двойные кавычки** для атрибутов в JSX/TSX.
|
|||
|
|
|
|||
|
|
**Пример:**
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
// JavaScript/TypeScript
|
|||
|
|
const message = 'Привет, мир!';
|
|||
|
|
const name = 'GramPay';
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
// JSX/TSX
|
|||
|
|
<input type="text" placeholder="Введите имя" />
|
|||
|
|
<button title="Сохранить">Сохранить</button>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Строгая типизация
|
|||
|
|
|
|||
|
|
всегда указывать типы для пропсов, возвращаемых значений, параметров функций.
|
|||
|
|
|
|||
|
|
## Ранние возвраты
|
|||
|
|
|
|||
|
|
(early return) для повышения читаемости.
|
|||
|
|
|
|||
|
|
## Мемоизация
|
|||
|
|
|
|||
|
|
Старайся оптимизировать код если это возможно.
|
|||
|
|
|
|||
|
|
## Документирование
|
|||
|
|
|
|||
|
|
Документируем ТОЛЬКО ОПИСАНИЕ (функций, компонентов, типов и их полей).
|
|||
|
|
|
|||
|
|
## any, unknown
|
|||
|
|
|
|||
|
|
запрещено использовать без крайней необходимости.
|
|||
|
|
|
|||
|
|
## Классы в TSX
|
|||
|
|
|
|||
|
|
Для стилизации компонентов используем CSS-модули и методологию BEM. Классы подключаются через объект стилей, импортированный из соответствующего `.module.css` файла.
|
|||
|
|
|
|||
|
|
> Объект стилей всегда импортируется с именем `s` (сокращённо от style), а не `styles`.
|
|||
|
|
|
|||
|
|
**Пример:**
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
import s from './my-component.module.css';
|
|||
|
|
|
|||
|
|
export const MyComponent = () => (
|
|||
|
|
<div className={s['my-component']}>
|
|||
|
|
<button className={s['my-component__button']}>Кнопка</button>
|
|||
|
|
<span className={s['my-component__text']}>Текст</span>
|
|||
|
|
<button className={s['my-component__button'] + ' ' + s._active}>
|
|||
|
|
Активная кнопка
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- Имя класса всегда берётся из объекта `s`.
|
|||
|
|
- Для модификаторов используется отдельный класс с нижним подчёркиванием (например, `s._active`).
|
|||
|
|
- Не используйте строковые литералы с классами напрямую — только через объект `s`.
|