Совместная работа Prettier и ESLint для качественной разработки

[@ShoxaKardashian]

О Боже! Наконец есть видео где объяснили по хронологической цепочке как правильно настраивать Prettier и ESlint. Спасибо большое!

[@TanyaVlasova-n5j]

Ааооаоао, как же стало хорошо, мучилась, мучилась, теперь все работает как мне нужно, спасибо тебе огромное!!! Спас мои нервы

[@AnnaKataeva-z9r]

9:00 вот это надо. и про контрл-запятую не знала. спасибо. формат конфига у меня почему-то не спрашивали.

[@АлМедиум]

Михаил, спасибо большое за такое подробное описание настройки форматера и линтера. И за дополнительные объяснения нюансов 🫶🏻

[@TheKykp]

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

[@BiberStroy]

БРО! ты меня спас! третий день битв за мир между притером и линтом. тонны доки и нулевой результат. Респект! Соглашусь с предыдущим комментатором на тему использования конфига эйрбнб. Было бы круто посмотреть. Лайк, подписка!

[@endlessmoonlightonmonday8985]

это просто потрясающе.я неделю никак не могла понять почему мои настройки prettier не срабатывают. это видео просто кладезь! спасибо!

[@pavelpryce]

Михаил привет, пол года назад разбирался с ESLint, не нашёл не чего полезного в рунете, пришлось идти на бурж сайты. Всё настроил, но осталось не понимание. Сегодня нужно было настроить всё заново, решил посмотрю что нового вышло, и тут твоё видео, очень подробное и понятное. Жаль его не было раньше, я бы с экономил время и нервы. Большое спасибо!

[@michaelbazhanov5286]

Очень крутой урок. Очень помогло. Спасибо)

[@basmong]

Отличное видео. Для начинающих то, что нужно 👍

[@Taiga_libertarian]

Привет, Михаил, рада новому видео. Наконец таки появилось свежее видео по линтерам ))

[@alexbr696]

Михаил, спасибо за отличный контент, но хотел бы увидеть реализацию airbnb в eslint. Как правильно настроить, какие плагины лучше добавлять. Это будет полезно особенно джуну он не будет пугаться когда в вакансии написано airbnb и будет знать хотя бы на базовом уровне что это такое.

[@mishanep]

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

[@HumoyunAhmedov-g9r]

Спасибо вам большое!!!!

[@Aleksandr-i9]

Вау, только я подумал о такой теме и Михаил уже тут как тут как всегда с классным видео )

[@caH40yc]

Отлично! Новый ролик, надо идти за чаем с плюшками ))

[@vladislavgorovenko]

Крутое видео, как всегда, спасибо. Вот подумал, что было бы еще круче, если бы вы в реальном времени показывали, где находите эту информацию, те как смотрите документацию и проч. Думаю, что этого не хватает в туториалах на ютубе.

[@andreynee9182]

Михаил, огромное спасибо!

[@__kawaii]

Мое любимое видео в интернете

[@IgorWolf]

Спасибо за видео, очень полезно! Посмотрел, полез в eslint конфиг проекта, который пилится уже давно, и обнаружил там две лишние запятые из-за которых конфиг походу вообще не работал. Код сразу заиграл красками, где желтеньким, а где и красненьким ))

[@mishanep]

У меня так тоже было на одном из первых проектов)))

[@dmtrack]

Благодарю! Круто, как всегда

[@ValentinProtasevich]

огромное спасибо, очень полезное видео!

[@vadim_romanov]

очень полезное видео , настроил prettier еще с прохождения вашего курса по react, очень удобно

[@rustamakhmetyanov4404]

Спасибо за видео, но надо было ts использовать, потому что там тоже есть нюансы))

[@Ksushapi]

да кстати, параллельно с ведио настраивала eslint для одного ts проекта, и некоторые вопросы остались

[@Ksushapi]

супер полезная вещь, спасибо!☺

[@molzie1907]

Отличное видео, всё получилось

[@hasannamazl7584]

Спасибо за видео!

[@user-artem-busyhin]

Шикарно. Спасибо.

[@cmac2cmac]

Спасибо!

[@antonmas3451]

супер! prettier и linter конфликтуют часто, особенно если зависимости ставить всякие, короче если будет продолжение этой темы, я уверен это всем зайдет на ура)!!

[@alexandrsashin]

