Eslint и код-стайл для React-приложения
Вставка
- Опубліковано 18 вер 2024
- Качество кода тесно связано с единообразием и соблюдением код-стайла. И неважно, работаете вы в команде или самостоятельно, четкие границы как должен выглядеть код - штука обязательная. Eslint помогает решить этот вопрос за счет гибкой настройки правил, а использовать его можно с любым JS/TS приложением, например, на React.
Ссылки из видео:
eslint.org/
github.com/fac...
github.com/imp...
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru...
paypal.me/mish...
Хороший подход. Михаил один из немногих людей которые здраво настраивают конфиг линтера сами по себя, а не берут какой-нибудь airbnb и возятся потом с ним.
Чтобы держать код в нормальном стиле не нужно море правил.
Круто, что теперь все в темном режиме)
Спасибо, несколько раз пытался подойти к линту но что-то всё время было муторно...а тут всё чётко понятно для старта и видно где можно покопаться
Михаил, спасибо за вашу работу. Отличное видео про eslint и код стайл. Вас приятно слушать, а главное понятно и быстро получается с помощью вас осваивать инструменты.
Смотрю уже второй раз. Первый раз давно для ознакомления. Сейчас для работы, чтобы освежить знания. Видео - находка, быстро, четко и по делу!
Михаил, как всегда, на высоте! Спасибо.
На моменте с правилами Импорта моё настроение резко сменилось с "да нафиг мне это нужно!" На "Ухты, как здорово! Хочу!".
Спасибо, наконец-то узнал некоторые детали про ESLint.
Планируется ли какая-то информация про Prettier и его интеграция с ESLint?
Претир с линтом это два разных инструмента)) их интегрировать друг в друга никак не выйдет, через команды только связать можно
@@sergeys4732 Можно к линтеру добавить правила претира, есть библиотека eslint-plugin-prettier
Очень понравилось. Спасибо.
Ахах, вчера читал документацию, разбирался, а сегодня видео. Супер!
Спасибо за подробности что все есть под капотом cra 👍
Спасибо огромное! Мне бы это видео год назад, не мучалась бы так при настройке линта без CRA
Михаил, очень хорошо подан материал, всё сразу становится понятно, огромное спасибо. А будет что нибудь по pre commit hooks теме? Очень бы хотелось разбор данной темы)
Для пре-коммитов/пре-пушей используют либу husky.
В принципе можно подумать и в сторону видео, но вообще не было в планах.
Спасибо за видео! Долго искал как выделять консоль в коде, пытался реализовать через темы vscode, а тут всё намного проще.
Спасибо большое, были пробелы по этой теме, благодаря Вам закрыл
Спасибо, оказывается не сложная штука EsLint. Лайк за видео. Просьба ещё с Prettier такое видео сделать)
Шедевр ^ шедевр, бро ты лучший 💪
Оо как вовремя - то я сейчас попал в команду где по код-стайлу нормальная такая дрочка идет, Михаил, спасибо большое.
всё понятно, спасибо тебе большое, твой контент и его подача топ)
спасибо вам за видео! очень ждем новых
ТайпСкрипт - настроенный Линт, круть :) Спасибо !
Спасибо!
Благодарю Михаил! Очень понравилось твоё объяснение =)
Шикарный видос, спасибо за труд!
спасибо большое! Очень понятно и интересно было смотреть и запоминается хорошо.
Очень полезное видео, спасибо! Es Lint
Спасибо, оказывается нету ничего сложного в настройке ESLint'а. Будет ли видео о совмещении ESLint'а с Prettier?
Довольно полезно получилось. Спасибо!
Спасибо за отличный видос! Как раз то, что мне сейчас надо было)
О здорово, как раз недавно занимался настройкой еслинта для команды)
You are really good at explaining, bro. Thank you
Спасибо вам! 🤝
Супер спасибо!
круто. спасибо большое за твои видосы
Отличное видео! Я бы еще добавил в settings.json настройку "editor.codeActionsOnSave": ["source.fixAll.eslint"] тогда vscode будет автоматом исправлять ошибки по линту.
Здесь не всегда это будет безопасно. Например, мне нужно временно закомментировать участок кода, в результате чего часть импортов станет неиспользуемыми. Авто фикс может удалить импорт и когда я расскомментирую обратно, будет ошибка в силу отсутствия зависимостей в файле. Обычно фикс делают на pre-commit или pre-push.
Михаил, спасибо за видео!
Подскажите пожалуйста какой следующий курс от Вас ждать и если не секрет какие вообще планируете курсы?
Лучше от Вас подождать ... чем у других покупать.
Приветствую, Serge.
В настоящий момент очень занят по основной работе и запись курсов не ведется. В планах в этом году сделать курс по TypeScript, скорее всего в связке с React. В дальнейшем хочу сделать курс по NodeJS (пока не уверен в начинке) или NextJS.
@@mishanep по TS и NodeJS было бы здорово. Курс по реакту отличным получился!
@Михаил Непомнящий, сделай, пожалуйста, видео про авторизации Redux Toolkit и jwt с refresh react-router-DOM 6
Есть ещё Prettier, он даже спрашивать не будет, сразу пофиксит кавычки, отступы, длину, запятые и ещё ряд некоторых вещей. В идеале конечно нужно использовать оба инструмента.
Это на любителя. Лично мне не нравится, что prettier слишком навязчиво редактирует перенос строк длине строки. И отключить перенос нельзя. На продакшне, кстати, я prettier пока не встречал.
@@mishanep на проде код вообще минифицирован :)
@@mishanep Хуже того, prettier не дает ставить две пустые строки (например, после импортов). И что самое противное - предлагающих сделать это просто послали, без объяснения причин. Однако даже он может быть полезен, например, для форматирования css, json, html. Хотя люди часто ставят его для всего, и для js в первую очередь. Он чуть больше может отформатить, чем eslint, но тоже не все. Но я предпочту чистый eslint, хотя и prettier смогу пережить.
Но я знаю что как-то можно настроить автоформатирование кода по правилам, при сохранении файла. Тоже очень удобно. На рабочем проекте в Webstorm было такое
Можно. И в VS Code расширение для этого есть. Но люди спорят насколько правильно вообще линтеру доверять форматирование, тем более при сохранении файла. Инструмент для линтинга, для форматирования есть другие инструменты. Но да, возможно =)
Спасибо , чел , будь я геем отжарил бы за это❤️👍🏻
Рядом можно ещё prettier поставить
Если eslint скажет вам, что вот тут вы написали неправильно (не те кавычки) и что вот эта переменная не используется, то prettier за вас отфарматирует код как положено: отступы, переносы, кавычки на правильные заменит. Поставил себе и... больше не знаю как жить без него, экономит тонну времени
хм, почему то не хочет import/order отрабатывать, не подчеркивает, тоже через create-react-app приложение
А подскажите пожалуйста: давно не работал с реактом и в последней версии cra, которую я лично видел (летом 20го года, кажется, дело было), их команда запретила расширять и редактировать конфиг линта, в ишью с этой очевидной проблемой их команда заняла позицию «cra - это максимально ‘все из коробки’ решение, если что-то не устраивает, делайте eject и переписывайте сами, потеряв возможность обновлять cra». Судя по тому, что видио недавнее, то что я описал выше было временным помешательством и сейчас .eslintrc из корня сам отлично подхватывается или за кадром остались какие-то дополнительные манипуляции чтоб это заработало?
Приветствую. Нет, с бубном плясать не приходится, файл с конфигом отлично работает. При этом можно как расширять стандартную конфигурацию, предложенную командой Реакта, так и с нуля написать свою.
Скажите пожалуйста, какое расширение рисуют в VS желтое дерево?
Не знаю о каком дереве идет речь. Если вы про дерево файлов и папок, то для их оформления у меня нет никаких расширений. Я использую тему CodeSandbox 2021 Black.
Здравствуйте. Не могли бы Вы, Михаил, сказать, используют ли create react up на продакшн проектах. Или собирают все через Webpack, или ещё как-то.
Ещё как используется.
@@mishanep Спасибо
Не пойму почему не используете тайпскрипт когда он используется уже повсеместно
А как не просто подсветить ошибку, а сразу автоматически устранить?
npx eslint --fix
а вот если стайл гайд эирбнб то куда?
Михаил, а Вы менторством занимаетесь?
Занимаюсь. Подробнее на моем сайте mishanep.com о формате и стоимости.
@@mishanep спасибо
+
Time кодов не хватает
Предложите конкретные, я с удовольствием скопирую в описание.
А как сделать чтобы он сам исправлял?