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

Это возможно, если настроить Prettier для запуска с помощью хука git pre-commit! Каждый должен использовать git в вашем проекте, что делает его идеальным местом для реализации чего-то вроде средства форматирования кода.

Когда я реализовал это в первый раз, я столкнулся с некоторыми проблемами, поэтому я хотел написать этот пост, чтобы помочь мне вспомнить, как я буду настраивать красивее в будущем!

Настройка красивее

  • Первое, что вам нужно сделать, это установить Prettier. Эта страница в документации Prettier покажет вам, как именно вы должны это сделать и какие файлы вы должны создать: Установить
  • У вас установлен Prettier, поэтому пришло время создать правила, которые вы хотели бы использовать для своего кода. Вот пример, который я бы использовал для проекта React/Gatsby:
// .prettierrc.json
{
"printWidth": 100,
"singleQuote": true,
"tabWidth": 2,
"semi": true,
"trailingComma": "es5"
}
  • Вы еще не готовы запустить Prettier. Нам все еще нужно создать файл игнорирования, чтобы убедиться, что Prettier не работает со встроенным кодом или кодом, который не является нашим исходным кодом. Вы можете сделать это, создав файл .prettierignore. Этот формат точно такой же, как файл .gitignore. Например, если бы вы использовали это на сайте Gatsby, у вас был бы файл игнорирования, который выглядел бы так:
// .prettierignore
.cache
public
  • Теперь вы лучше настроили, пришло время отформатировать весь ваш код. В корне каталога вашего проекта выполните следующую команду:
npx prettier --write .

Если вы никогда не использовали npx, это то, что поставляется с npm, поэтому установка не требуется. Вы увидите, что все ваши файлы были переписаны с использованием вашей конфигурации Prettier.

Это здорово, но мы хотим, чтобы это происходило автоматически, независимо от выбора редактора кода. Это подводит нас к следующему разделу об использовании хука Pre-Commit!

Config Pre-Commit Hook для Prettier

Первое, что вам нужно сделать, это перейти в каталог git hooks вашего репозитория.

// assuming you're in the root of your project
cd .git/hooks && open .

Это откроет ваш каталог хуков, где вы увидите кучу примеров хуков, которые вы могли бы использовать, все с расширением файла .sample. Если вы удалите .sample, git попытается запустить их в течение своего жизненного цикла.

Чтобы создать наш хук, давайте создадим новый файл с именем «pre-commit». Вы можете сделать это, используя открытый каталог или в командной строке следующим образом:

// assuming you're in your projects .git/hooks directory
touch pre-commit

Скопируйте в этот файл следующее:

#!/bin/sh
FILES=$(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g')
[ -z "$FILES" ] && exit 0
# Prettify all selected files
echo "$FILES" | xargs ./node_modules/.bin/prettier --ignore-unknown --write
# Add back the modified/prettified files to staging
echo "$FILES" | xargs git add
exit 0

Копировать напрямую отсюда не лучшая идея, но вы можете найти это именно на сайте Prettier doc здесь.

Теперь, когда у вас есть этот файл, вы должны иметь возможность автоматически форматировать свой код каждый раз, когда делаете коммит. Это было бы правдой, но вам нужно сообщить своей машине, что ей разрешено выполнять скрипт, который мы добавили в каталог ловушек.

Чтобы сделать исполняемый файл, вам нужно выполнить следующую команду:

// assuming you're still in your .git/hooks directory
chmod u+x pre-commit

Это позволит вашему коду выполнять этот файл, поэтому у вас будет более красивый код каждый раз, когда вы совершаете коммит!