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

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

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

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

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

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

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

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

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

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

@mishanep

7 ай бұрын

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

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

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

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

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

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

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

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

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

@Ksushapi

7 ай бұрын

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

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

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

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

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

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

@mishanep

7 ай бұрын

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

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

Спасибо!

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

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

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

@alexandrsashin

7 ай бұрын

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

Спасибо!)

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

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

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

Класс!!!!

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

спасибо

Спасибо

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

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

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

@mishanep

Ай бұрын

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

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

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

@mishanep

3 ай бұрын

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

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

@victormog

7 ай бұрын

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

@FoldyH3ro

7 ай бұрын

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

@CJIu3eHb

7 ай бұрын

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

@404Negative

Ай бұрын

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

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

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

@mishanep

7 ай бұрын

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

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

@mishanep

7 ай бұрын

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

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

@victormog

7 ай бұрын

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

@ilyaprotsenko1023

7 ай бұрын

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

@victormog

7 ай бұрын

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

@ilyaprotsenko1023

7 ай бұрын

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

@mishanep

7 ай бұрын

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

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

@mishanep

7 ай бұрын

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

@yanagaeify

6 ай бұрын

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

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

@mishanep

7 ай бұрын

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

@sharkman6434

7 ай бұрын

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

👍👍

🔥🔥🔥🔥🔥

годно

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

@_renamed_

11 күн бұрын

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

@mishanep

11 күн бұрын

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

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

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

@mishanep

7 ай бұрын

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

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

@UnRealbl4

7 ай бұрын

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

@MrPandaSmith

7 ай бұрын

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

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

3:39 вы показываете перенос строки при деструктуризации, но при сохранении этот перенос удаляется. у меня такая же беда при количестве свойства деструктуризации равное 4, то переноса строки нет ``` const { className, children, theme = ButtonTheme.OUTLINE, square } = props; ``` а если свойств 5= в моём проекте 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 благодарю) так и думал что это связано из-за длины строки) хотя очень жаль, что нет такого правила

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

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

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

@mishanep

Ай бұрын

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

@stilljunior1764

Ай бұрын

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

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

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

@mishanep

14 күн бұрын

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

@1311avenue_

14 күн бұрын

@@mishanep 8.57

@1311avenue_

14 күн бұрын

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

@mishanep

13 күн бұрын

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

+

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

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

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

@dimonisation

22 күн бұрын

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

@404Negative

22 күн бұрын

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

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

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

@user-mb7kp1bl4w

7 ай бұрын

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

@kumb61

7 ай бұрын

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

Спасибо!

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

спасибо

Спасибо

Спасибо!