Стандарты кодирования

Стандарты кодирования в Angular определяются набором правил, направленных на поддержание читаемости, масштабируемости и предсказуемости кода. Их соблюдение критически важно при работе в командах и поддержке крупных проектов.

Структура проекта

  • Модули (Modules): каждый модуль должен выполнять единственную функцию и быть максимально изолированным. Модули группируют компоненты, сервисы и другие зависимости по функциональным областям.
  • Компоненты (Components): разделение по принципу «один компонент — одна задача». Имя компонента должно отражать его назначение (UserListComponent, LoginFormComponent).
  • Сервисы (Services): все бизнес-логики и взаимодействие с API выносятся в сервисы, которые внедряются через dependency injection.

Именование

  • Файлы компонентов: camel-case для папок, kebab-case для файлов. Например: user-profile/user-profile.component.ts
  • Сервисы: PascalCase с окончанием Service: AuthService, DataFetcherService
  • Переменные и свойства: camelCase, константы — UPPER_CASE

Форматирование кода

  • Отступы: 2 пробела
  • Длина строки: до 120 символов
  • Интерполяции: использовать кавычки одинарные для строк в TypeScript, двойные — только при необходимости
const apiUrl = 'https://api.example.com';

Обработка ошибок

  • Использовать try-catch для критичных блоков
  • Для асинхронных операций применять catchError в RxJS:
this.http.get<User[]>(this.apiUrl)
  .pipe(catchError(err => {
    console.error('Ошибка запроса:', err);
    return of([]);
  }));

Типизация и строгий контроль

  • Все функции и методы должны иметь явно указанную типизацию аргументов и возвращаемого значения
  • Использовать интерфейсы для объектов данных:
interface User {
  id: number;
  name: string;
  email: string;
}
  • Применять readonly и const там, где значения не должны изменяться

Комментарии и документация

  • Комментарии должны быть информативными и минимальными. Не описывать очевидное, а объяснять нестандартные решения.
  • Использовать JSDoc для публичных методов компонентов и сервисов:
/**
 * Получает список пользователей с сервера
 * @returns Observable<User[]>
 */
getUsers(): Observable<User[]> {
  return this.http.get<User[]>(this.apiUrl);
}

Линтер и автоматизация

  • Обязательное использование TSLint/ESLint с предустановленными правилами Angular
  • Применение Prettier для автоматического форматирования
  • Настройка CI/CD для проверки код-стандарта при каждом коммите

Соблюдение этих стандартов обеспечивает устойчивость архитектуры, снижение количества ошибок и улучшает совместимость кода при расширении функционала приложения.

Оглавление