Вопрос с собеседования · Frontend

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

JuniorВыкатка и эксплуатация
Ещё спрашивают так:
  • Чем линтер отличается от форматтера?
Коротко

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

  • Правила форматирования отдают Prettier, в ESLint их отключают (eslint-config-prettier)
  • Ошибки линтера в CI блокируют слияние
  • Стиль на ревью больше не обсуждают

Подробно

"scripts": {
  "lint": "eslint .",
  "format": "prettier --write .",
  "check": "prettier --check . && eslint ."
}

Что хотят услышать

  • Разница линтера и форматтера.
  • Запуск в редакторе, хуке и CI.
  • Стиль на автоматике, а не на ревью.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✓ESLint ищет ошибки и опасные конструкции, Prettier форматирует; оба — в редакторе, pre-commit и CI
  • ✗Prettier находит логические ошибки в коде, а ESLint только расставляет отступы и кавычки по стилю команды
  • ✗ESLint и Prettier — одно и то же, достаточно любого из них
  • ✗Достаточно запускать линтер вручную, когда вспомнишь

Связанные вопросы

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

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

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

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