Eslint и код-стайл для React-приложения

Качество кода тесно связано с единообразием и соблюдением код-стайла. И неважно, работаете вы в команде или самостоятельно, четкие границы как должен выглядеть код - штука обязательная. Eslint помогает решить этот вопрос за счет гибкой настройки правил, а использовать его можно с любым JS/TS приложением, например, на React.
Ссылки из видео:
eslint.org/
github.com/fac...
github.com/imp...
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru...
paypal.me/mish...

[@Toookes]

Спасибо, несколько раз пытался подойти к линту но что-то всё время было муторно...а тут всё чётко понятно для старта и видно где можно покопаться

[@BorysOliinyk]

Спасибо, наконец-то узнал некоторые детали про ESLint. Планируется ли какая-то информация про Prettier и его интеграция с ESLint?

[@sergeys4732]

Претир с линтом это два разных инструмента)) их интегрировать друг в друга никак не выйдет, через команды только связать можно

[@dmitriij5685]

@@sergeys4732 Можно к линтеру добавить правила претира, есть библиотека eslint-plugin-prettier

[@Serega5j]

Оо как вовремя - то я сейчас попал в команду где по код-стайлу нормальная такая дрочка идет, Михаил, спасибо большое.

[@englishmusictranscriptione9882]

Спасибо, оказывается не сложная штука EsLint. Лайк за видео. Просьба ещё с Prettier такое видео сделать)

[@dimahinev]

Шедевр ^ шедевр, бро ты лучший 💪

[@goodman4493]

Хороший подход. Михаил один из немногих людей которые здраво настраивают конфиг линтера сами по себя, а не берут какой-нибудь airbnb и возятся потом с ним. Чтобы держать код в нормальном стиле не нужно море правил.

[@АлександрЩепкин-ж5ы]

ТайпСкрипт - настроенный Линт, круть :) Спасибо !

[@RailGainetdinov]

Спасибо, оказывается нету ничего сложного в настройке ESLint'а. Будет ли видео о совмещении ESLint'а с Prettier?

[@xphnx4085]

Благодарю Михаил! Очень понравилось твоё объяснение =)

[@redcrown5789]

Шикарный видос, спасибо за труд!

[@norwinlol]

О здорово, как раз недавно занимался настройкой еслинта для команды)

[@unknownWakeborder]

Довольно полезно получилось. Спасибо!

[@MrFoster911]

Отличное видео! Я бы еще добавил в settings.json настройку "editor.codeActionsOnSave": ["source.fixAll.eslint"] тогда vscode будет автоматом исправлять ошибки по линту.

[@mishanep]

Здесь не всегда это будет безопасно. Например, мне нужно временно закомментировать участок кода, в результате чего часть импортов станет неиспользуемыми. Авто фикс может удалить импорт и когда я расскомментирую обратно, будет ошибка в силу отсутствия зависимостей в файле. Обычно фикс делают на pre-commit или pre-push.

[@dr_morpho]

Спасибо вам! 🤝

[@sergeitinc]

Михаил, спасибо за видео! Подскажите пожалуйста какой следующий курс от Вас ждать и если не секрет какие вообще планируете курсы? Лучше от Вас подождать ... чем у других покупать.

[@mishanep]

Приветствую, Serge. В настоящий момент очень занят по основной работе и запись курсов не ведется. В планах в этом году сделать курс по TypeScript, скорее всего в связке с React. В дальнейшем хочу сделать курс по NodeJS (пока не уверен в начинке) или NextJS.

[@dirty_arkady]

@@mishanep по TS и NodeJS было бы здорово. Курс по реакту отличным получился!

[@elstar7466]

Есть ещё Prettier, он даже спрашивать не будет, сразу пофиксит кавычки, отступы, длину, запятые и ещё ряд некоторых вещей. В идеале конечно нужно использовать оба инструмента.

[@mishanep]

Это на любителя. Лично мне не нравится, что prettier слишком навязчиво редактирует перенос строк длине строки. И отключить перенос нельзя. На продакшне, кстати, я prettier пока не встречал.

[@elstar7466]

@@mishanep на проде код вообще минифицирован :)

[@CJIu3eHb]

@@mishanep Хуже того, prettier не дает ставить две пустые строки (например, после импортов). И что самое противное - предлагающих сделать это просто послали, без объяснения причин. Однако даже он может быть полезен, например, для форматирования css, json, html. Хотя люди часто ставят его для всего, и для js в первую очередь. Он чуть больше может отформатить, чем eslint, но тоже не все. Но я предпочту чистый eslint, хотя и prettier смогу пережить.

[@ahmadumarov2845]

Спасибо , чел , будь я геем отжарил бы за это❤️👍🏻

[@sashas.3323]

хм, почему то не хочет import/order отрабатывать, не подчеркивает, тоже через create-react-app приложение

[@aquinary.]

Рядом можно ещё prettier поставить Если eslint скажет вам, что вот тут вы написали неправильно (не те кавычки) и что вот эта переменная не используется, то prettier за вас отфарматирует код как положено: отступы, переносы, кавычки на правильные заменит. Поставил себе и... больше не знаю как жить без него, экономит тонну времени

