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

Рет қаралды 28,016

7 ай бұрын

Разбираемся как настроить совместное использование ESLint и Prettier для подсветки синтаксиса и форматирования кода в Visual Studio Code. Также смотрим как настроить сам редактор на автоматическое форматирование и исправление ошибок код-стайла при сохранении.
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

Пікірлер: 111

@ShoxaKardashian 7 ай бұрын

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

@Taiga_libertarian 7 ай бұрын

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

@user-xt6kb7mj2t 2 ай бұрын

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

@TheKykp 7 ай бұрын

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

@hibiride 7 ай бұрын

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

@endlessmoonlightonmonday8985 3 ай бұрын

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

@pavelpryce 6 ай бұрын

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

@user-ec1vt8kq9v 7 ай бұрын

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

@dmtrack 7 ай бұрын

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

@caH40yc 7 ай бұрын

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

@andreynee9182 4 ай бұрын

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

@Ksushapi 7 ай бұрын

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

@ValentinProtasevich 7 ай бұрын

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

@alexbr696 7 ай бұрын

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

@mishanep 7 ай бұрын

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

@vadim_romanov 7 ай бұрын

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

@vladislavgorovenko 26 күн бұрын

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

@__kawaii 3 ай бұрын

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

@BOCbMOU 11 күн бұрын

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

@user-qh2em5cb2i 3 ай бұрын

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

@user-artem-busyhin 7 ай бұрын

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

@hasannamazl7584 7 ай бұрын

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

@IgorWolf 7 ай бұрын

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

@mishanep 7 ай бұрын

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

@rustamakhmetyanov4404 7 ай бұрын

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

@Ksushapi 7 ай бұрын

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

@victormog 7 ай бұрын

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

@antonmas3451 7 ай бұрын

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

@alexandrsashin 7 ай бұрын

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

@barmaley9705 7 ай бұрын

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

@CJIu3eHb 7 ай бұрын

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

@sergsergey4251 7 ай бұрын

Спасибо!

@rustamakhmetyanov4404 7 ай бұрын

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

@sivtsev 7 ай бұрын

Класс!!!!

@govorov_top 7 ай бұрын

Спасибо!)

@sohibabduvaliyev151 2 ай бұрын

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

@alexeyfilippov42 2 күн бұрын

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

@mr_adw 7 ай бұрын

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

@yanballas3055 4 ай бұрын

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

@ProEvv 5 ай бұрын

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

@FoldyH3ro 7 ай бұрын

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

@victormog 7 ай бұрын

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

@FoldyH3ro 7 ай бұрын

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

@CJIu3eHb 7 ай бұрын

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

@404Negative Ай бұрын

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

@halynapopusk1514 3 ай бұрын

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

@mishanep 3 ай бұрын

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

@alsua1297 4 ай бұрын

спасибо

@engelknight2059 7 ай бұрын

Спасибо

@San-sd3bz 7 ай бұрын

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

@mishanep 7 ай бұрын

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

@ilyaprotsenko1023 7 ай бұрын

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

@victormog 7 ай бұрын

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

@ilyaprotsenko1023 7 ай бұрын

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

@victormog 7 ай бұрын

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

@ilyaprotsenko1023 7 ай бұрын

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

@mishanep 7 ай бұрын

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

@dmitry8994 7 ай бұрын

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

@mishanep 7 ай бұрын

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

@sharkman6434 7 ай бұрын

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

@mishanep 7 ай бұрын

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

@sharkman6434 7 ай бұрын

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

@repetonline8065 Ай бұрын

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

@mishanep Ай бұрын

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

@user-wm5xf6np4g Ай бұрын

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

@user-sv1cw9sc2h 7 ай бұрын

годно

@user-ux4le1tf3y 2 ай бұрын

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

@sno-oze 7 ай бұрын

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

@yanagaeify 7 ай бұрын

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

@mishanep 7 ай бұрын

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

@yanagaeify 6 ай бұрын

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

@alenache1 7 ай бұрын

🔥🔥🔥🔥🔥

@user-mu2lr9zc7d 7 ай бұрын

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

@mishanep 7 ай бұрын

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

@codebor 7 ай бұрын

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

@UnRealbl4 7 ай бұрын

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

@MrPandaSmith 7 ай бұрын

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

@user-rv1bx8hx4v 3 ай бұрын

👍👍

@_renamed_ 11 күн бұрын

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

@_renamed_ 11 күн бұрын

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

@mishanep 11 күн бұрын

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

@daeriofrixell199 18 күн бұрын

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

@Soap9613 7 ай бұрын

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 7 ай бұрын

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

@Soap9613 7 ай бұрын

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

@diggerdog001 6 ай бұрын

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

@NeoCoding 7 ай бұрын

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

@stilljunior1764 Ай бұрын

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

@mishanep Ай бұрын

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

@stilljunior1764 Ай бұрын

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

@404Negative Ай бұрын

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

@1311avenue_ 15 күн бұрын

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

@mishanep 15 күн бұрын

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

@1311avenue_ 15 күн бұрын

@@mishanep 8.57

@1311avenue_ 15 күн бұрын

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

@mishanep 14 күн бұрын

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

@iGotton 7 ай бұрын

@insafsuz8864 7 ай бұрын

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

@user-rv4kz3yw5t 4 ай бұрын

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

@404Negative Ай бұрын

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

@dimonisation 23 күн бұрын

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

@404Negative 23 күн бұрын

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

@alexeyfilippov42 6 ай бұрын

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

@kumb61 7 ай бұрын

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

@user-mb7kp1bl4w 7 ай бұрын

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

@kumb61 7 ай бұрын

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