Установка

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

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, чтобы Prettier CLI и редакторы знали, какие файлы не нужно форматировать. Вот пример:

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

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

Ещё одна подсказка! Если ваш проект ещё не готов форматировать, скажем, файлы HTML, добавьте *.html.

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

npx prettier . --write

yarn prettier . --write

pnpm exec prettier . --write

bun prettier . --write

prettier --write . отлично подходит для форматирования всего, но для большого проекта это может занять некоторое время. Вы можете запустить prettier --write app/ для форматирования определенной директории или prettier --write app/components/Button.js для форматирования определенного файла. Или используйте шаблон prettier --write "app/**/*.test.js" для форматирования всех тестов в директории (см. 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 из вашего редактора, многие люди также предпочитают запускать Prettier как хук pre-commit. Это гарантирует, что все ваши коммиты отформатированы, не дожидаясь завершения сборки вашего CI.

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

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

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
npx 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 Hook для получения дополнительной информации.

Заключение

Итак, мы узнали, как:

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