Для решения конфликтов prettier и eslint используют eslint-config-prettier и eslint-plugin-prettier. Тут и добавить нечего.

[@victormog]

Эх, Миша, где же ты раньше был?! 😉

[@isanioka]

Бро, спасибо!

[@BOCbMOU]

Для еслинта с экшеном на сейв можно ещё настроить какие именно правила будут фикситься, чтобы не фиксить вообще всё во всём файле. В частности, очень удобно триггерить все правила, касающиеся импортов.

[@barmaley9705]

четка контент в кайф

[@CJIu3eHb]

Вообще, наверное, будет лучше настраивать не User конфиг, а конфиг для проекта (Workspace), если там какие-то особенные требования (делать папку .vscode в корне, тащить или нет в гит - решать с коллегами). Какие-то совсем общие можно и вынести в User. А то в одном проекте нужен автоформат, в другом нет, в третьем опять нужен, но только измененного кода и т.д.

[@РусланА-ф2н]

Большое спасибо за видео. Было очень полезно

[@rustamakhmetyanov4404]

На днях решил добавить больше конфигов в eslint, в итоге пол дня сидел весь код перекапывал😄

[@otakuKuch]

супер!

[@govorov_top]

Спасибо!)

[@uvy.studios]

Честно говоря никогда не понимал, зачем нужен Prettier, если линтер отлично покрывает функции форматирования. Плюс eslint куда более гибок.

[@victormog]

По определению у линтера и форматера - разные задачи. То, что разрабы всунули в ESLint *некоторые* функции форматирования, не позволит решить *все* необходимые пожелания по формату кода Большинству джунов достаточно и встроенных средств в VS Code, но в серьёзной компании могут (и должны) быть четкие, строгие и, главное, единообразные требования к форматированию.

[@uvy.studios]

@@victormog Быть может. Можете привести кейс форматирования Prettier, который eslint не покрывает? Просто я за время работы такого не встречал.

[@CJIu3eHb]

Честно говоря, тоже. Но, есть нюансы. Встречались моменты, которые eslint не осиливал. Хотя и с претиером тоже встречались, но реже. С другой стороны, в обоих случаях - это редкость, и можно на этом не заморачиваться. В претиере бесит то, что нельзя две пустых строки поставить. В гите висело предложение добавить такую возможность, но просители были посланы. В общем, если при разворачивании проекта претиер есть, то и ладно, а если нет - то обязательного порыва его устанавливать нет, разве что бывает нужда форматировать что-то отличное от js/ts - json, html, стили и прочее. Грубо говоря, не являюсь фанатом претиера. Т.е. использовать ли претиер, использовать раздельно или совместно с линтером - дело настроения или необходимости.

[@404Negative]

@@CJIu3eHb то что нельзя 2 пустых строки подряд - реально кумарит. но это прям единственное что кумарит в преттиере

[@alexeyfilippov42]

Михаил, сделайте по старому еслинту и притеру авто сортировку импортов желательно с добавлением алиасов как дополнение

[@codebor]

А нужен ли нам вообще этот Prettier, если есть Eslint? Ведь все те же правила можно задать в Eslint'е и не держать два конфига и несколько библиотек для их связки!?

[@UnRealbl4]

В новых версиях eslint хотят выпилить форматирование

[@MrPandaSmith]

Да, правила форматирования в eslint уже deprecated. Но к счастью есть их версия, которая теперь будет поддерживаться сообществом.

[@sohibabduvaliyev151]

хороший контент

[@sivtsev]

Класс!!!!

[@engelknight2059]

Спасибо

[@sharkman6434]

Спасибо за видео ! Михаил в 2023 году видеть файлы .jsx уже наверное моветон может все таки начнёте пилить на тайпскрипте?

[@mishanep]

Приветствую. У меня на канале немало видео с TypeScript. Отвечу так: универсального варианта для видео не существуют, всегда кто-то не доволен, что видео на TS, равно как и если оно на JS.

[@sharkman6434]

​@@mishanepого )) даже и не подумал о таком сценарии, Михаил огромная просьба, если будет у вас время и желание может быть снимите материал про tanstack tables, особенно интересно про виртуализацию и вложенные таблицы ) , дай бог здоровья и развития вашему шикарному каналу )

[@alenache1]

🔥🔥🔥🔥🔥

[@halynapopusk1514]

Спасибо за видео! А если на TS пишешь, то нужно что то доставлять?

[@mishanep]