[@ЮрийДонников]

Не пойму почему не используете тайпскрипт когда он используется уже повсеместно

[@igorrak3649]

Здравствуйте. Не могли бы Вы, Михаил, сказать, используют ли create react up на продакшн проектах. Или собирают все через Webpack, или ещё как-то.

[@mishanep]

Ещё как используется.

[@igorrak3649]

@@mishanep Спасибо

[@serhioramires3166]

А как не просто подсветить ошибку, а сразу автоматически устранить?

[@mishanep]

npx eslint --fix

[@kapwas]

а вот если стайл гайд эирбнб то куда?

[@iGotton]

+

[@ilyamartynov2743]

@Михаил Непомнящий, сделай, пожалуйста, видео про авторизации Redux Toolkit и jwt с refresh react-router-DOM 6

[@force_of_abstinence]

Круто, что теперь все в темном режиме)

[@petrvictorovich]

На моменте с правилами Импорта моё настроение резко сменилось с "да нафиг мне это нужно!" На "Ухты, как здорово! Хочу!".

[@deadlyvis]

Михаил, очень хорошо подан материал, всё сразу становится понятно, огромное спасибо. А будет что нибудь по pre commit hooks теме? Очень бы хотелось разбор данной темы)

[@mishanep]

Для пре-коммитов/пре-пушей используют либу husky. В принципе можно подумать и в сторону видео, но вообще не было в планах.

[@MrSilvestrik]

Михаил, как всегда, на высоте! Спасибо.

[@krissssssssssssssssss]

Михаил, спасибо за вашу работу. Отличное видео про eslint и код стайл. Вас приятно слушать, а главное понятно и быстро получается с помощью вас осваивать инструменты.

[@andreysorokin8217]

Очень понравилось. Спасибо.

[@vladvoloshenko5701]

всё понятно, спасибо тебе большое, твой контент и его подача топ)

[@Sobanim]

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

[@mishanep]

Можно. И в VS Code расширение для этого есть. Но люди спорят насколько правильно вообще линтеру доверять форматирование, тем более при сохранении файла. Инструмент для линтинга, для форматирования есть другие инструменты. Но да, возможно =)

[@sergeysamius1128]

Спасибо!

[@nmteg]

Скажите пожалуйста, какое расширение рисуют в VS желтое дерево?

[@mishanep]

Не знаю о каком дереве идет речь. Если вы про дерево файлов и папок, то для их оформления у меня нет никаких расширений. Я использую тему CodeSandbox 2021 Black.

[@krissssssssssssssssss]

Смотрю уже второй раз. Первый раз давно для ознакомления. Сейчас для работы, чтобы освежить знания. Видео - находка, быстро, четко и по делу!

[@caH40yc]

Спасибо за видео! Долго искал как выделять консоль в коде, пытался реализовать через темы vscode, а тут всё намного проще.

[@ilyamartynov2743]

Ахах, вчера читал документацию, разбирался, а сегодня видео. Супер!

[@TsyganskiyPosol]

Спасибо огромное! Мне бы это видео год назад, не мучалась бы так при настройке линта без CRA

[@АртемПлохоцкий-ж8н]

Спасибо большое, были пробелы по этой теме, благодаря Вам закрыл

[@Нихлатак]

спасибо большое! Очень понятно и интересно было смотреть и запоминается хорошо.

[@o.korsakov4426]

Спасибо за подробности что все есть под капотом cra 👍

[@garikmelqonyan6011]

You are really good at explaining, bro. Thank you

[@orcsamuro9687]

Очень полезное видео, спасибо! Es Lint

[@dkautochess9566]

круто. спасибо большое за твои видосы

[@azizbekkomilov3589]

Супер спасибо!

[@СветланаАндреевна-х8р]

спасибо вам за видео! очень ждем новых

[@АлексейСаломатин-о4ю]

Михаил, а Вы менторством занимаетесь?

[@mishanep]

Занимаюсь. Подробнее на моем сайте mishanep.com о формате и стоимости.

[@АлексейСаломатин-о4ю]

@@mishanep спасибо

[@johndoe4016qweasd]

Спасибо за отличный видос! Как раз то, что мне сейчас надо было)

[@ivandenissenko9366]

А подскажите пожалуйста: давно не работал с реактом и в последней версии cra, которую я лично видел (летом 20го года, кажется, дело было), их команда запретила расширять и редактировать конфиг линта, в ишью с этой очевидной проблемой их команда заняла позицию «cra - это максимально ‘все из коробки’ решение, если что-то не устраивает, делайте eject и переписывайте сами, потеряв возможность обновлять cra». Судя по тому, что видио недавнее, то что я описал выше было временным помешательством и сейчас .eslintrc из корня сам отлично подхватывается или за кадром остались какие-то дополнительные манипуляции чтоб это заработало?

[@mishanep]

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

[@ilyamartynov2743]

Time кодов не хватает

[@mishanep]

Предложите конкретные, я с удовольствием скопирую в описание.

[@helplrewerse2925]

А как сделать чтобы он сам исправлял?