Angular ESLint больше не страшно

Как же я люблю статические анализаторы кода и результат их работы: порядок в коде, форматирование, отсортированные импорты, единообразие в порядке ключей объектов (да, и такое люблю!) и много чего еще.
Но как же я не люблю все это настраивать. Да, конфиги более-менее повторяются, но все равно приходится что-то допиливать руками.
А с новым flat-конфигом ESLint я до сих пор не подружился — использовал настройку по наитию, и пока все работает. Меня очень спасает ESLint Config Inspector, но умеет работать только с flat-конфигами. В общем, настройка проекта для меня — это всегда маленькая паника. 😳

Для страдающих, хороший стартовый ESLint шаблон: NG Best Practices: Prettier & ESLint

Для Angular есть отдельный пакет angular-eslint, который предоставляет специфичные для фреймворка правила — отдельно для шаблонов и для TypeScript-компонентов.
В Nx уже есть базовая преднастройка angular-eslint с рекомендованными правилами. Но и здесь иногда нужно, или даже приходится, подкрутить гайки: добавить или убрать какое-то правило. И тогда приходится лезть в репозиторий angular-eslint и внимательно читать, что за что отвечает и какие настройки есть. Максимально фрустрирующе! ☔️

Господи, мои молитвы были услышаны — ребята из Angular Courses выпустили новый инструмент: GUI для настройки ESLint под Angular.
Правила разбиты на группы: общие, компоненты, Typescript, RxJS и т.д. Можно выбрать нужные чекбоксы или просто нажать кнопку «Сделать все по красоте» aka «Выбрать все».
Для каждого правила есть сниппеты кода, показывающие, как оно работает. А еще — значок, указывающий, что правило рекомендовано официальным style guide’ом.
На выходе можно экспортировать конфиг в виде markdown-файла с примерами кода (например, чтобы вставить в вики проекта) или сразу как готовый .eslint.config.js.

Все, вот так просто! 🕺
Конфигуратор пока еще в альфа версии, будем следить за обновлениями. Пожалуй, мой самый любимый инструмент среди разрастающегося тулинга Angular. Хотелось бы все настраивать таким образом, но пока это мечты.

🌟 Настроить Angular ESLint

@summon_the_coder | chat$.subscribe()

#angular #eslint #bestpractice