Бумеры на месте?

В конце 2024 года команда Angular открыла RFC для обсуждения обновленного стайлгайда. Один из пунктов предлагает отказаться от суффиксов в названиях файлов и классов. То есть вместо привычных .component, .service, .pipe, .directive рекомендовано использовать осмысленные имена файлов. А в классах убрать «Component/Service/Directive» и писать просто App, Home и т. п. Идея команды - сконцентрироваться на «говорящих» именах, условный user.service.ts действительно не дает полного понимания того, что именно делает класс (и да, отчасти это правда).
Предложение ожидаемо вызвало недоумение у разработчиков, которые много лет работают с Angular и привыкли к устоявшимся соглашениям.

Я сам недавно вплотную столкнулся с новым неймингом: стартовал пару боевых проектов и сделал несколько учебных демок на Angular 20. Первые впечатления - даже немного радостно: имена короче, standalone-компоненты можно создавать без участия CLI, сделал button.ts, и готово. Раньше, конечно, тоже можно было, но «соглашение — есть соглашение».

Однако как только в проектах начала разрастаться бизнес-логика, а сервисы и директивы множиться, пришли первые сомнения. Над именами уже приходилось думать и «напрягать макушку». В голове возникло два рабочих и очевидных варианта:

1️⃣ внутри модуля/фичи выделять слайсы (читай директории) и тонко работать с импортами, чтобы избегать коллизий имен (прощай flat структура)

2️⃣ вносить в имя файла роль/назначение сущности, чтобы оно было по-настоящему осмысленным (прямо по заветам RFC)

С первым пунктом вопросов нет, это обычный рабочий флоу во многих современных проектах. Со вторым же пунктом пришлось повозиться и заглушить привычки, чтобы начать писать именно нормальный нейминг, а не скатываться в привычные *.service.ts файлы.

Для тех, кто пока не готов отходить от наработанных паттернов, есть путь попроще. Можно настроить схематики, чтобы новые сущности создавались по старому шаблону, с привычными суффиксами и именованием классов.

{
   "@schematics/angular:component": { "type": "component" },
   "@schematics/angular:directive": { "type": "directive" },
   "@schematics/angular:service": { "type": "service" },
   "@schematics/angular:guard": { "typeSeparator": "." },
   "@schematics/angular:interceptor": { "typeSeparator": "." },
   "@schematics/angular:module": { "typeSeparator": "." },
   "@schematics/angular:pipe": { "typeSeparator": "." },
   "@schematics/angular:resolver": { "typeSeparator": "." }
}

Ну а для совсем ленивых, ну то есть для всех разработчиков (хе-хе), есть пакет с забавным названием ngx-boomer, который добавляет настройки для схематиков автоматически. Запускаем без установки через npx и сидим кряхтим, что раньше было лучше! Ведь было же!?

🌟 вернуть все как было

@summon_the_coder | chat$.subscribe()

#angular #styleguide #schematics