Настройки eslint для typescript дополнительные потребуются.

[@mr_adw]

Спасибо за видео, интересно было бы глянуть настройку с Next, tailwind, airbnb, бо все вместе это просто танцы с бубном в руках не опытного пользователя :)

[@sno-oze]

рекомендую обратить внимание на eslint-kit, если кому-то не хочется настраивать eslint, а хочется "из коробки"

[@АдамЭкажев]

10:25 Подскажите, пожалуйста, что делать, если не появляется 3-й вариант ответа с "and enforce code style"

[@San-sd3bz]

Здравствуйте Михаил, а как добавить внешние настройки готовые, например настройка от airbnb, у которой свои правила?

[@mishanep]

Для внешних настроек ставится dev зависимость и подключается в extends линтера.

[@NursultanBegaliev]

👍👍

[@vendjin]

Привет, подскажите пожалуйста как сделать что бы каждый пропс не переносил на новую строку?

[@arseni-q7c]

годно

[@iq240-1]

awesome!

[@Soap9613]

3:39 вы показываете перенос строки при деструктуризации, но при сохранении этот перенос удаляется. у меня такая же беда при количестве свойства деструктуризации равное 4, то переноса строки нет ``` const { className, children, theme = ButtonTheme.OUTLINE, square } = props; ``` а если свойств 5=< то перенос присутствует. какое правило eslint'а + prettier отвечает за перенос строки в данном случае. в моём проекте eslint+prettier переносит строки при кол-ве свойств объекта: ``` const { className, children, theme = ButtonTheme.OUTLINE, square, size = ButtonSize.M, disabled, ...otherProps } = props; ``` копал в сторону "object-curly-newline", но это свойство переносит строку внутри фигурных скобок т.е. вот так: ``` const { a, b, c, n, m, e, w, q } = exmpl; ``` помогите, пожалуйста, разобраться с этим, потому что я бы хотел делать перенос строки при кол-ве свойств 3 и более

[@mishanep]

По идее Prettier не заморачивается по количеству деструктурируемых элементов. Там просто по длине строке идет перенос. Эта длина настраивается. Я как-то тоже ковырялся как более гибко настроить переносы, но так и не нашел, в итоге бросил это дело. Если найдете - поделитесь.

[@Soap9613]

@@mishanep благодарю) так и думал что это связано из-за длины строки) хотя очень жаль, что нет такого правила

[@ilyaprotsenko1023]

Добрый день. Скажите, пожалуйста, как часто для коммерции вы используете CRA темплейт? У нас же теперь есть Vite. Можно же развернуть темплейт с его помощью и настроить конфигурацию eslint и prettier соответственно. Заранее спасибо за ответ

[@victormog]

Для коммерции используют то, что принято в компании, а не то, что "появилось позавчера, а вчера вышла уже новая версия"...

[@ilyaprotsenko1023]

@@victormog приходилось ли стартовать с нуля коммерческие проекты? Если да, то чему отдавали преимущество: cra or vite? Я поднимал проекты на кра и на вит. На вит небольшие коммерческие проекты разрабатывал, чтобы избежать дальнейших потенциальных проблем. Большие/средние проекты в основном встречал на кра.

[@victormog]

@@ilyaprotsenko1023 ... нет такого понятия *"я"* в серьёзных коммерческих проектах... Если же ты сам себе команда, то хоть руками настраивай webpack...

[@ilyaprotsenko1023]

@@victormog верно, поэтому в последнем лексическом предложении моего предыдущего ответа нигде и не использовалось "я". Всего лишь хотел поинтересоваться конструктивным мнением по поводу тех инструментов, которым можно доверять и каким отдают предпочтение опытные разработчики. Меня интересует боевой опыт и качественное мнение. Если же у вас был опыт касательно моего вопроса, дайте знать в конструктивном формате, а отвечать, чтоб лишь бы ответить, не нужно, спасибо)

[@mishanep]

Мне на Vite пока проекты не попадались. Чаще это кастомный вебпак. Бывали случаи и с CRA, но сейчас он выглядит заброшенным и официальная дока Реакта про него уже не упоминает, предлагая сразу использовать фреймворки. В целом какой-то разнице в билдере нет, если мы говорим про форматирование и линтер. Стандартная настройка, когда мы хотим управлять правилами, будет приоритетнее дефолтных, если они шли из коробки, в том числе и во фремворке.

[@ProEvv]

