В чем разница между prettier-eslint, eslint-plugin-prettier и eslint-config-prettier?

93

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

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

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

Что мне использовать?

Яншун Тай
источник

Ответы:

208

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

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

введите описание изображения здесь

prettier-eslint: Запускается, prettierзатем запускается eslint --fixпо коду. eslintобычно имеет автоматические исправления для правил, связанных с форматированием, и eslint --fixможет исправить конфликтующее форматирование, введенное Prettier. Вам не нужно будет запускать 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вместе.

Яншун Тай
источник
У меня есть файл eslintrc, в котором есть собственные правила. т.е. no-extra-semi, однако для запуска eslint --fix с prettier требуется точка с запятой, нужен ли мне отдельный файл правил для prettier?
jasan
2
Просто прокомментируйте общую разницу между плагинами eslint и конфигами, потому что я чувствовал, что этого мне не хватало: плагины определяют новые правила eslint, а конфиги устанавливают, должны ли (и как) применяться правила.
laugri 03
1
С eslint-config-prettier, зачем нам бегать красивее? Разве не eslint --fixформатировал бы код так же красиво?
Mateo Hrastnik
@MateoHrastnik ESLint не решает всех возможных проблем с форматированием. Обратитесь к этой теме - github.com/prettier/prettier-eslint/issues/101
Яншун Тай
10
Это 2019 год, и это все еще лучшее объяснение, которое я нахожу, намного лучше, чем официальное. Вы можете добавить, что prettier-eslint больше не рекомендуется. И последние 2 теперь могут работать вместе.
Fate Riddle