Prettier для форматирования кода: как настроить автоматическое выравнивание стилей

Введение в Prettier: автоматизация форматирования кода

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

Историческая справка

Prettier был представлен в 2017 году как альтернатива линтерам с правилом auto-fix. Изначально он разрабатывался для JavaScript и TypeScript, но быстро получил поддержку для множества языков, включая HTML, CSS, JSON, YAML и Markdown. Отличительной чертой Prettier стал принцип "опинионного" форматирования: инструмент принимает минимальное количество опций, а большинство решений принимает сам, что исключает множественные споры о стиле кода в команде.

С момента своего появления Prettier стал де-факто стандартом в экосистеме Node.js и React. Его активно внедряют в CI/CD пайплайны, IDE, хуки git и даже в нестандартные редакторы вроде Vim и Emacs.

Базовые принципы работы Prettier

Детерминированность и идемпотентность

Prettier всегда форматирует один и тот же вход одинаково. Это делает его пригодным для автоматизации и гарантирует отсутствие изменений при повторном форматировании.

AST-подход

В отличие от линтеров, которые работают на уровне строк и токенов, Prettier сначала парсит код в абстрактное синтаксическое дерево (AST), затем сериализует его обратно в текст с учётом заданного формата. Благодаря этому он устойчив к незначительным синтаксическим ошибкам и не зависит от конкретных отступов или пробелов в исходнике.

Инструкция по Prettier: от установки до CI

Чтобы понять, как настроить Prettier, достаточно нескольких шагов:

Установите Prettier в проект:
```
npm install --save-dev prettier
```
Создайте файл конфигурации .prettierrc:
```
{
  "semi": false,
  "singleQuote": true,
  "printWidth": 100
}
```
Это минимальный пример, который можно расширить при необходимости.

Добавьте скрипт в package.json:

"scripts": {
  "format": "prettier --write ."
}

Интегрируйте Prettier в редактор (например, в VS Code через расширение Prettier).
Настройте автоматическое форматирование кода Prettier перед коммитом с помощью Husky и lint-staged.

Для начинающих важно запомнить: Prettier не заменяет линтер, а дополняет его. Линтер отвечает за потенциально опасные конструкции, а Prettier — за стиль.

Prettier примеры использования в реальных проектах

Рассмотрим практические сценарии.

Моно-репозитории

Как использовать Prettier для автоматического форматирования кода - иллюстрация

В проектах, использующих Yarn Workspaces или Nx, можно настроить Prettier глобально в корне репозитория и распространять конфигурацию на все пакеты. Это избавляет от необходимости дублировать конфиги.

Форматирование Markdown и YAML

Мало кто знает, что Prettier может форматировать даже документацию и конфигурационные файлы. Это особенно полезно в случаях, когда документация хранится рядом с кодом, например в README.md или .github/workflows/*.yml.

Форматирование при коммите

Интеграция Prettier с git хуками позволяет автоматически форматировать только те файлы, которые были изменены. Это достигается с помощью связки lint-staged и husky:

// .lintstagedrc
{
  "*.js": ["prettier --write"]
}

Такой подход повышает производительность команды и устраняет "мусорные" правки в pull request.

Частые заблуждения

Prettier можно заменить линтером

Это распространённая ошибка. Хотя ESLint умеет исправлять стиль, он не гарантирует детерминированность. Prettier же всегда выдаёт один и тот же результат.

Prettier мешает творчеству

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

Prettier не настраивается

Да, Prettier нарочно ограничивает количество параметров, однако он поддерживает кастомизацию через плагины. Например, можно установить prettier-plugin-tailwindcss для сортировки классов Tailwind.

Нестандартные решения и расширенные применения

Несмотря на минимализм Prettier, его можно использовать нестандартно:

1. Обфускация через перекомпоновку

Используя Prettier в сочетании с нестандартными конфигурациями и собственными парсерами, можно добиться своеобразной обфускации кода при разработке внутренних CLI-утилит. Хотя это не рекомендуется для продакшн-решений, в прототипировании это может быть полезно.

2. Применение в code review ботов

Интеграция Prettier в автоматических ботов (например, Danger.js или GitHub Actions) позволяет генерировать отчёты о несоответствии кода стилю прямо в pull request. Это снижает нагрузку на ревьюеров и экономит время.

3. Форматирование SQL и GraphQL

С помощью плагинов вроде prettier-plugin-sql и prettier-plugin-graphql можно форматировать не только JavaScript, но и запросы к базе данных, написанные прямо в коде. Это особенно актуально в проектах с использованием Prisma или Apollo.

4. Интеграция с нестандартными редакторами

Для Vim и Emacs существуют плагины, позволяющие запускать Prettier при сохранении. Это полезно для разработчиков, использующих терминальные IDE и работающих в условиях ограниченных ресурсов.

Заключение

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

Если вы только начинаете и ищете Prettier для начинающих, начните с простого: установите, настройте конфигурацию, подключите к редактору. Потом переходите к более сложным интеграциям. Инструкция по Prettier проста, но его потенциал раскрывается только при глубоком понимании.

Post Views: 68