frontend-style-guide/parts/3-code-style.md

title

title
Стиль кода

Стиль кода

Раздел описывает единые правила оформления кода: отступы, переносы, кавычки, порядок импортов и базовую читаемость.

Отступы

• 2 пробела (не табы).

Длина строк

• Ориентироваться на 100 символов, но превышение допустимо, если строка читается легко.
• Переносить выражение на новые строки, когда строка становится плохо читаемой.
• Не переносить строку внутри строковых литералов без необходимости.

Хорошо

const config = createRequestConfig(
  endpoint,
  {
    headers: {
      'X-Request-Id': requestId,
      'X-User-Id': userId,
    },
    params: {
      page,
      pageSize,
      sort: 'createdAt',
    },
  },
  timeoutMs,
);

Плохо

// Плохо: длинная строка с вложенными структурами плохо читается.
const config = createRequestConfig(endpoint, { headers: { 'X-Request-Id': requestId, 'X-User-Id': userId }, params: { page, pageSize, sort: 'createdAt' } }, timeoutMs);

Кавычки

• В JavaScript/TypeScript использовать одинарные кавычки.
• В JSX/TSX для атрибутов использовать двойные кавычки.
• Шаблонные строки использовать только при интерполяции или многострочном тексте.

Хорошо

const label = 'Сохранить';
const title = `Привет, ${name}`;

<input type="text" placeholder="Введите имя" />

Плохо

// Плохо: двойные кавычки в TS и конкатенация вместо шаблонной строки.
const label = "Сохранить";
const title = 'Привет, ' + name;

// Плохо: одинарные кавычки в JSX-атрибутах.
<input type='text' placeholder='Введите имя' />

Точки с запятой и запятые

• Допускаются упущения точки с запятой, если код остаётся читаемым и однозначным.
• В многострочных массивах, объектах и параметрах функции запятая в конце допускается, но не обязательна.

Импорты

• В именованных импортах использовать пробелы внутри фигурных скобок.
• Типы импортировать через import type.
• default импорт и экспорт избегать, использовать именованные.
• Избегать импорта всего модуля через *.

Хорошо

import { MyComponent } from 'MyComponent';
import type { User } from '../model/types';

Плохо

// Плохо: default импорт и отсутствие пробелов в именованном импорте.
import MyComponent from 'MyComponent';
import type {User} from '../model/types';

Ранние возвраты (early return)

• Использовать ранние возвраты для упрощения чтения.
• Избегать else после return.

Хорошо

const getName = (user?: { name: string }) => {
  if (!user) {
    return 'Гость';
  }

  return user.name;
};

Плохо

// Плохо: лишний else после return усложняет чтение.
const getName = (user?: { name: string }) => {
  if (user) {
    return user.name;
  } else {
    return 'Гость';
  }
};

Форматирование объектов и массивов

• В многострочных объектах каждое свойство на новой строке.
• В многострочных массивах каждый элемент на новой строке.
• Объекты и массивы можно писать в одну строку, если длина строки не превышает 100 символов.
• В однострочных объектах и массивах использовать пробелы после запятых.

Хорошо

const roles = ['admin', 'editor', 'viewer'];
const options = { id: 1, name: 'User' };

const config = {
  url: '/api/users',
  method: 'GET',
  params: { page: 1, pageSize: 20 },
};

Плохо

// Плохо: нет пробелов после запятых и объект слишком длинный для одной строки.
const roles = ['admin','editor','viewer'];
const options = { id: 1,name: 'User' };
const config = { url: '/api/users', method: 'GET', params: { page: 1, pageSize: 20 } };