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 = 'ProjectName';
|
||
```
|
||
|
||
```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`.
|