Совместная работа Prettier и ESLint для качественной разработки
Vložit
- čas přidán 17. 10. 2023
- Разбираемся как настроить совместное использование ESLint и Prettier для подсветки синтаксиса и форматирования кода в Visual Studio Code. Также смотрим как настроить сам редактор на автоматическое форматирование и исправление ошибок код-стайла при сохранении.
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep - Věda a technologie
О Боже! Наконец есть видео где объяснили по хронологической цепочке как правильно настраивать Prettier и ESlint. Спасибо большое!
Ааооаоао, как же стало хорошо, мучилась, мучилась, теперь все работает как мне нужно, спасибо тебе огромное!!! Спас мои нервы
Лайк заранее, пока не смотрел, но знаю точно, все что рассказывает Михаил это то, что нужно знать каждому уважающему себя разработчику.
Привет, Михаил, рада новому видео. Наконец таки появилось свежее видео по линтерам ))
БРО! ты меня спас! третий день битв за мир между притером и линтом. тонны доки и нулевой результат. Респект! Соглашусь с предыдущим комментатором на тему использования конфига эйрбнб. Было бы круто посмотреть. Лайк, подписка!
это просто потрясающе.я неделю никак не могла понять почему мои настройки prettier не срабатывают. это видео просто кладезь! спасибо!
Михаил привет, пол года назад разбирался с ESLint, не нашёл не чего полезного в рунете, пришлось идти на бурж сайты. Всё настроил, но осталось не понимание. Сегодня нужно было настроить всё заново, решил посмотрю что нового вышло, и тут твоё видео, очень подробное и понятное. Жаль его не было раньше, я бы с экономил время и нервы. Большое спасибо!
Вау, только я подумал о такой теме и Михаил уже тут как тут как всегда с классным видео )
Отлично! Новый ролик, надо идти за чаем с плюшками ))
Крутое видео, как всегда, спасибо. Вот подумал, что было бы еще круче, если бы вы в реальном времени показывали, где находите эту информацию, те как смотрите документацию и проч. Думаю, что этого не хватает в туториалах на ютубе.
Благодарю! Круто, как всегда
Михаил, спасибо за отличный контент, но хотел бы увидеть реализацию airbnb в eslint. Как правильно настроить, какие плагины лучше добавлять. Это будет полезно особенно джуну он не будет пугаться когда в вакансии написано airbnb и будет знать хотя бы на базовом уровне что это такое.
У меня есть видео по eslint, там что-то было про подключение внешних конфигов, если не ошибаюсь. Но чтобы не пугаться чужих стайл гайдов, их нужно сидеть и изучать. У них есть документации с тем как по их мнению правильно.
Михаил, огромное спасибо!
очень полезное видео , настроил prettier еще с прохождения вашего курса по react, очень удобно
огромное спасибо, очень полезное видео!
супер полезная вещь, спасибо!☺
Спасибо вам большое!!!!
Мое любимое видео в интернете
Для еслинта с экшеном на сейв можно ещё настроить какие именно правила будут фикситься, чтобы не фиксить вообще всё во всём файле.
В частности, очень удобно триггерить все правила, касающиеся импортов.
Шикарно. Спасибо.
Спасибо за видео, но надо было ts использовать, потому что там тоже есть нюансы))
да кстати, параллельно с ведио настраивала eslint для одного ts проекта, и некоторые вопросы остались
Спасибо за видео!
Спасибо за видео, очень полезно! Посмотрел, полез в eslint конфиг проекта, который пилится уже давно, и обнаружил там две лишние запятые из-за которых конфиг походу вообще не работал. Код сразу заиграл красками, где желтеньким, а где и красненьким ))
У меня так тоже было на одном из первых проектов)))
Эх, Миша, где же ты раньше был?!
😉
Спасибо!
четка контент в кайф
супер! prettier и linter конфликтуют часто, особенно если зависимости ставить всякие, короче если будет продолжение этой темы, я уверен это всем зайдет на ура)!!
Для решения конфликтов prettier и eslint используют eslint-config-prettier и eslint-plugin-prettier. Тут и добавить нечего.
Спасибо!)
Вообще, наверное, будет лучше настраивать не User конфиг, а конфиг для проекта (Workspace), если там какие-то особенные требования (делать папку .vscode в корне, тащить или нет в гит - решать с коллегами). Какие-то совсем общие можно и вынести в User. А то в одном проекте нужен автоформат, в другом нет, в третьем опять нужен, но только измененного кода и т.д.
Класс!!!!
На днях решил добавить больше конфигов в eslint, в итоге пол дня сидел весь код перекапывал😄
хороший контент
Михаил, сделайте по старому еслинту и притеру авто сортировку импортов желательно с добавлением алиасов как дополнение
спасибо
Спасибо
Спасибо за видео, интересно было бы глянуть настройку с Next, tailwind, airbnb, бо все вместе это просто танцы с бубном в руках не опытного пользователя :)
🔥🔥🔥🔥🔥
годно
👍👍
Михаил, подскажите пожалуйста, плагин gulp prettier не работает с автоматическом фиксом при исправлениях. Возможно что-то не хватает для работы?
Спасибо за видео! А если на TS пишешь, то нужно что то доставлять?
Настройки eslint для typescript дополнительные потребуются.
Честно говоря никогда не понимал, зачем нужен Prettier, если линтер отлично покрывает функции форматирования. Плюс eslint куда более гибок.
По определению у линтера и форматера - разные задачи.
То, что разрабы всунули в ESLint *некоторые* функции форматирования, не позволит решить *все* необходимые пожелания по формату кода
Большинству джунов достаточно и встроенных средств в VS Code, но в серьёзной компании могут (и должны) быть четкие, строгие и, главное, единообразные требования к форматированию.
@@victormog Быть может. Можете привести кейс форматирования Prettier, который eslint не покрывает? Просто я за время работы такого не встречал.
Честно говоря, тоже. Но, есть нюансы. Встречались моменты, которые eslint не осиливал. Хотя и с претиером тоже встречались, но реже. С другой стороны, в обоих случаях - это редкость, и можно на этом не заморачиваться. В претиере бесит то, что нельзя две пустых строки поставить. В гите висело предложение добавить такую возможность, но просители были посланы. В общем, если при разворачивании проекта претиер есть, то и ладно, а если нет - то обязательного порыва его устанавливать нет, разве что бывает нужда форматировать что-то отличное от js/ts - json, html, стили и прочее. Грубо говоря, не являюсь фанатом претиера. Т.е. использовать ли претиер, использовать раздельно или совместно с линтером - дело настроения или необходимости.
@@CJIu3eHb то что нельзя 2 пустых строки подряд - реально кумарит. но это прям единственное что кумарит в преттиере
Спасибо за видео ) но есть вопрос... зачем нужен prettier если я могу написать в настройках так editor.defaultFormatter: dbaeumer.vscode-eslint ?
И тогда у меня не будет конфликтов двух конфигов (не нужно будет подгонять их по друг друга)
Вообще я ни как не мог подружить с prettier, space-before-function-paren: [error, always] и просто забил на него...
рекомендую обратить внимание на eslint-kit, если кому-то не хочется настраивать eslint, а хочется "из коробки"
Спасибо за видео ! Михаил в 2023 году видеть файлы .jsx уже наверное моветон может все таки начнёте пилить на тайпскрипте?
Приветствую. У меня на канале немало видео с TypeScript.
Отвечу так: универсального варианта для видео не существуют, всегда кто-то не доволен, что видео на TS, равно как и если оно на JS.
@@mishanepого )) даже и не подумал о таком сценарии, Михаил огромная просьба, если будет у вас время и желание может быть снимите материал про tanstack tables, особенно интересно про виртуализацию и вложенные таблицы ) , дай бог здоровья и развития вашему шикарному каналу )
Добрый день. Что все таки нужно выбирать в параметре окончания строк endOfLine? При условии что работаешь в windows?
Для личного проекта разницы не будет. А при работе в команде надо выбирать lf, чтобы потом не было конфликтов с коллегами, использующими linux или macos.
Подскажи, пожалуйста, если сборщик webpack, настроенный под react+ts, то при установке eslint нужно выбрать просто ts? Или гораздо больше манипуляций надо будет?
Для TS есть свои плагины с рекомендованными настройками (@typescript-eslint/recommended), плюс парсер нужно соответствующий выбрать @typescript-eslint/parser
Добрый день. Скажите, пожалуйста, как часто для коммерции вы используете CRA темплейт? У нас же теперь есть Vite. Можно же развернуть темплейт с его помощью и настроить конфигурацию eslint и prettier соответственно. Заранее спасибо за ответ
Для коммерции используют то, что принято в компании, а не то, что "появилось позавчера, а вчера вышла уже новая версия"...
@@victormog приходилось ли стартовать с нуля коммерческие проекты? Если да, то чему отдавали преимущество: cra or vite? Я поднимал проекты на кра и на вит. На вит небольшие коммерческие проекты разрабатывал, чтобы избежать дальнейших потенциальных проблем. Большие/средние проекты в основном встречал на кра.
@@ilyaprotsenko1023 ... нет такого понятия *"я"* в серьёзных коммерческих проектах... Если же ты сам себе команда, то хоть руками настраивай webpack...
@@victormog верно, поэтому в последнем лексическом предложении моего предыдущего ответа нигде и не использовалось "я". Всего лишь хотел поинтересоваться конструктивным мнением по поводу тех инструментов, которым можно доверять и каким отдают предпочтение опытные разработчики.
Меня интересует боевой опыт и качественное мнение. Если же у вас был опыт касательно моего вопроса, дайте знать в конструктивном формате, а отвечать, чтоб лишь бы ответить, не нужно, спасибо)
Мне на Vite пока проекты не попадались. Чаще это кастомный вебпак. Бывали случаи и с CRA, но сейчас он выглядит заброшенным и официальная дока Реакта про него уже не упоминает, предлагая сразу использовать фреймворки. В целом какой-то разнице в билдере нет, если мы говорим про форматирование и линтер. Стандартная настройка, когда мы хотим управлять правилами, будет приоритетнее дефолтных, если они шли из коробки, в том числе и во фремворке.
Здравствуйте Михаил, а как добавить внешние настройки готовые, например настройка от airbnb, у которой свои правила?
Для внешних настроек ставится dev зависимость и подключается в extends линтера.
Привет, подскажите пожалуйста как сделать что бы каждый пропс не переносил на новую строку?
10:25 Подскажите, пожалуйста, что делать, если не появляется 3-й вариант ответа с "and enforce code style"
Спасибо за видео) У меня вопрос, возможно ты знаешь как это пофиксить. У меня стоит ESlint и prettier, а к prettier подключен плагин от tailwind на сортировку классов. Проблема в том, что мне не нравиться как работает форматирование prettier, я бы с удовольствием отключил бы его, но тогда перестанет работать плагин на сортировку классов. Есть мысли\идеи как можно оставить работу tailwind плагина, но отключить весь остальной функционал prettier?
Я не работаю с Tailwind, но в теории наверняка есть eslint правило (или плагин) который умеет фиксить подобные штуки. Либо просто плагин для IDE.
@@mishanep Большое спасибо за ответ) я искал как это настроить, но что-то не справился, буду еще смотреть. А есть какая-то конкретная причина почему ты не юзаешь tailwind? Интересно узнать)
Спасибо за видео с полезными штуками 👍 Есть одна проблема, ни как не могу отключить длину строк, чтобы было просто форматирование текста, а где и когда переносить строки я сам хочу решать. Если убираю "printWidth", то используется значение по умолчанию, если задать какое-то значение, то там где нужно раньше перенести строку, для удобочитаемости, студия их опять склеивает.... и это какой-то ад... в обычной Visual Studio с этим нет проблем, а Code просто бесит со своими переносами.
Это prettier переносит. У VS Code по дефолту при форматировании переносы не регулируются, насколько помню. Я тоже не смог победить, а потом перестал об этом думать.
А нужен ли нам вообще этот Prettier, если есть Eslint? Ведь все те же правила можно задать в Eslint'е и не держать два конфига и несколько библиотек для их связки!?
В новых версиях eslint хотят выпилить форматирование
Да, правила форматирования в eslint уже deprecated. Но к счастью есть их версия, которая теперь будет поддерживаться сообществом.
блин, у меня работало форматирование eslint, всё было ок. В какой-то момент код перестал форматироваться вообще. Даже при включении дэфолтного форматтера - код не форматировался вообще никак. Ни претиром, ни линтер не подсвечивал ошибки.
У кого такая шляпа случалась? Как вы чинили? Я просто пол дня убил на фик форматирования, но нихера не помогло.
Завтра буду стоавить вэбштром и надеяться, что там форматирование будет адекватное, а не как в VS коде улетать.
p.s.
а однаждый vscode просто взял и успешно удалился с компа. Хз почему. Переустановил и работает пока ахвзах
Проделал все по видео, после npx eslint --init не появился файл .eslintrc.js, а появился файл eslint.config.mjs и выглядит он совсем не так как файл в видео, как его настраивать?
Помог совет с стековерфлоу yarn add eslint-config-react -D
Если у вас поставился eslint девятой версии, то там уже другой формат конфига, не как на видео. У меня недавно выходил ролик про это обновление
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 и более
По идее Prettier не заморачивается по количеству деструктурируемых элементов. Там просто по длине строке идет перенос. Эта длина настраивается. Я как-то тоже ковырялся как более гибко настроить переносы, но так и не нашел, в итоге бросил это дело. Если найдете - поделитесь.
@@mishanep благодарю) так и думал что это связано из-за длины строки) хотя очень жаль, что нет такого правила
да эт полезно, но у меня вроде все работает просто после установки только eslint & prettier без плагинов
eslint-plugin-prettier не совсем рекомендуется, даже в самой доке пишется что у него достаточно недостатков. Лучше юзать просто eslint-config-prettier
+
почему создается файл eslint.config.mjs?
Зависит от настроек проекта. По умолчанию js файлы для ноды определяются как common js модули и расширение mjs говорит, что это es6 модуль с другим синтаксисом импортов и экспортов. Если в package.json есть настройка type: module, то расширение у файлы будет js, а для common js модулей - .cjs :)
Словом, если путает, конфиг можно в формате json создать.
@@mishanep, спасибо большое за ответ
так, ну если и после этого видео тупой если нт не установится, то больше никогда не буду пытатся его настраивать (терять время в пустую)
Уже на 1:51 ничего не работает. Расширения переустанавливал, че только не делал, все равно даже ошибки не подсвечивает
Версия eslint какая?
@@mishanep 8.57
@@mishanep вроде заработало частично (хотя бы начало подсвечивать ошибки), но автофикс почему то не работает
С девятой версией изменится подход к конфигу, у меня недавно вышло видео на эту тему. Автофикс - надо разбираться. Если через терминал работает, но через редактор - нет, значит что-то с настройками IDE.
бедный enter твоего ноутбука
Eslint решили отказаться от форматирования кода
не устанавливается eslint. пишет ошибки, связанные с тем, что создатели eslint поменяли формат конфига. и теперь НИЧЕГО не работает и не устанавливается. но создатели eslint об этом почему то не подумали. и та установка что у них в документации - просто не работает и не устанавливает. уже 2й раз пытаюсь установить этот тупой eslint. потратил целый день. и установить так и не получилось. вообще не понятно как такой говнософт пользуется такой огромной популярностью
ставь 8ю версию - npm i -D eslint@8
@@dimonisation ага, разобрался уже, спасибо. что они там в еслинт курят вообще ?? как можно было ПОЛНОСТЬЮ всё сламать ?? они там совсем в шары долбятся что-ли ?? конфиг сломали, теперь в новых версиях НИЧЕГО не работает. даже установка с их главной страницы "GET STARTED" не устанавливается. думаю скоро eslint умрёт с такими кривыми разрабами.
хм странно только что создал новой проект на vite код в код но с предстановой ts повторил у меня не работает prettier
А зачем нужен pretter если все это и в eslint можно настроить?
eslint не умеет в грамотные переносы текста на новую строку
@@user-mb7kp1bl4w Примеры свойств есть, или мне на слова поверить?
У меня все отлично работает с единым eslint, а pretter только добавляет конфликтов и мусора в проекте.
Большое спасибо за видео. Было очень полезно
Спасибо!
Спасибо
спасибо
Спасибо!