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

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ć?

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ę.

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.