Решение битвы 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 имел дело с форматированием кода, а ESLint - с качеством кода.

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

Установить ESLint

Если у вас еще не установлен ESLint, вы можете установить ESLint глобально или локально в своем проекте. Чтобы узнать, как установить ESLint, посетите документацию.

После того, как вы настроили ESLint, вам нужно будет добавить Prettier в качестве правила ESLint, используя eslint-plugin-prettier.

yarn add --dev eslint-plugin-prettier

в вашем файле .eslintrc.json добавьте Prettier в качестве плагина и добавьте красивее в свой объект правил, вы можете добавить свои более красивые правила в поле красивее / красивее, как показано ниже в строках с 7 по 9. Вы можете увидеть полный список Более красивые варианты здесь

Отключить правила форматирования ESLint

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

Чтобы отключить конфликтующие правила, соблюдая другие правила, которые Prettier не заботятся. Мы добавим eslint-config-prettier в качестве зависимости разработчика.

yarn add --dev eslint-config-prettier

затем в нашем файле .eslintrc.json добавьте

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

Теперь все должно быть в порядке.

Не стесняйтесь ставить лайк и делиться этим постом, если он был полезен для вас, комментируйте любые вопросы, предложения или исправления в разделе комментариев ниже.