Давайте поговорим о том, как перенести tslint на eslint в Angular.

 нг добавить @angular-eslint/schematics

Результаты запуска:

• Файл .eslintrc.json автоматически создается в корневом каталоге, а плагин eslint @angular-eslint используется по умолчанию.

 {
  «корень»: правда,
  "игнорировать шаблоны": [
    "проекты/**/*"
  ],
  "переопределяет": [
    {
      "файлы": [
        "*.ts"
      ],
      "parserOptions": {
        "проект": [
          "tsconfig.json"
        ],
        «createDefaultProgram»: правда
      },
      "расширяется": [
        "плагин:@angular-eslint/рекомендуется",
        "плагин:@angular-eslint/template/process-inline-templates"
      ],
      "правила": {
        "@angular-eslint/directive-selector": [
          "ошибка",
          {
            "тип": "атрибут",
            "префикс": "приложение",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/компонент-селектор": [
          "ошибка",
          {
            "тип": "элемент",
            "префикс": "приложение",
            "style": "кебаб-кейс"
          }
        ]
      }
    },
    {
      "файлы": [
        "*.html"
      ],
      "расширяется": [
        "плагин:@angular-eslint/шаблон/рекомендуется"
      ],
      "правила": {}
    }
  ]
}

• Следующая конфигурация cli, связанная с eslint, добавляется в angular.json. Если в будущем вы создадите библиотеку или приложение с помощью командной строки ng, в этом модуле будет автоматически создан файл .eslintrc.json.

 "кли": {
	    "defaultCollection": "@angular-eslint/schematics"
  }

2. Удалите или замените файлы или конфигурации, связанные с tslint.

• Удалите tslint.json в корневом каталоге или модуле.
• Удалите пакеты зависимостей разработки, связанные с tslint, такие как tslint или typescript-tslint-plugin и т. д.
• (Если есть) Удалите конфигурацию, связанную с плагином tslint, в tsconfig.json, например:

• Измените конфигурацию tslint (если она есть) в angular.json на eslint, которую, возможно, придется изменить вручную.

Исходная конфигурация tslint:

Измененная конфигурация eslint (например, настроенная для выполнения lint в каталоге project/lint-test):

3. Если вам нужно временно отключить проверку eslint некоторых кодов или файлов

• Добавьте следующий комментарий над кодом, чтобы временно отключить проверку eslint для этого кода.

 /* eslint-отключить */
const some_un_used_var;

• Вы можете добавить правило, когда проверка eslint сообщает об ошибке в комментарии, чтобы указать причину временного отключения проверки. Например, в следующем коде вы не хотите, чтобы eslint извлекал неиспользуемую переменную и выдавал ошибку.

 /* eslint-disable @typescript-eslint/no-unused-vars */
const some_un_used_var;

• Если вам нужно отключить проверку eslint для некоторых файлов, вы можете добавить файл .eslintignore под root.
• Шаблоны, требующие проверки lint, можно настроить в .eslintrc (в этой статье не будут вдаваться в подробности, официальное введение)

4. Проверьте, можно ли его использовать

Запустите команду lint

 нг ворс

Если миграция прошла успешно, поздравляем с завершением миграции!

(Необязательно) Другие поддерживающие плагины eslint

• eslint-plugin-deprecation: убедитесь, что код устарел.
• eslint-plugin-header: проверьте, соответствуют ли комментарии заголовка файла определенным правилам (могут использоваться для проверки версии, патента и т. д.).
• eslint-plugin-import: проверьте орфографические ошибки адреса импорта или имя, грамматику и т. д.
• eslint-plugin-prefer-arrow: проверка с помощью стрелочных функций.
• eslint-plugin-unicorn: проверьте синтаксис js и ts.
• eslint-plugin-jsdoc: связанная с документацией
• ...

Можно настроить в .eslintrc.json (официальная документация).

(Необязательно) Настройка кода VS

Установите плагин eslint

Код VS автоматически исправляет проблемы, связанные с eslint, при сохранении.

Установите в .vscode/settings.json

 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }

Или найдите настройки при сохранении в разделе «Файл» -> «Настройки» -> «Настройки», чтобы найти настройки, связанные с eslint.