Спасибо за видео ) но есть вопрос... зачем нужен prettier если я могу написать в настройках так editor.defaultFormatter: dbaeumer.vscode-eslint ? И тогда у меня не будет конфликтов двух конфигов (не нужно будет подгонять их по друг друга) Вообще я ни как не мог подружить с prettier, space-before-function-paren: [error, always] и просто забил на него...

[@kokoc58]

Спасибо за видео с полезными штуками 👍 Есть одна проблема, ни как не могу отключить длину строк, чтобы было просто форматирование текста, а где и когда переносить строки я сам хочу решать. Если убираю "printWidth", то используется значение по умолчанию, если задать какое-то значение, то там где нужно раньше перенести строку, для удобочитаемости, студия их опять склеивает.... и это какой-то ад... в обычной Visual Studio с этим нет проблем, а Code просто бесит со своими переносами.

[@mishanep]

Это prettier переносит. У VS Code по дефолту при форматировании переносы не регулируются, насколько помню. Я тоже не смог победить, а потом перестал об этом думать.

[@dmitry8994]

Добрый день. Что все таки нужно выбирать в параметре окончания строк endOfLine? При условии что работаешь в windows?

[@mishanep]

Для личного проекта разницы не будет. А при работе в команде надо выбирать lf, чтобы потом не было конфликтов с коллегами, использующими linux или macos.

[@maxim_necrasov]

Здравствуйте, подскажите пожалуйста, в jsx разметке происходит такая вещь. Есть такой код: press он берет и делает вот так press перенося каждое слово на новую строку. Я уже весь интернет облазил, разные настройки пробовал, толку ноль.

[@mishanep]

Prettier имеет настройку под названием printWidth - т.е. ширина строки. По умолчанию, это 80 символов. Если хоть на один символ больше, активируется перенос строки. Можно под себя настроить значение побольше. Полностью отключить перенос не получится. Дефолтный vs code форматтер не переносит строчки, но его настроить так гибко как не получится.

[@maxim_necrasov]

@@mishanep print Width пробовал, хоть на 1000 ставлю, все равно такое же поведение

[@maxim_necrasov]

@@mishanep причём, самое интересное: если у элемента будет только один проп, к примеру className, то все будет в одну линию, даже если этот проп будет мега длинным. Но стоит добавить какой-нибудь type = button, и все, контент сьезжает. Это либо баг какой-то, либо я просто хз

[@mishanep]

Может быть опция написана с опечаткой или еще по какой причине не работает. Но обычно дефолтной шириной люди пользуются. Я первое время тоже бился головой и искал как это запретить, а потом свыкся. Пробовал ширину длиннее делать, но легче от этого не становилось.

[@yanballas]

Михаил, подскажите пожалуйста, плагин gulp prettier не работает с автоматическом фиксом при исправлениях. Возможно что-то не хватает для работы?

[@daeriofrixell199]

блин, у меня работало форматирование eslint, всё было ок. В какой-то момент код перестал форматироваться вообще. Даже при включении дэфолтного форматтера - код не форматировался вообще никак. Ни претиром, ни линтер не подсвечивал ошибки. У кого такая шляпа случалась? Как вы чинили? Я просто пол дня убил на фик форматирования, но нихера не помогло. Завтра буду стоавить вэбштром и надеяться, что там форматирование будет адекватное, а не как в VS коде улетать. p.s. а однаждый vscode просто взял и успешно удалился с компа. Хз почему. Переустановил и работает пока ахвзах

[@_renamed_]

Проделал все по видео, после npx eslint --init не появился файл .eslintrc.js, а появился файл eslint.config.mjs и выглядит он совсем не так как файл в видео, как его настраивать?

[@_renamed_]

Помог совет с стековерфлоу yarn add eslint-config-react -D

[@mishanep]

Если у вас поставился eslint девятой версии, то там уже другой формат конфига, не как на видео. У меня недавно выходил ролик про это обновление

[@Zhenkaaf]

почему-то не форматирует html код

[@mishanep]

У html может быть другой форматтер по умолчанию. Это можно настроить

[@stilljunior1764]

почему создается файл eslint.config.mjs?

[@mishanep]

Зависит от настроек проекта. По умолчанию js файлы для ноды определяются как common js модули и расширение mjs говорит, что это es6 модуль с другим синтаксисом импортов и экспортов. Если в package.json есть настройка type: module, то расширение у файлы будет js, а для common js модулей - .cjs :) Словом, если путает, конфиг можно в формате json создать.

