Prettier

↑ 6.3 Качество кода и тестирование: продвинутый уровень · ← Предыдущая · → Следующая

Желательно~3 мин чтенияУровень: middle

Зачем это на собесе

Проверяют, что вы разделяете форматирование и качество кода, и знаете, как убрать споры о стиле в code review.

Суть

Prettier — opinionated-форматтер. Он полностью переписывает код по единым правилам, и обсуждение отступов и запятых уходит из review.

Настройка

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "all"
}

Опций намеренно мало. Хорошая практика: закоммитить .prettierrc и .prettierignore (dist, coverage, lock-файлы).

Интеграция

• в редакторе — format on save;
• в git-хуке — через lint-staged (prettier --write);
• в CI — prettier --check .: падает, если код не отформатирован;
• с ESLint — отдельными шагами, а не плагином внутри ESLint (быстрее и проще диагностика).

Нюансы

• переформатирование всего репозитория делайте одним коммитом и добавьте его в .git-blame-ignore-revs, чтобы git blame не ломался;
• плагины: prettier-plugin-tailwindcss для сортировки классов;
• Vue SFC и шаблоны поддерживаются из коробки.

Вопросы с ответами

Зачем Prettier, если есть ESLint?

Он снимает споры о стиле и форматирует быстрее и предсказуемее. Правила стиля из ESLint только дублировали бы его.

Как не сломать git blame при массовом форматировании?

Вынести форматирование в отдельный коммит и добавить его хэш в .git-blame-ignore-revs; GitHub и git его учитывают.