Как правильно настроить Prettier менее чем за 2 минуты


Мое пошаговое руководство по настройке Prettier в любом проекте и интеграции его с ESLint и Git Hooks

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

  • Как установить Prettier?

  • Куда мне поместить мою конфигурацию?

  • Нужно ли добавить новые скрипты в package.json?

  • Как интегрировать его с ESLint?

  • Как настроить Git-хуки, чтобы код всегда был правильно отформатирован?

В течение многих лет каждый раз, когда мне нужно было установить Prettier в проект, мне приходилось читать множество страниц документации, искать учебники или копаться в своих старых проектах, и это занимало у меня так много времени, что однажды я решил создать собственное «пошаговое» руководство, только для себя.

После использования и обновления моего руководства в течение 2 лет, я наконец решил поделиться им здесь, чтобы каждый мог извлечь из него пользу ✨.

N.B: Краткое описание всех команд, используемых в этом руководстве, можно найти в моем специальном репозитории GitHub, это руководство просто объясняет различные шаги.

Шаг 1: Установите Prettier

Установка Prettier может быть выполнена с помощью одной простой команды

Примечание: для каждого блока кода в этом руководстве вы можете выбрать между npm и Yarn, в зависимости от того, что вы используете в своем проекте.

# With npm
npm i -D prettier

# With Yarn
yarn add -D prettier
Войти в полноэкранный режим Выйти из полноэкранного режима

Шаг 2: Настройте параметры

Prettier установлен, теперь вы можете настроить формат, который вы хотите использовать! Конфигурация Prettier — это не что иное, как набор «опций».

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

Метод 1: Настройка собственных опций

Чтобы добавить собственные опции, создайте новый файл .prettierrc.js в корне вашего проекта и добавьте свои опции, используя следующий формат:

// .prettierrc.js
module.exports = {
  tabWidth: 4,
  singleQuote: true,
};
Войти в полноэкранный режим Выйти из полноэкранного режима

N.B: Вы можете найти список всех доступных опций здесь. Название каждой опции должно соответствовать названию из раздела «Переопределение API».

Способ 2: Используйте чужие опции

Лично я всегда использую те же опции, что и по умолчанию, плюс:

  • Одинарные кавычки вместо двойных кавычек

  • Максимальная длина строки: 120 вместо 80

  • Размер отступа: 2 пробела

  • Некоторые другие нишевые опции для файлов .vue

Если вы хотите использовать мой набор опций, это очень просто, добавьте следующую строку в ваш package.json

{
  "prettier": "@bokub/prettier-config"
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Затем установите мой конфиг:

# With npm
npm i -D @bokub/prettier-config

# With Yarn
yarn add -D @bokub/prettier-config
Войти в полноэкранный режим Выйти из полноэкранного режима

Вот и все!

Шаг 3: Запустите Prettier на существующем коде

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

Просто выполните следующую команду:

npx prettier --write .
Войти в полноэкранный режим Выйти из полноэкранного режима

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

Посмотрите следующий шаг, чтобы узнать, как это сделать 😉.

Шаг 4: Настройте хук для предварительной коммисии (необязательно)

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

Как быть уверенным, что ваш код всегда отформатирован всеми, кто работает над проектом, не замедляя рабочий процесс разработки? Используйте git hook!

Используя husky и pretty-quick, вы можете автоматически заставить каждого разработчика форматировать все измененные файлы (и ничего более) при каждом коммите.

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

# With npm
npx husky-init
npm i -D pretty-quick
npx husky set .husky/pre-commit "npx pretty-quick --staged"

# With yarn
npx husky-init
yarn add -D pretty-quick
yarn husky set .husky/pre-commit "npx pretty-quick --staged"
Войти в полноэкранный режим Выйти из полноэкранного режима

Вот и все! Теперь вы будете видеть такое сообщение каждый раз, когда что-то фиксируете:

Шаг 5: Настройка с помощью ESLint (необязательно)

Основные различия между Prettier и ESLint заключаются в следующем:

  • ESLint — это линтер: он может обнаружить ошибки в вашем коде, а также отформатировать ваш код, если вы правильно его настроите.

  • Prettier — это только форматировщик кода, для его работы не требуется конфигурация.

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

Начните с установки следующих зависимостей (я предполагаю, что у вас уже установлен ESLint 7 или выше):

# With npm
npm i -D eslint-config-prettier eslint-plugin-prettier

# With yarn
yarn add -D eslint-config-prettier eslint-plugin-prettier
Войдите в полноэкранный режим Выйти из полноэкранного режима

Затем отредактируйте файл конфигурации ESLint следующим образом:

  • Добавьте «prettier» в список «plugins».

  • Добавьте «plugin:prettier/recommended» в конец списка «extends».

  • По желанию, вы можете установить уровень ошибки на предупреждение, добавив новое правило, как показано ниже

{
  "plugins": ["prettier"],
  "extends": ["<some-config>", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "warn"
  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Заключение

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

Если вы предпочитаете, вы также можете использовать «tl;dr» версию этого руководства, которую можно найти в моем специальном репозитории GitHub.

Надеюсь, это поможет! 👍

Оцените статью
Procodings.ru
Добавить комментарий