Какая разница между prettier-eslint, eslint-plugin-prettier и eslint-config-prettier?

Я хочу использовать Prettier и ESLint вместе, но я столкнулся с некоторыми конфликтами, просто используя их один за другим. Я вижу, что есть три пакета, которые позволяют использовать их в тандеме:

  • prettier-eslint
  • eslint-plugin-prettier
  • eslint-config-prettier

Тем не менее, я не уверен, какой из них использовать, поскольку эти имена пакетов все содержат eslint и prettier.

Какой я должен использовать?

Ответы

Ответ 1

ESLint содержит много правил, и те, которые связаны с форматированием, могут конфликтовать с Prettier, например, arrow-parens, space-before-function-paren и т.д. Следовательно, их совместное использование может вызвать некоторые проблемы. Следующие инструменты были созданы для совместного использования ESLint и Prettier.

Я написал сравнение в табличном формате в виде сущности, поскольку Qaru не поддерживает форматирование таблиц. Проверьте это, если вы предпочитаете больше организации.

enter image description here

prettier-eslint: запускает prettier, затем запускает eslint --fix для кода. eslint обычно имеет автоматические исправления для форматирования связанных правил, и eslint --fix сможет исправить конфликтующее форматирование, введенное Преттиером. Вам не нужно будет запускать команду prettier отдельно.

eslint-plugin-prettier: это плагин ESLint, то есть он содержит реализацию дополнительных правил, которые ESLint будет проверять. Этот плагин использует Prettier под капотом и будет поднимать проблемы, когда ваш код отличается от ожидаемого вывода Prettier. Эти проблемы могут быть автоматически устранены с помощью --fix. С этим плагином вам не нужно запускать команду prettier отдельно, команда запускается как часть плагина. Этот плагин не отключает правила, связанные с форматированием, и вам нужно будет их отключить, если вы видите конфликты для таких правил либо вручную, либо через eslint-config-prettier.

eslint-config-prettier: это конфигурация ESLint, и она содержит конфигурации для правил (независимо от того, включены определенные правила или специальные конфигурации). Эта конфигурация позволяет вам использовать Prettier с другими конфигами ESLint, такими как eslint-config-airbnb, отключая правила форматирования, которые могут конфликтовать с Prettier. С этой конфигурацией вам не нужно использовать prettier-eslint, так как ESLint не будет жаловаться после того, как Prettier отформатирует ваш код. Однако вам нужно будет запустить команду prettier отдельно.

Надеюсь, что это суммирует различия.

Обновление: Рекомендуемая практика, позволяющая Prettier обрабатывать форматирование и ESLint для проблем неформатирования, prettier-eslint не в том же направлении, что и эта практика, поэтому prettier-eslint больше не рекомендуется. Вы можете использовать eslint-plugin-prettier и eslint-config-prettier вместе.