[@stilljunior1764]

@@mishanep, спасибо большое за ответ

[@1311avenue_]

Уже на 1:51 ничего не работает. Расширения переустанавливал, че только не делал, все равно даже ошибки не подсвечивает

[@mishanep]

Версия eslint какая?

[@1311avenue_]

@@mishanep 8.57

[@1311avenue_]

@@mishanep вроде заработало частично (хотя бы начало подсвечивать ошибки), но автофикс почему то не работает

[@mishanep]

С девятой версией изменится подход к конфигу, у меня недавно вышло видео на эту тему. Автофикс - надо разбираться. Если через терминал работает, но через редактор - нет, значит что-то с настройками IDE.

[@yanagaeify]

Спасибо за видео) У меня вопрос, возможно ты знаешь как это пофиксить. У меня стоит ESlint и prettier, а к prettier подключен плагин от tailwind на сортировку классов. Проблема в том, что мне не нравиться как работает форматирование prettier, я бы с удовольствием отключил бы его, но тогда перестанет работать плагин на сортировку классов. Есть мысли\идеи как можно оставить работу tailwind плагина, но отключить весь остальной функционал prettier?

[@mishanep]

Я не работаю с Tailwind, но в теории наверняка есть eslint правило (или плагин) который умеет фиксить подобные штуки. Либо просто плагин для IDE.

[@yanagaeify]

@@mishanep Большое спасибо за ответ) я искал как это настроить, но что-то не справился, буду еще смотреть. А есть какая-то конкретная причина почему ты не юзаешь tailwind? Интересно узнать)

[@NeoCoding]

да эт полезно, но у меня вроде все работает просто после установки только eslint & prettier без плагинов

[@repetonline8065]

Подскажи, пожалуйста, если сборщик webpack, настроенный под react+ts, то при установке eslint нужно выбрать просто ts? Или гораздо больше манипуляций надо будет?

[@mishanep]

Для TS есть свои плагины с рекомендованными настройками (@typescript-eslint/recommended), плюс парсер нужно соответствующий выбрать @typescript-eslint/parser

[@diggerdog001]

eslint-plugin-prettier не совсем рекомендуется, даже в самой доке пишется что у него достаточно недостатков. Лучше юзать просто eslint-config-prettier

[@givgiv6688]

Лайк друг

[@404Negative]

так, ну если и после этого видео тупой если нт не установится, то больше никогда не буду пытатся его настраивать (терять время в пустую)

[@Владимир-д9и7о]

Eslint решили отказаться от форматирования кода

[@iGotton]

+

[@insafsuz8864]

бедный enter твоего ноутбука

[@404Negative]

не устанавливается eslint. пишет ошибки, связанные с тем, что создатели eslint поменяли формат конфига. и теперь НИЧЕГО не работает и не устанавливается. но создатели eslint об этом почему то не подумали. и та установка что у них в документации - просто не работает и не устанавливает. уже 2й раз пытаюсь установить этот тупой eslint. потратил целый день. и установить так и не получилось. вообще не понятно как такой говнософт пользуется такой огромной популярностью

[@dimonisation]

ставь 8ю версию - npm i -D eslint@8

[@404Negative]

@@dimonisation ага, разобрался уже, спасибо. что они там в еслинт курят вообще ?? как можно было ПОЛНОСТЬЮ всё сламать ?? они там совсем в шары долбятся что-ли ?? конфиг сломали, теперь в новых версиях НИЧЕГО не работает. даже установка с их главной страницы "GET STARTED" не устанавливается. думаю скоро eslint умрёт с такими кривыми разрабами.

[@alexeyfilippov42]

хм странно только что создал новой проект на vite код в код но с предстановой ts повторил у меня не работает prettier

[@kumb61]

А зачем нужен pretter если все это и в eslint можно настроить?

[@РусланА-ф2н]

eslint не умеет в грамотные переносы текста на новую строку

[@kumb61]

@@РусланА-ф2н Примеры свойств есть, или мне на слова поверить? У меня все отлично работает с единым eslint, а pretter только добавляет конфликтов и мусора в проекте.

[@sergsergey4251]

Спасибо!

[@ИльяБондаренко-т4е]

Спасибо

[@РоманНарожнов]

Спасибо!

[@awesomexe]

спасибо

[@alsua1297]

спасибо