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

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

Рассмотрим пять правил ESLint из пакета angular-eslint, которые следует включить в Angular-приложение.

Самозакрывающиеся теги компонентов (self-closing components tags) 

Начнем с простого, но полезного правила: @angular-eslint/template/prefer-self-closing-tags. Хотя оно и не меняет ситуацию, но все же улучшает читаемость и повышает качество опыта разработчика (DX).

Это правило реализует следующий паттерн:

// @ts-проверка
const eslint = require("@eslint/js");
const tseslint = require("typescript-eslint");
const angular = require("angular-eslint");

module.exports = tseslint.config(
  {
    files: ["**/*.html"],
    extends: [
      ...angular.configs.templateRecommended,
      ...angular.configs.templateAccessibility,
    ],
    rules: {
      "@angular-eslint/template/prefer-self-closing-tags": ["warn|error"],
    },
  },
  ...
);

Ссылка на Github.

Кроме того, оно поддерживает автоисправление (autofix), что позволяет легко переключиться на самозакрывающиеся теги, выполнив ng lint --fix.

Автономная архитектура (standalone architecture)

Многие разработчики уже учатся обходиться без NgModules. Однако вы все еще можете применить эту систему модульности Angular, используя следующее правило: @angular-eslint/prefer-standalone. 

// @ts-проверка
const eslint = require("@eslint/js");
const tseslint = require("typescript-eslint");
const angular = require("angular-eslint");

module.exports = tseslint.config(
  {
    files: ["**/*.ts"],
    extends: [
      eslint.configs.recommended,
      ...tseslint.configs.recommended,
      ...tseslint.configs.stylistic,
      ...angular.configs.tsRecommended,
    ],
    processor: angular.processInlineTemplates,
    rules: {
      "@angular-eslint/prefer-standalone": ["warn|error"],
    },
  },
  ...
);

Ссылка на Github.

Хотя правило поддерживает автоисправление (autofix), переключение в автономный режим часто требует дополнительной работы.

Можно установить значения по умолчанию в файле angular.json (nx.json). Однако ничто не мешает обойтись без CLI Angular, поэтому правило ESLint служит вспомогательной линией защиты.

Оптимизированные изображения (optimized images)

В Angular появилась директива NgOptimizedImage для решения распространенных проблем с изображениями. Эта директива направлена на улучшение таких факторов ранжирования онлайн-ресурсов, как LCP (largest contentful paint — скорость загрузки крупных визуальных элементов страницы) и CLS (cumulative layout shift — скорость визуальной стабилизации), а также на соблюдение общих лучших практик. Несомненно, следование директиве — лучший выбор, чем использование нативного атрибута src.

Это предусмотрено в следующем правиле ESLint:

// @ts-проверка
const eslint = require("@eslint/js");
const tseslint = require("typescript-eslint");
const angular = require("angular-eslint");

module.exports = tseslint.config(
  {
    files: ["**/*.html"],
    extends: [
      ...angular.configs.templateRecommended,
      ...angular.configs.templateAccessibility,
    ],
    rules: {
      "@angular-eslint/template/prefer-ngsrc": ["warn|error"],
    },
  },
  ...
);

Ссылка на Github.

Встроенный синтаксис потока управления (built-in control flow syntax)

Известная структурная директива NgFor больше не рекомендуется для итерации по коллекции элементов в шаблоне компонента. Теперь предпочтение отдается встроенному синтаксису потока управления, который включает цикл for. Эта альтернатива не только предлагает более интуитивно понятный синтаксис, но и приводит к значительному повышению производительности.

Следующее правило позволяет применить новое решение:

// @ts-проверка
const eslint = require("@eslint/js");
const tseslint = require("typescript-eslint");
const angular = require("angular-eslint");

module.exports = tseslint.config(
  {
    files: ["**/*.html"],
    extends: [
      ...angular.configs.templateRecommended,
      ...angular.configs.templateAccessibility,
    ],
    rules: {
      "@angular-eslint/template/prefer-control-flow": ["warn|error"],
    },
  },
  ...
);

Ссылка на Github.

Беззоновое обнаружение изменений (zoneless change detection)

В Angular 18 появилась экспериментальная поддержка беззонового обнаружения изменений. Если ваш код совместим со стратегией обнаружения изменений OnPush, то он, по сути, подготовлен к будущему с технологией беззонового обнаружения.

Следовательно, будет полезно применить стратегию обнаружения изменений OnPush, используя следующее правило:

// @ts-проверка
const eslint = require("@eslint/js");
const tseslint = require("typescript-eslint");
const angular = require("angular-eslint");

module.exports = tseslint.config(
  {
    files: ["**/*.ts"],
    extends: [
      eslint.configs.recommended,
      ...tseslint.configs.recommended,
      ...tseslint.configs.stylistic,
      ...angular.configs.tsRecommended,
    ],
    processor: angular.processInlineTemplates,
    rules: {
      "@angular-eslint/prefer-on-push-component-change-detection": ["warn|error"],
    },
  },
  ...
);

Ссылка на Github.

Кроме того, вы можете установить его как значение по умолчанию в файле angular.json (nx.json).

Заключение

Эти пять правил ESLint из пакета angular-eslint могут значительно оптимизировать разработку Angular-приложений. Они не только обеспечивают соблюдение лучших практик, но и помогают поддерживать согласованность кода, особенно в объемных кодовых базах с большим количеством участников.

Читайте также:

Читайте нас в Telegram, VK и Дзен

Перевод статьи Wojciech Trawiński: 5 ESLint rules to enforce modern Angular features

Предыдущая статьяПять распространенных ошибок производительности баз данных при разработке API