Разрешаване на битката на ESLint и Prettier за надмощие.

Случвало ли ви се е да имате някакъв досаден проблем във вашия редактор, при който вашите мъхчета просто внезапно спират и трябва да рестартирате текстовия редактор, за да започне да работи отново? Със сигурност съм имал този проблем във VSCode няколко пъти, по-късно реших, че това е сблъсък между ESLint и Prettier за това кой ще форматира моя код.

Не е изненадващо, че не съм сам, попаднах на туит от приятел Auwal, излъчващ раздразнението си от абсолютно същото нещо. 👇🏿

Тази публикация е, за да ви покажа как се справям с този проблем. Виждал съм и някои други „други“ страхотни начини да направя това.

Ако сте объркани тук:
* ESLint се грижи за качеството на кода и форматирането на кода. Има правила, които улавят грешки и налагат най-добрите практики. За да се впуснете по-задълбочено в предимствата, вижте тази публикация.
* Prettierе програма за форматиране на код, щракнете върху запазване и бум, вашият код е форматиран както искате. Мисля, че това „видео“ го обяснява в дълбочина.

Бърз пример, може да имате функция като тази 👇🏿

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne(), noWayYouGottaBeKiddingMe());

… и веднага след това щракнете върху запазване, можете да форматирате добре кода си в нещо подобно 👇🏿

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne(),
  noWayYouGottaBeKiddingMe()
);

Като разгледаме кратките ми дефиниции, можем да забележим проблем, както ESLint, така и Prettier се справят с форматиране на код. Работата е там, че Prettier го прави много по-добре, докато ESLint се занимава с качеството на кода и моделите, за които prettier не се интересува. Тъй като и двамата могат да форматират код, понякога могат да имат конфликтни стилове и след това да се сблъскат.

Нашата цел тук е да ги настроим по начин, по който Prettier ще се справи с форматирането на кода, а ESLint ще се справи с качеството на кода.

В моята настройка нямам инсталиран prettier като плъгин за редактор (използвам VSCode), но имам инсталиран ESLint в моя редактор. Така че можете да продължите и да премахнете и Prettier от вашия.

Инсталирайте ESLint

Ако вече нямате инсталиран ESLint, можете да инсталирате ESLint глобално или локално във вашия проект. За да научите как да инсталирате ESLint, посетете docs.

След като сте настроили целия ESLint, ще трябва да добавите Prettier като правило на ESLint с помощта на eslint-plugin-prettier.

yarn add --dev eslint-plugin-prettier

във вашия .eslintrc.json файл добавете Prettier като плъгин и добавете prettier към обекта на вашите правила, можете да добавите своите по-красиви правила в полето „по-красиво/по-красиво“, както е показано по-долу в редове от 7 до 9. Можете да видите пълен списък с По-красиви опции тук

Изключете правилата за форматиране на ESLint

Трябва да сме сигурни, че изключваме правилата за форматиране за ESLint и разчитаме на Prettier за проблеми, свързани с форматирането, докато оставяме ESLint да обработва неща, свързани с качеството на кода.

Така че да деактивирате противоречивите правила, като същевременно запазите други правила, за които Prettier не се интересува. Ще добавим eslint-config-prettier като зависимост от разработчици.

yarn add --dev eslint-config-prettier

след това в нашия файл .eslintrc.json добавете

{   
  extends: ['plugin:prettier/recommended'] 
}

Сега всичко трябва да работи добре.

Чувствайте се свободни да харесате и споделите тази публикация, ако ви е била полезна, коментирайте всякакви въпроси, предложения или корекции в секцията за коментари по-долу.