Давайте честно: никто не любит разбирать код, где у каждого свой стиль, отступы скачут, а скобки живут своей жизнью. Даже если ты один в проекте, спустя месяц сам себя не поймёшь. А если вас трое, пятеро, десять? Ад кромешный. Вот тут-то и приходит на помощь Prettier — автоматический форматтер кода, который избавит тебя от холиваров «где ставить пробел» и «как переносить строки». Особенно, если ты работаешь в VS Code.

Возможности

• Автоматически форматирует твой код при сохранении файла или по команде.
• Поддерживает кучу языков: JS, TS, JSON, CSS, HTML, YAML, Markdown и другие.
• Работает одинаково на Windows, Linux и MacOS.
• Легко интегрируется с git pre-commit хуками, CI и другими тулзами.
• Можно настроить под стиль команды, но философия Prettier — меньше настроек, больше единообразия.

Что требуется

• VS Code (актуальная версия — официальный сайт).
• Node.js (желательно, но не обязательно, если только в редакторе, а не в проекте).
• Железо — любой современный комп, Prettier очень лёгкий.
• Желание навести порядок в проекте.

Установка — пошаговая инструкция

1. Открываем VS Code.
   Запускаем редактор, открываем свой проект.
2. Ищем и ставим расширение Prettier.
   Жмём Ctrl+Shift+X (или Cmd+Shift+X на Mac), ищем «Prettier — Code formatter» (официальная страница расширения), жмём «Установить».
3. Делаем Prettier форматтером по умолчанию.
   Заходим в настройки: Ctrl+,, ищем «default formatter», выбираем «esbenp.prettier-vscode».
4. Включаем автоформатирование при сохранении.
   В настройках ищем «Format On Save» и ставим галку (или добавляем в settings.json):

   {
     "editor.formatOnSave": true
   }

5. (Опционально) Устанавливаем Prettier в сам проект.
   В терминале (в корне проекта) пишем:

   npm install --save-dev prettier

   Это позволит запускать Prettier в CI, через npm-скрипты и делиться конфигами с командой.

6. (Опционально) Создаём конфиг-файл.
   В корне проекта заводим .prettierrc (или prettier.config.js), например:

   {
     "semi": true,
     "singleQuote": true,
     "trailingComma": "all"
   }

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

Использование, список команд и вариантов

• Автоформатирование при сохранении: просто сохраняешь файл (Ctrl+S), Prettier сам всё поправит.
• Ручной запуск: Shift+Alt+F или клик ПКМ → «Форматировать документ».
• Форматировать только выделенное: выделяешь кусок кода, ПКМ → «Форматировать выделенное».
• Форматировать весь проект: если Prettier установлен в проекте, в терминале:

  npx prettier --write .

• Игнорировать файлы: создаёшь .prettierignore (по аналогии с .gitignore).
• Просмотреть поддерживаемые опции: prettier.io/docs/en/options.html

Ошибки и как делать не надо

• Не ставьте Prettier глобально, если работаете в команде. Лучше — dev-зависимостью в каждом проекте. Так у всех будет одна версия.
• Не мешайте Prettier с другими форматтерами (например, Beautify, ESLint —fix). Иначе получите кашу: то одни правила, то другие.
• Не забывайте про .prettierignore. Не надо форматировать сгенерированные файлы, бандлы, картинки и т.д.
• Не спорьте о стиле — выберите минимальный набор опций и двигайтесь дальше. Prettier как раз для этого и создан.

Пример реального использования в окружении

Недавно на проекте, где 8 человек пишут на TypeScript и React, внедрили Prettier. До этого у всех были свои правила: кто-то табами, кто-то пробелами, у одних запятые, у других — нет. В итоге git blame был нечитабелен, ревью превращалось в обсуждение форматирования, а не логики.

Решили: ставим Prettier, конфиг в репо, editor.formatOnSave обязателен, pre-commit хук через lint-staged (husky помогает). В настройках VS Code прописали Prettier по умолчанию.

Итог: ревью стали быстрее, конфликты по стилю ушли, код читается одинаково у всех. Никто не спорит, все довольны. Даже новичок в команде сразу пишет так, как надо.

Заключение

Prettier — это must-have в современном фронте и даже бэке, если тебе не всё равно на чистоту кода. Не трать время на споры о стиле, трать на фичи и багфиксы. Установка занимает 5 минут, а экономит часы и нервы. Пользуйся, наводи порядок и не забывай смотреть официальную документацию — там много крутых примеров и советов.