Banx. Настройка базовых правил в eslint в Nx в Angular

В данной статье поговорим о настройке правил для eslint в монорепозитории Nx. Рассмотрим конфигурации «recomended» от eslint, typescript и angular-eslint, и создадим базовые правила для монорепозитория.

Ранее я уже писал про настройку eslint’а — Angular миграция с tslint на eslint. Перевод монорепозитория Nx на eslint. Однако, в тот момент не было стабильной версии angular-eslint, да и в Nx была достаточно поверхностная поддержка. Сейчас же ситуация поменялась, и осталось немного времени и уже сам Angular перейдет на eslint (Angular 12).

Данная статья является продолжением статьи — Banx. Создание Nx workspace для Angular, в котором был создан монорепозиторий Nx, на примере которого будет рассматриваться подключение и настройка eslint правил.

Использование eslint в Angular приложениях

Для использования eslint в Angular есть несколько путей:

• Использовать — Nx. При генерации монорепозитория Nx в качестве литнера можно выбрать eslint. Тогда в workspace уже будет настроен eslint. Однако, Nx оставляет на усмотрение разработчика какие правила включать, по умолчанию, в проекте будут отсутствовать какие-либо правила.
• Самостоятельно подключить eslint, следуя рекомендациям angular-eslint. Стоит отметить два важных момента при самостоятельном подключении eslint. Первое — важно прочитать принципы подключения и использования правил eslint. Для того, чтобы использовать angular-eslint необходимо применять правила для конкретных файлов, а не создавать универсальную конфигурацию для всех типов файлов. Второе — при генерации правил, командной ng g @angular-eslint/schematics:convert-tslint-to-eslint projectName будут добавлены все возможные правила, для максимальной совместимостью с правилами tslint’а. Однако нет смысла их все подключать, так как все эти правила это ничто иное, как объединение рекомендованных конфигураций (конфигов) eslint, typesript и angular-eslint. Все эти правила можно объединить в 3–4 стоки (подробнее об этом будет ниже в статье).
• Дождаться Angular 12, в которой будет удален tslint.

Базовые правила eslint

Так как ранее, был создан монорепозиторий, будем считать, что имеем пустой workspace, в котором настроен eslint.

Откроем .eslintrc.json, который был создан при генерации workspace и располагается в корне проекта:

Что есть в файле:

• root — говорит о том, что это главный файл eslint
• plugins — набор подключенных плагинов, но как видно есть только nx
• overrides — содержит группы правил для определённых файлов. Из интересного, что все ts или js файлы проверяются на nx/enforce-module-boundaries, а также к этим файлам применяются правила plugin:@nrwl/nx/typescript.

С одной стороны есть — plugin:@nrwl/nx/typescript, с другой стороны не ясно, достаточно ли данных правил.

Для того, чтобы разобраться какие правила должны быть включены, посмотрим рекомендованные наборы правил для eslint, typesript и angular-eslint.

Начнем с базового — eslint:recommended:

В списке правил находятся основные правила для исключения синтаксических ошибок при работе с Javascript.

Так как Angular написан на Typescript, подключим рекомендации от typescript-eslint — “plugin:@typescript-eslint/eslint-recommended”:

Данный набор правил отключает соответствующие проверки eslint’а, которые уже проверяются компилятором Typescript’а.

Далее, подключаем рекомендации для Typescript — “plugin:@typescript-eslint/recommended”:

В extended есть подключение eslint-recommended, поэтому отдельно подключать plugin:@typescript-eslint/eslint-recommended нет смысла.

В основном все правила принадлежат коррекции синтаксических ошибок, которые могут возникнуть при написании ts кода.

После того, как были определены правила для JS и TS, добавим правила для Angular — “plugin:@angular-eslint/recommended”:

Тут стоит отметить, что в данном списке представлены необходимые правила, но они не отображают, полного совпадения с правилами tslint, которые есть в Angular. Для полной поддержки нужно добавить следующие наборы правил:

plugin:@angular-eslint/ng-cli-compat:

и plugin:@angular-eslint/ng-cli-compat — formatting-add-on:

В итоге были подключены следующие рекомендации:

"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@angular-eslint/recommended",
"plugin:@angular-eslint/ng-cli-compat",
"plugin:@angular-eslint/ng-cli-compat--formatting-add-on",

Все эти рекомендации это объединение следующих правил:

Явное указание всех правил, внушает больше доверия, чем просто импорт 6 рекомендаций.

Примерно, что-то похожее можно получить при генерации правил во время миграции с tslint на eslint.

Если вы не используете Nx, то выше приведенных правил хватит для старта проекта.

Стоит отметить, что для Angular есть два подхода:

Первый состоит в том, чтобы использовать — “plugin:@angular-eslint/recommended” которые сейчас будут в приоритете в Angular и со временем будет расширятся.

Либо использовать наборы: “plugin:@angular-eslint/ng-cli-compat”,
“plugin:@angular-eslint/ng-cli-compat — formatting-add-on” — которые отображают старый подход и сейчас считаются устаревшим.

Какой вариант выбирать, обычно сводиться к следующему:

• для новых проектов используйте первый вариант;
• для старых проектов второй, с дальнейшей миграцией на первый, если такое позволительно.

Nx и рекомендации eslint

Если с простым приложением Angular стало все понятно, что же делать при использовании Nx.

В начале уже упоминались рекомендации Nx — “plugin:@nrwl/nx/typescript”:

Как видно, команда Nx уже потрудилась за нас и создала готовый набор всех необходимых рекомендаций для Typescript.

Правила для Angular есть в наборе — “plugin:@nrwl/nx/angular”:

И так как Nx предполагает использование не только Angular, то есть и другие рекомендации. Список всех рекомендаций Nx:

angular-template.ts
angular.ts
javascript.ts
react-base.ts
react-jsx.ts
react-tmp.ts
react-typescript.ts
typescript.ts

Настройка Banx

Для нового созданного монорепозитория (в предыдущей статье) необходимо добавить всего-лишь поддержку angular:

{
  "files": ["*.ts", "*.tsx"],
  "extends": ["plugin:@nrwl/nx/typescript", "plugin:@nrwl/nx/angular"],
  "rules": {}
},

И можно явно указать проверку inline шаблонов:

{
  "files": ["*.html"],
  "extends": ["plugin:@nrwl/nx/angular-template"],
  "rules": {
    "max-len": ["error", { "code": 140 }]
  }
},
{
  "files": ["*.component.ts"],
  "extends": ["plugin:@angular-eslint/template/process-inline-templates"]
}

Резюме

В данной статье:

• Разобрали основные рекомендации eslint, typescript и angular
• Получили полный список всех правил, путем объединения всех рекомендаций и исключением дублирующихся правил.
• Поговорили о рекомендациях Nx и на примере Banx добавили в новый монорепозиторий поддержку Angular.

В следующей статье, мы поговорим о базовой структуре приложения.

Исходники

Все исходники находятся на github, в репозитории:

Fafnur/banx

Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — add-eslint.

git checkout add-eslint

Ссылки

Подписывайтесь на блог, чтобы не пропустить новые статьи про Angular, веб-разработку и новости из мира фронтенда.

Medium: https://medium.com/fafnur
Добавляйтесь в группу ВК: https://vk.com/fafnur
Добавляйтесь в группу в Fb: https://www.facebook.com/groups/fafnur/
Телеграм канал: https://t.me/f_a_f_n_u_r
Twitter: https://twitter.com/Fafnur1
Instagram: https://www.instagram.com/fafnur
LinkedIn: https://www.linkedin.com/in/fafnur

Предыдущие статьи:

1. Banx. Создание Nx workspace для Angular