ESLint и правила React; интеграция Prettier
Настройте ESLint с правилами React и подключите Prettier для единообразного форматирования; запускайте команды проверки стиля и исправления.
«ESLint и правила React; интеграция Prettier» — бесплатный урок React Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 3 уроков всего.
Зачем нужны ESLint и Prettier
Цель: Выявлять проблемы в коде с помощью ESLint и поддерживать единый стиль с помощью Prettier.
- ESLint: правила, плагины, исправление
- Prettier: форматировщик с заданными правилами
- Запускайте в средах разработки и CI
Установка и плагины
- ESLint: eslint, @typescript-eslint/* (если используется TS), eslint-plugin-react, eslint-plugin-react-hooks
- Prettier: prettier, eslint-config-prettier
- Сценарии: "lint", "lint:fix", "format"
Демонстрация: результат проверки и исправления
ESLint отмечает проблемы, а Prettier исправляет стиль. Сравните плохой и хороший варианты и посмотрите пример результата.
<div id="root"></div>
Демонстрация: имитация форматирования Prettier
Переключите режим, чтобы имитировать запуск Prettier; код будет отформатирован единообразно.
<div id="root"></div>
Советы и сценарии пакета
- Сценарии: "lint", "lint:fix", "format"
- Используйте eslint-config-prettier, чтобы отключить правила стиля
- Включите правила react-hooks: exhaustive-deps и rules-of-hooks
Важные правила React
Правила React:
- react/jsx-key — добавляйте key в списки
- react-hooks/rules-of-hooks — вызывайте хуки только на верхнем уровне
- react-hooks/exhaustive-deps — поддерживайте правильные зависимости эффектов
Роли ESLint и Prettier
Итоги
Итоги: ESLint находит проблемы, а Prettier форматирует код. Добавьте плагины React и правила для хуков, а также настройте сценарии для проверки, исправления и форматирования.
Часто задаваемые вопросы
Урок «ESLint и правила React; интеграция Prettier» бесплатный?
Да — полный текст урока «ESLint и правила React; интеграция Prettier» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 3 уроков всего.
Чему я научусь в уроке «ESLint и правила React; интеграция Prettier»?
Настройте ESLint с правилами React и подключите Prettier для единообразного форматирования; запускайте команды проверки стиля и исправления. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.
Сколько времени занимает урок «ESLint и правила React; интеграция Prettier»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- ESLint и правила React; интеграция Prettier
- Имена файлов, границы компонентов и имена свойств
- Переменные окружения и организация конфигурации