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