Вам срочно нужно освоить Prettier, и вот почему

  • 13 мая 2026

Софт

Евгений Шкляр

В команде из нескольких человек, где пока не устаканились стандарты написания кода, этот самый код быстро превращается непонятно во что: один ставит одинарные кавычки, другой — двойные, третий делает отступы табами, четвёртый — пробелами. На ревью половина комментариев относятся не к логике, а к стилю, и это большая трата времени и для команды, и для компании.

Prettier решает проблему радикально: он берёт ваш код и переформатирует его по единым правилам. После этого весь код в проекте выглядит одинаково, вне зависимости от того, кто его написал.

Установка и запуск

npm install --save-dev prettier

Отформатировать один файл:

npx prettier --write src/main.js

Отформатировать весь проект:

npx prettier --write .

Посмотреть, что изменится, не меняя файлы:

npx prettier --check .

Это удобно в CI: команда вернёт ошибку, если код не отформатирован, и не пропустит пулреквест.

Попробуйте сами

До Prettier
constgetUser=(id,opts)=>{ const url=`/api/users/${id}`return fetch(url,{method:'GET', headers:{"Content-Type":"application/json"}, ...opts}) .then(r=>r.json()) }
После Prettier
// нажмите «Запустить»

Настройка

Prettier намеренно даёт мало настроек — это часть идеи. Создайте файл .prettierrc в корне проекта:

{
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2,
  "printWidth": 80,
  "trailingComma": "es5"
}

Этого обычно достаточно. Остальное Prettier решает сам.

Prettier и ESLint вместе

Prettier форматирует код, ESLint проверяет его на ошибки. Это разные задачи, и они хорошо работают вместе. Чтобы ESLint не конфликтовал с правилами Prettier, используйте пакет eslint-config-prettier — он отключает в ESLint всё, что касается форматирования:

npm install --save-dev eslint-config-prettier

Форматирование при сохранении

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

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

После этого можно писать код как угодно — при сохранении Prettier сам приведёт его в порядок.

Что запомнить

Prettier, строго говоря, убирает споры о стиле кода. Запустили один раз, и после этого весь проект выглядит одинаково. Главная ценность остаётся не в красоте кода, а в том, что команда перестаёт тратить время на обсуждение форматирования на ревью.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники