3. Нейминг
3.1. Правила наименования переменных:
| ⚡ Description | ✅ Good | ❌ Bad |
|---|---|---|
| Избегайте однобуквенных переменных (в циклах допустимо) | const name = 'Ivan' | const n = 'Ivan' |
| Избегайте аббревиатур | const startOfWeek = 'Sunday' | const sof = 'Sunday' |
| Избегайте бессмысленных имен | const appInit = false | const foo = false |
| Избегайте названий переменных с нижним подчеркиваем | const getUser = {} | const _getUser = {} |
| Избегайте цифр в названии переменных * Исключение в том случае если цифра входит в название сущности | const book const olympusEM5 | const book1 |
| Функция должна выполнять что то одно и называться соответственно | const fetchPosts const sortPosts | const fetchAndSortPosts |
| Стараться придерживаться общепринятых названий для стандартных операций | const trimPath const cutPath | const truncatePath |
| Придерживаться единого соглашения для однообразных операций. Например для получения данных используется get, то во всех функциях получения данных стоит придерживаться этого нейминга | const getProfile const getNews const getPosts | const fetchProfile const recieveNews const getPosts |
3.2. Для названий файлов с компонентами используем PascalCase, для всех остальных camelCase:
| ⚡ Type | ✅ Good | ❌ Bad |
|---|---|---|
| components | ImagePreview.tsx | index.tsx, image-preview.tsx, image_preview.tsx |
| slice | appSlice.ts | app-slice.ts |
| selectors | appSelectors.ts | app-selectors.ts |
| utils | handleServerAppError.ts | handle-server-app-error.ts |
| hooks | useDebounce.ts | use-debounce.ts |
| api | authApi.ts | auth-api.ts, authAPI.ts |
3.3. Для названий переменных (массивов, объектов, функций) используем camelCase:
| ⚡ Type | ✅ Good | ❌ Bad |
|---|---|---|
| объекты (массивы) | const users = [] | const Users = [] |
| функции | const getRandomNumber | const GetRandomNumber, const get-random-number |
3.4. Названия констант пишем через CONSTANT_CASE:
| ✅ Good | ❌ Bad |
|---|---|
const MAX_LENGTH = 100 | const Max_length = 100, const max-length = 100 и т.д. |
3.5. Для enum используем PascalCase. Более подробно в разделе Enums
| ✅ Good | ❌ Bad |
|---|---|
enum Direction | enum DIRECTION, enum direction |
3.6. Названия типов (type)
- ❗ Т.к. пропсы мы не экспортируем предлагаю их называть
Props - ❗ Для экспортируемых типов (библиотеки, переиспользуемые компоненты) используем название сущности +
Props - ❗ Не пишем в конце Type
| ⚡ Type | ✅ Good | ❌ Bad |
|---|---|---|
| props | Props | PropsType, UserProps, UserPropsType |
| exported props | ButtonProps | ButtonPropsType |
| типы, которые есть в проекте | User | UserType |
3.7. Разделяем через точку dot.case (type, storybook, test)
| ⚡ Type | ✅ Good | ❌ Bad |
|---|---|---|
| type | authApi.types.ts | authApiTypes.ts, authApi-types.ts |
| storybook | SignIn.stories.tsx | --- |
| test | authSlice.test.ts | --- |
3.8. Тесты кладем в папку с названием __tests__
💡
Это связано со значением свойства testMatch в конфигурации Jest, которое по умолчанию выглядит так:
Terminal
[ "**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)" ]Это означает, что Jest будет считать файл тестом, если он имеет расширение .js(x) или .ts(x) и:
- Файл содержит в своем имени .test или .spec.
- Файл находится внутри папки с названием tests.
Таким образом, если у вас есть файлы с расширением .js(x) или .ts(x), и они соответствуют одному из этих двух условий, Jest будет рассматривать их как файлы для запуска тестов. Это помогает Jest автоматически находить и запускать ваши тесты в соответствии с этими соглашениями.
🔗
3.9. Структура проекта
🔗
- store.ts
- App.tsx
- appSlice.ts
- appSelectors.ts
- authApi.ts
- authApi.types.ts
- useLogin.ts
- authSlice.ts
- authSelectors.ts