Установка

Сначала установите Prettier локально:

• npm
• yarn
• pnpm
• bun

npm install --save-dev --save-exact prettier

yarn add --dev --exact prettier

pnpm add --save-dev --save-exact prettier

bun add --dev --exact prettier

Затем создайте пустой файл конфигурации, чтобы редакторы и другие инструменты знали, что вы используете Prettier:

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

Далее создайте файл .prettierignore, чтобы CLI Prettier и редакторы знали, какие файлы не нужно форматировать. Вот пример:

node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"

Prettier будет следовать правилам, указанным в .gitignore, если этот файл находится в той же директории, из которой запускается Prettier. Можно также взять за основу для .prettierignore файл .eslintignore (если он у вас есть).

Если ваш проект пока не готов к форматированию, например, HTML-файлов, добавьте *.html.

Теперь отформатируйте все файлы с помощью Prettier:

• npm
• yarn
• pnpm
• bun

npx prettier . --write

yarn exec prettier . --write

pnpm exec prettier . --write

bunx prettier . --write

prettier --write . отлично подходит для форматирования всего проекта, но в большом проекте это может занять некоторое время. Можно запустить prettier --write app/, чтобы отформатировать определённую директорию, или prettier --write app/components/Button.js, чтобы отформатировать определённый файл. Или используйте glob-шаблон, например prettier --write "app/**/*.test.js", чтобы отформатировать все тесты в директории (поддерживаемый синтаксис glob см. в документации fast-glob).

Если вы используете CI, выполните в его рамках следующую команду, чтобы убедиться, что все запускают Prettier. Это поможет избежать конфликтов слияния и других проблем при совместной работе!

npx prettier . --check

--check похож на --write, но только проверяет, отформатированы ли файлы, вместо того чтобы перезаписывать их. prettier --write и prettier --check — самые распространённые способы запуска Prettier.

Настройка редактора

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

Инструкции по настройке редактора см. в разделе Интеграция с редакторами. Если ваш редактор не поддерживает Prettier, можно вместо этого запускать Prettier с помощью наблюдателя за файлами.

Не пропускайте обычную локальную установку! Плагины редактора обнаружат локальную версию Prettier и гарантируют, что в каждом проекте будет использоваться правильная версия. (Вы ведь не хотите, чтобы редактор случайно внёс множество изменений, используя более новую версию Prettier, чем та, что применяется в проекте!)

Кроме того, возможность запускать Prettier из командной строки по-прежнему служит хорошим запасным вариантом и необходима для настройки CI.

ESLint и другие линтеры

Если вы используете ESLint, установите eslint-config-prettier, чтобы ESLint и Prettier хорошо работали вместе. Он отключает все правила ESLint, которые избыточны или могут конфликтовать с Prettier. Аналогичная конфигурация для Stylelint называется stylelint-config-prettier.

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

Git-хуки

Помимо запуска Prettier из командной строки (prettier --write), проверки форматирования в CI и запуска Prettier из редактора, многие предпочитают также запускать его в качестве pre-commit-хука. Это позволяет форматировать все коммиты, не дожидаясь завершения сборки CI.

Например, можно выполнить следующие действия, чтобы Prettier запускался перед каждым коммитом:

1. Установите husky и lint-staged:

• npm
• yarn
• pnpm
• bun

npm install --save-dev husky lint-staged
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','npx lint-staged\n')"

yarn add --dev husky lint-staged
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','yarn lint-staged\n')"

pnpm add --save-dev husky lint-staged
pnpm exec husky init
node --eval "fs.writeFileSync('.husky/pre-commit','pnpm exec lint-staged\n')"

bun add --dev husky lint-staged
bunx husky init
bun --eval "fs.writeFileSync('.husky/pre-commit','bunx lint-staged\n')"

2. Добавьте следующее в ваш package.json:

{
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}

Если вы используете ESLint, убедитесь, что lint-staged запускает его до Prettier, а не после.

Подробнее см. в разделе Pre-commit-хук.

Итоги

Подведём итог: мы узнали, как:

• Установить точную версию Prettier локально в проекте. Это гарантирует, что все участники проекта будут использовать одну и ту же версию Prettier. Даже выпуск исправлений может привести к небольшим различиям в форматировании, поэтому нежелательно, чтобы разные участники команды использовали разные версии и по очереди форматировали изменения друг друга.
• Добавить .prettierrc, чтобы сообщить редактору, что вы используете Prettier.
• Добавить .prettierignore, чтобы сообщить редактору, какие файлы не нужно трогать, а также иметь возможность запускать prettier --write . для форматирования всего проекта (не изменяя нежелательные файлы и не пытаясь обработать сгенерированные файлы).
• Запускать prettier --check . в CI, чтобы форматирование проекта оставалось единообразным.
• Запускать Prettier из редактора для наилучшего результата.
• Использовать eslint-config-prettier, чтобы Prettier и ESLint хорошо работали вместе.
• Настроить pre-commit-хук, чтобы форматировать каждый коммит.