Генератор ESLintrc

Что содержит сгенерированная конфигурация

Генератор всегда начинает с eslint:recommended и добавляет ровно то, что подразумевает ваш выбор:

• env с browser и/или node, плюс es2022
• @typescript-eslint/parser и plugin:@typescript-eslint/recommended, когда TypeScript включён
• plugin:react/recommended, когда React включён
• no-console и no-unused-vars, установленные в warn

Результат: это обычный JSON-объект в классическом формате .eslintrc.json, готовый к вставке и дополнению вашими правилами.

Плоский формат против устаревшего

ESLint 9 отказался от формата .eslintrc.* в пользу плоской конфигурации (eslint.config.js). Основные различия:

Новые проекты должны использовать плоскую конфигурацию. Существующие проекты могут оставаться на устаревшем формате вплоть до линейки 10.x, однако рекомендуется провести миграцию.

Экосистема плагинов

Типичные плагины для проектов React/TS:

@typescript-eslint/eslint-plugin
@typescript-eslint/parser
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-jsx-a11y
eslint-plugin-import
eslint-config-prettier

Это шесть пакетов для умеренно строгой настройки. Генератор добавляет те, которые вы выбрали, поэтому вы устанавливаете только то, на что ссылается конфигурация.

Сосуществование с Prettier

Prettier занимается форматированием; ESLint, проверкой корректности кода и его стиля помимо форматирования. Для предотвращения конфликтов:

1. Установите eslint-config-prettier и добавьте его ПОСЛЕДНИМ элементом в вашем extends/config.
2. Он отключает все правила ESLint, которые конфликтуют с выводом Prettier.
3. Запускайте Prettier отдельно (при сохранении в редакторе, в pre-commit-хуке, в CI).

Не используйте eslint-plugin-prettier в новых проектах: он замедляет работу ESLint за счёт запуска инструмента Prettier внутри ESLint. Используйте два инструмента отдельно.

Советы по настройке правил

• Начинайте мягко, затягивайте постепенно. Включайте предупреждения раньше ошибок.
• Переопределяйте для тестов. В тестовых файлах часто нужно ослабить no-unused-expressions и сделать доступными глобальные переменные Jest.
• Переопределяйте для скриптов. Скриптам сборки могут понадобиться глобальные переменные Node без глобального добавления env: node.
• Документируйте переопределения. Каждое переопределение правила заслуживает комментария с объяснением причины.

Конфигурация, соответствующая вашему редактору

Для использования VS Code необходимо установить и настроить расширение ESLint. Добавьте его в настройки рабочего пространства для автоматического исправления ошибок при сохранении файла.

{
  "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" },
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}