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

Содержание

1. Мое пошаговое руководство по настройке Prettier в любом проекте и интеграции его с ESLint и Git Hooks
2. Шаг 1: Установите Prettier
3. Шаг 2: Настройте параметры
4. Метод 1: Настройка собственных опций
5. Способ 2: Используйте чужие опции
6. Шаг 3: Запустите Prettier на существующем коде
7. Шаг 4: Настройте хук для предварительной коммисии (необязательно)
8. Шаг 5: Настройка с помощью ESLint (необязательно)
9. Заключение

Мое пошаговое руководство по настройке 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.

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