Jaka jest różnica między ładniejszymi-eslint, eslint-plugin-ładniejszy i eslint-config-ładniejszy?

93

Chcę używać razem Prettier i ESLint, ale doświadczyłem pewnych konfliktów po prostu używając ich jeden po drugim. Widzę, że istnieją te trzy pakiety, które pozwalają na używanie ich w tandemie:

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

Jednak nie jestem pewien, którego użyć, ponieważ wszystkie te nazwy pakietów zawierają eslinti prettier.

Którego powinienem użyć?

Yangshun Tay
źródło

Odpowiedzi:

208

ESLint zawiera wiele zasad i tych, które są związane z formatowaniem konfliktu potęga z ładniejsze, takie jak arrow-parens, space-before-function-parenitp Stąd używanie ich razem będą powodować pewne problemy. Poniższe narzędzia zostały stworzone, aby używać razem ESLint i Prettier.

Napisałem porównanie w formacie tabelarycznym w skrócie, ponieważ Stack Overflow nie obsługuje formatowania tabeli. Sprawdź to, jeśli wolisz większą organizację.

wprowadź opis obrazu tutaj

prettier-eslint: Uruchamia się, prettiera następnie działa eslint --fixna kodzie. eslintzazwyczaj ma automatyczne poprawki dotyczące formatowania powiązanych reguł i eslint --fixbędzie w stanie naprawić konfliktowe formatowanie wprowadzone przez Prettier. Nie będziesz musiał uruchamiać prettierpolecenia oddzielnie.

eslint-plugin-prettier: To jest wtyczka ESLint, co oznacza, że ​​zawiera implementację dodatkowych reguł, które będzie sprawdzał ESLint. Ta wtyczka używa Prettier pod maską i spowoduje problemy, gdy twój kod różni się od oczekiwanego wyniku Prettier. Te problemy można automatycznie rozwiązać za pośrednictwem --fix. Dzięki tej wtyczce nie musisz uruchamiać prettierpolecenia osobno, polecenie jest uruchamiane jako część wtyczki. Ta wtyczka nie wyłącza reguł związanych z formatowaniem i będziesz musiał je wyłączyć, jeśli zobaczysz konflikty takich reguł ręcznie lub za pośrednictwem eslint-config-prettier.

eslint-config-prettier: To jest konfiguracja ESLint i zawiera konfiguracje dla reguł (niezależnie od tego, czy niektóre reguły są włączone, wyłączone lub specjalne konfiguracje). Ta konfiguracja umożliwia używanie Prettier z innymi konfiguracjami ESLint, na przykład eslint-config-airbnbpoprzez wyłączenie reguł związanych z formatowaniem, które mogą kolidować z Prettier. Z tą konfiguracją nie musisz jej używać, prettier-eslintponieważ ESLint nie będzie narzekać po tym, jak Prettier sformatuje twój kod. Będziesz jednak musiał uruchomić prettierpolecenie osobno.

Mam nadzieję, że to podsumowuje różnice.

Aktualizacja: Jest to zalecana praktyka, aby Prettier obsługiwał formatowanie i ESLint w przypadku problemów z formatowaniem, prettier-eslintnie jest w tym samym kierunku, co ta praktyka, dlatego prettier-eslintnie jest już zalecana. Możesz używać eslint-plugin-prettieri eslint-config-prettierrazem.

Yangshun Tay
źródło
Mam plik eslintrc, w którym mam niestandardowe reguły. tzn. no-extra-semi, ale uruchamianie eslint --fix z ładniejszym wymaga średnika, czy potrzebuję osobnego pliku reguł dla ładniejszego?
jasan
2
Tylko komentarz na temat ogólnej różnicy między wtyczkami eslint a konfiguracjami, ponieważ czułem, że tego mi brakowało: wtyczki definiują nowe reguły eslint, a konfiguracje ustawione niezależnie od tego, czy (i jak) powinny być stosowane.
laugri
1
Dzięki eslint-config-prettier, dlaczego musimy uruchomić ładniejsza? Czy nie eslint --fixsformatowałbyś kodu w taki sam sposób, jak ładniejszy?
Mateo Hrastnik
@MateoHrastnik ESLint nie obsługuje wszystkich możliwych problemów z formatowaniem. Skorzystaj z tego wątku - github.com/prettier/prettier-eslint/issues/101
Yangshun Tay
10
Jest rok 2019 i nadal jest to najlepsze wyjaśnienie, jakie znalazłem, znacznie lepsze niż oficjalne. Możesz dodać, że ładniejszy-eslint nie jest już zalecany. A te 2 ostatnie mogą teraz współpracować.
Zagadka losu