Этап 9 из 19 · ≈ 3 ч

Линтеры и форматтеры

Основа с Junior

ESLint, Prettier, Stylelint и автоматическая проверка перед коммитом.

Линтер (ESLint, Biome) находит ошибки: неиспользуемые переменные, пропущенные зависимости хуков, недостижимый код, опасные конструкции. Форматтер (Prettier, Biome) расставляет отступы, кавычки и переносы — споры о стиле в ревью исчезают.

Что важно знать

  • Линтер и форматтер не должны спорить: форматирование отдают форматтеру, правила стиля в линтере выключают.
  • Плагины для React (react-hooks/exhaustive-deps), доступности (jsx-a11y), TypeScript (typescript-eslint).
  • Проверка до коммита (husky и lint-staged) и обязательно в CI — иначе правила постепенно перестают соблюдаться.
  • tsc --noEmit — проверка типов отдельным шагом: Vite и esbuild типы не проверяют.
  • Stylelint — то же для CSS.

Критерии освоения

Junior ≈ 3 ч

  • Настраивает ESLint и Prettier так, чтобы они не конфликтовали, и исправляет замечания

Практика. Настроить ESLint и Prettier в учебном проекте и исправить все замечания.

Middle ≈ 3 ч

  • Подключает проверку перед коммитом и в CI, включая отдельную проверку типов
  • Подбирает правила для React, доступности и TypeScript

Практика. Добавить lint-staged, проверку типов в CI и плагины react-hooks и jsx-a11y, исправить найденное.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Зачем нужны ESLint и Prettier и как их подключить к проекту?Junior

ESLint — линтер: находит ошибки и опасные конструкции (неиспользуемые переменные, нарушение правил хуков, сравнение через ==). Prettier — форматтер: единообразно расставляет отступы, кавычки, переносы, без споров о стиле. Настраивают в репозитории, запускают…

Полный разбор
Что такое npm-скрипты и npx?Junior

Раздел scripts в package.json — именованные команды проекта: npm run dev, npm run build, npm test. В скриптах доступны бинарники из node_modules/.bin без указания пути — поэтому инструменты ставят локально в devDependencies, а не глобально: у всех одинаковые…

Полный разбор
Зачем нужен TypeScript и чем any отличается от unknown?Junior

TypeScript добавляет к JavaScript статические типы, которые проверяются при компиляции и стираются в итоговом JS. Польза: ошибки до запуска, автодополнение, безопасный рефакторинг, типы как документация. any отключает проверку; unknown — «что угодно», но…

Полный разбор
Зачем нужен lock-файл (package-lock.json, pnpm-lock.yaml) и чем npm install отличается от npm ci?Junior

package.json задаёт диапазоны версий (^1.2.0), а lock-файл фиксирует точные версии всего дерева зависимостей — у всех разработчиков и в CI ставится одно и то же. Lock-файл коммитят. npm install может обновить lock в рамках диапазонов; npm ci ставит строго по…

Полный разбор

Документация

← Вся карта «Frontend-разработчик»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования