Новый конфиг для Eslint 9

Eslint поменял подход к созданию конфига и его особенностям его настройки. Разбираемся как перейти на новую мажорную версию для проектов на JavaScript и TypeScript.
Пример конфига для React+TypeScript приложения github.com/michey85/react-sta...
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

[@sno-oze]

Интересно, чем же разработчики eslint'а руководствовались, когда выпускали мажорный релиз. По мне так, конфигурировать стало существенно сложнее. В любом случае, видео годное и нужное.

[@outcast-cr5yy]

Михаил, ваш ютюб канал это настоящий помощник для молодых специалистов. Спасибо вам большое

[@vladpyrkov4803]

Спасибо большое за видео! Сам недавно пробовал настраивать новый конфиг, но там сложно разобраться, пока остальные плагины не все поддержку завезли. В итоге оставил старый конфиг пока. Но теперь буду пробовать снова

[@egoreast]

Та же тема

[@vasiliisisilii]

Спасибо за полезное видео ❤

[@vladhonchenko2886]

Спасибо большое 🎉

[@deemon63]

Разработчики еслинт испытывают терпение js сообщества, может плохо для них закончиться

[@williamthorn223]

Еще biomejs появился, линтер с форматером под капотом, интересная штука. Пока выглядит как достойная альтернатива с меньшей вознёй с конфигами.

[@mishanep]

Да, видел. Выглядит интересно. Но потребуется время, прежде чем проекты мигрируют

[@axel-sheen]

Михаил, ты так и не сказал какие преимущества у этой версии (или я прослушал)! Ради чего все эти мучения с новым конфигом? Однако спасибо за видео, очень познавательно!

[@user-os5jq3wm9w]

О, привет! Я тебя знаю :)

[@yanballas3055]

спасибо Михаил, как раз на проект опять настраиваю сборку и не могу понять, почему старый конфиг не работает(

[@mashush9197]

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

[@io0312]

А можете подсказать, как использовать конфиги mjs и их синтаксис, а также как убрать ошибку от плагина vscode "eslint" ведь сам плагин поддерживает

[@user-je8vr1rz9s]

When searching for both Prettier and your linter on the Internet you’ll probably find more related projects. These are generally not recommended, but can be useful in certain circumstances. First, we have plugins that let you run Prettier as if it was a linter rule: eslint-plugin-prettier stylelint-prettier These plugins were especially useful when Prettier was new. By running Prettier inside your linters, you didn’t have to set up any new infrastructure and you could re-use your editor integrations for the linters. But these days you can run prettier --check . and most editors have Prettier support.

[@mishanep]

Hi. Do you mean we don't need to use any eslint plugins for Prettier?

[@user-je8vr1rz9s]

The official prettier documentation says that it is recommended to use only eslint-config-prettier. You can read more details in the section Integrating with Linters

[@maxfray7711]

Классные руки у вебки))) 4:51

[@jewkuza]

нужны ли какие то апдейты в вебпак конфиге при использовании новой версии eslint'a?

[@mishanep]

По логике линтер не связан со сборкой, поэтому вебпак настраивать не требуется. Но в зависимости от проекта всякие фокусы возможны :)

[@jewkuza]

@@mishanep немного неправильно сформулировал вопрос - конкретно :нужно ли добавлять какие то дополнительные конфигурации/ возможно изменился синтаксис при использовании eslint webpack плагина в рамках вебпак конфига? Я пытаюсь связать свою проблему с потенциально возможным источником 😀 Конечно я проверял доку плагина - как будто никаких изменений . Но возможно нужен какой то костыль чтобы завести это всё дело 😀

[@olgamatosova158]

настраиваю линт к реакту на typescript, не могу убрать (задизейблить) ошибку 'React' must be in scope when using JSX react/react-in-jsx-scope, как в новом линте ее можно победить?

[@mishanep]

Если вам надо переопределить поведение какого-то правила, то делается также как и раньше. Разница может быть в названии скоупа, если в плагинах вы задали своё имя.

[@pavelmelnik9952]

осталось мне не ясным: - есть у меня какой-то плагин, например eslint-plugin-import. делаю import pluginImport from "eslint-plugin-import/config/react.js"; но там в папке config, есть файлы react.js, recommended.js, typescript.js - какой брать? у меня реакт, тайпскрипт. у каждого плагина буквально разная структура папок в пакетах и разные названия файлов. не ясно что откуда тянуть, что бы всё потом работало так как и на 8мой версии? - pluginJs точно нужен при использовании ts? - какие пакеты точно можно удалить, и они были нужны в 8, но уже не используются в 9той - не ясно как теперь указывать import/resolver - не ясно зачем мы указав какой-то плагин в обьекте с плагинами, например plugins: { pluginPrettier }, потом ниже отдельным обьеком ставим его как pluginPrettier.configs.recommended update. отвечаю на свой первый вопрос - посмотрел в старый конфиг, все плагины были вида 'plugin:unicorn/recommended', с recommended в конце. можно не эксперементировать, и в новом так же повытаскивать везде рекомендеты теперь хочется флэт конфиг разбить на подфайлы с обьектами: файл с плагинами, файл с настройками, файл ещё с чем-то и т.д. и просто скинцть импортами в конфиге. он стал какой-то неказистый выходом для меня наверное будет не собирать флэт вот так, с нуля, а найти где-то уже собранный очень подробный конфиг, и от обратного, выкинуть из него лишнее.

[@boyywnkobe]

what's the extension that shows the update package is available?

[@mishanep]

npm outdated

[@boyywnkobe]

@@mishanep you have inline suggestion, it’s not a npm outdated command

[@boyywnkobe]

and what is the terminal shows suggestion ?

[@mishanep]

I use iTerm terminal with some plugins

[@BOCbMOU]

Как по мне, странное обновление. Не вижу никаких реальных плюсов от нового конфига. Улучшили читабельность? Сомнительно. Где-то она стала лучше, да, но где-то наоборот. Печально, в общем. Дополнительный гемор в миграции без плюсов.

[@MrLuckfinder]

Может я путаю, тогда поправьте меня. Globals можно было не удалять, а руками перенести в devdependencies, либо просто запустить npm I -D и он сам это сделает

[@KamilDzieniszewski]

can you add English subtitles?

[@mishanep]

I can try to ask ai with this.

[@DmitriyDev]

Вы купили мак?

[@mishanep]

Давненько

[@pavelmelnik9952]

@@mishanep решили бы вы сейчас брать мак, на момент мая 24 года. какой бы брали? вижу что люди до сих пор активно покупают м1 про. что на счет м3 про?

[@yuriykurenkov5125]

Спасибо за обзор. Отличные изменения IMHO

[@axel-sheen]

а что в них отличного? я не заметил ни одного преимущества, судя по видео

[@jewkuza]

Ребята, никто не сталкивался с такой шляпой на этапе билда апликухи? Error: end of the stream or a document separator is expected 18 | ... ToPath(import.meta.url); 19 | ... name(__filename); 20 | ... 21 | ... pat({ resolvePluginsRelativeTo: __dirname }); -----------------------------------------^ 22 | ... 23 | ... ERROR in [eslint] Cannot read config file: eslint.config.mjs Error: end of the stream or a document separator is expected

[@mishanep]

В mjs файлах по идее недоступен синтаксис __filename, __dirname. Там надо другой подход сказать, тот же import.meta.url в помощь.

[@jewkuza]

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