ESLint with VSCode, Prettier, Husky and React For Beginners

Поделиться
HTML-код
  • Опубликовано: 31 дек 2024

Комментарии • 107

  • @muhammadtouhiduzzaman7491
    @muhammadtouhiduzzaman7491 2 года назад +10

    when I try to choose popular style guide form Which style guide do you want to follow?, airbnb is missing from list . what should I do now ?

  • @realnanodude
    @realnanodude 2 года назад +7

    So I was puzzling my ESLint + Prettier + Husky config together and then I found your video. Absolutely love your tutorial. It both confirmed that I was correct with my settings and explained a couple of things that I did not understand right away. Huge thanks!

  • @OscarMartinez-nt6zn
    @OscarMartinez-nt6zn Год назад

    Great I just didn't how to make eslint works with prettier altogether but in 21:20 you explained the overriding stuff that I was unaware of! thanks.

  • @sandeeppokhrel
    @sandeeppokhrel 2 года назад +8

    Yesterday I was struggling for setting up eslint and prettier and today saw this video. Awesome work 👏

  • @nabeelahmed5277
    @nabeelahmed5277 2 года назад +3

    Hey I am not getting airbnb suggestion in guideline when i go with Typescript but it works with Javascript

  • @JakeSouthernCalifornia
    @JakeSouthernCalifornia Год назад

    That's the video I was looking for you. Thank you! That helps a lot to understand this topic.

  • @quamzgraphix9826
    @quamzgraphix9826 Год назад

    Best video on Eslint + prettier +husky config🥳🥳

  • @GoblinBlaster3000
    @GoblinBlaster3000 2 года назад +1

    Thanks for the great walkthrough! The pace was perfect and the content was informative.

  • @georga.9236
    @georga.9236 2 года назад +1

    Very thorough and on point approach. Keep on rocking!

  • @BoazRymland
    @BoazRymland 2 года назад +1

    Great video - Thanks! Straight to the point, sane defaults, good combination of tools and well explained

  • @RobertThomasrob_thomasa10
    @RobertThomasrob_thomasa10 2 года назад +3

    Just what I needed!

  • @sanisahani818
    @sanisahani818 Год назад +3

    I am not able to see the option for Airbnb style guide, it only shows standard and xo

  • @leevitammelin1795
    @leevitammelin1795 2 года назад

    Hi, I came from Brazil and this is perfect, I'm using after very easy, thanks!

  • @camilloalexandrebovio9022
    @camilloalexandrebovio9022 Год назад

    This video has a great value!

  • @Gangbuster74
    @Gangbuster74 Год назад +1

    can you please make a tutorial on setting up vite with eslint airbnb, typescript, prettier, husky, jest and react testing, with husky precommit lint staged and prePush test runner wit jest? that would be really awesome

  • @mylo1997
    @mylo1997 2 года назад +2

    nice , it what i needed!

  • @waili4028
    @waili4028 2 года назад +1

    great video! this is exactly what i need!

  • @sofiabertomy5389
    @sofiabertomy5389 2 года назад

    What a video bro! Can't thank you enough for this!

  • @paceman
    @paceman 2 года назад +2

    as far as I know CRA already has lint installed as depedency inside react-script package, and we can just extend/override it inside package.json, adding rules and plugins there and no need to install and configure it from scratch over again

  • @takumi_fuji86
    @takumi_fuji86 2 года назад

    Thank you! It’s really helpful video!

  • @natel8578
    @natel8578 2 года назад +8

    Any idea why AirBnB style guide is missing from the options in @eslint/config? Google doesn't seem to know.

    • @claudecharles94
      @claudecharles94 2 года назад +1

      Same issue here

    • @srdjancoralic2166
      @srdjancoralic2166 2 года назад

      same

    • @senturkdev
      @senturkdev 2 года назад

      same :(

    • @21mighty86
      @21mighty86 2 года назад

      Airbnb style doesn’t support typescript officially so when you select typescript option while doing ealint config it will not show airbnb later (sometimes, not sure why it works other times)
      Maybe select no when it asks you if you use typescript

    • @shivk2391
      @shivk2391 2 года назад +1

      try running npx eslint --init , for those who don't see airbnb listed during the select style type

  • @27sosite73
    @27sosite73 Год назад

    ска топ!
    дякую, братуха

  • @JohnnyDickson
    @JohnnyDickson Год назад +3

    Just now getting into linting, code formatting, etc. This video has helped explained a lot of the concepts, but I'm having an issue setting up @eslint/config. For some reason when I try to select a style guide, AirBnB's does not show up. Anyone else experiencing this during the @esling/config init process?

    • @charithagoonewardena3095
      @charithagoonewardena3095 Год назад

      They removed Airbnb from the options. You could go with standard ones

    • @noszczykmichal
      @noszczykmichal Год назад

      @@charithagoonewardena3095 don't agree. For me it's still available. Maybe some issue with versions of dependencies?

  • @soumenj2
    @soumenj2 11 месяцев назад

    Could you please tell me the place from where you are referring the values in "extends" property ?

  • @erwindelacruz3946
    @erwindelacruz3946 2 года назад +1

    Good tutorial .Thank you!

  • @leraymond706
    @leraymond706 2 года назад

    i really waiting for this video uploaded

  • @matteolorenzoni9975
    @matteolorenzoni9975 2 года назад

    Really very useful and interesting video. Thank you very much!

  • @ericdecolsales3066
    @ericdecolsales3066 2 года назад +4

    Airbnb it's just not available anymore for eslint with typescript projects since august 10, 2022

  • @aamiramin6112
    @aamiramin6112 2 года назад +1

    Amazing video thanks for sharing

  • @madmat8825
    @madmat8825 2 года назад +1

    Great tutorial!

  • @JustTrace17
    @JustTrace17 2 года назад

    Thank you so much! Helped a lot

  • @prathamdubey2363
    @prathamdubey2363 2 года назад +1

    Hello, I can't find the Airbnb style guide. What to do?

  • @softblood1941
    @softblood1941 2 года назад +1

    amazing video thanks !

  • @vaishnavis2165
    @vaishnavis2165 Год назад +1

    For me Airbnb is not showing after choosing the guide

  • @theyoussefnassar
    @theyoussefnassar 10 месяцев назад

    very helpful, thanks a lot 😄

  • @justcoder2868
    @justcoder2868 10 месяцев назад

    Thanks for this video great job, 2 questions for you>
    1. Does Husky/linting just run checks on just the files changed i.e. being committed?
    2. do you know if there is an option to remove unused imports with the linting?
    Thanks

  • @tanmayjain19
    @tanmayjain19 2 года назад

    Great Video, on Point!! Just one thing which i believe you missed out is eslintignore file and it features. I implemented your code but was facing one error which I solved using eslintignore file.

  • @pireus21
    @pireus21 Год назад

    Hello guys! I am a beginner on the field and what i do not understand is the following: Do i have to do these steps every time i start a project and open a file or just once and done with it? Also, where would be recommended to save the file?

  • @Nosleepguy
    @Nosleepguy 2 года назад +1

    so nice and usefull

  • @denisotimguitar
    @denisotimguitar 2 года назад

    Awesome Work!🔥

  • @call_me_rusker
    @call_me_rusker 2 года назад +4

    I have a question, why you don't have to rewrite the "git add ." again when you fix the eslint problem? I mean you changed your file, but you didn't "git add ," but just commit, how did it work?

    • @Sam-yh8yi
      @Sam-yh8yi 2 года назад

      I have the same question

    • @CoderOne
      @CoderOne  2 года назад

      If you do "git add ." then make a change to file(s) before commit, only the first changes will be included in the commit. So you'll have to do "git add ." again to include all changes!

    • @Sam-yh8yi
      @Sam-yh8yi 2 года назад +1

      ​@@CoderOne so this means that husky does not really prevent me from committing malformed code?

    • @julianflorez9972
      @julianflorez9972 2 года назад +4

      @@CoderOne So when you fixed the problem with prettier and then committed, you actually pushed the 'bad' file ? Sorry it's just a bit confusing 😅

  • @ashutoshbisoyi8074
    @ashutoshbisoyi8074 Год назад

    Pretty helpful. @CoderOne could you please tell me which version of node you were using at this time

  • @itskritz1996
    @itskritz1996 2 года назад

    Really nice and helpful... Thanks!

  • @vikasbhardwaj8078
    @vikasbhardwaj8078 4 месяца назад

    Hi @CoderOne
    First of all a great tutorial indeed.
    However with eslint version 9 a lot of things have been changed.
    It will be great if you can you make a new video with latest changes.

  • @donatobaonguis4315
    @donatobaonguis4315 2 года назад +1

    Will the steps described here in this video work with react-native project as well?

  • @prajwalmore7554
    @prajwalmore7554 2 года назад

    Thanks. it really helped...!

  • @AlejandroNavarroD
    @AlejandroNavarroD 2 года назад +1

    Pretty good tutorial

  • @noriller
    @noriller 2 года назад +1

    Another one to add to that is the actual commit message linting.

  • @pradipspeaks9395
    @pradipspeaks9395 Год назад

    For nest ts project which project I have to choose (like in place of your react app).

  • @DaveTheDeveloper
    @DaveTheDeveloper 2 года назад

    There are all these amazing tools for formatting or sth. else that makes your life easier. Meanwhile in school, we still have to write code on paper and the teacher is like "You have to know it without the pc" lmao.

  • @morale3056
    @morale3056 2 года назад

    Thanks bloody so much!

  • @adil88201
    @adil88201 2 года назад

    you're as awesome as TraversyMedia

  • @Schweppese
    @Schweppese 2 года назад +1

    Thanks for the tutorial. Do you mind also dropping the name of the VSCode theme you're using?

  • @CheulongSear
    @CheulongSear 2 года назад

    I wonder about your opinion on Storybook? When to use when not to?

  • @bedirhan7029
    @bedirhan7029 2 года назад

    All of my computers got the softwares here. I first install them on virtual environnt to make sure they're not malware. So I can assure

  • @tula1308
    @tula1308 2 года назад

    Thank a lot for a good video

  • @harishkumarforever515
    @harishkumarforever515 2 года назад

    worth your course

  • @whozsidhant
    @whozsidhant 2 года назад

    ✖ 158 problems (158 errors, 0 warnings)
    husky - pre-commit hook exited with code 1 (error)
    any solution??

  • @rahuldotel5983
    @rahuldotel5983 2 года назад

    Thank you very much bro ..

  • @tranquiloteov
    @tranquiloteov Год назад

    Awsome video, thanks. But Wow!!! Too much dependencies just for linting. Looks like a nightmare for upgrading conflicts when stuffs get deprecated.

  • @santiagogarciavazquez6569
    @santiagogarciavazquez6569 2 года назад

    Nice, thx guys

  • @regilearn2138
    @regilearn2138 2 года назад +3

    Hi Coderone,wow greate video about the react from scratch setup ,I would like to request a react video from you,bcz i know you would definitely do this for youtube developrs,
    my request is please do a react video how to use* All the form components like radio btn, select box,Checkbox,input ,calendar etc* and practically what we use in industry to build apps **without any third part library please only use pure react with hooks***,bcz it will give the clear idea before moving in to formik or any other libruary,i would appreciate if u can use Mongodb for this.

  • @dzhaniivanov5837
    @dzhaniivanov5837 2 года назад

    lint:fix doesn't work for me ?only shows errors like npm run lint

  • @heathen838
    @heathen838 2 года назад +1

    omg who's gonna remember all that

  • @longnhat6405
    @longnhat6405 Год назад

    fire!!!!

  • @dogukan5384
    @dogukan5384 2 года назад

    SO link is given below!!!

  • @code-island
    @code-island 2 года назад

    Nice, keep it up

  • @alihosseini6630
    @alihosseini6630 2 года назад

    Thanks a lot

  • @DuyTran-ss4lu
    @DuyTran-ss4lu 2 года назад +1

    Awesome

  • @naimurrahib5751
    @naimurrahib5751 2 года назад

    What’s the theme his using ?

  • @BotanicalWonders60
    @BotanicalWonders60 2 года назад

    thank so much

  • @sidokouki670
    @sidokouki670 Год назад

    is it me or node apps doesnt have airbnb guide ?

  • @hbela1000
    @hbela1000 2 года назад

    Good.thx.

  • @PewDiePie777
    @PewDiePie777 5 месяцев назад

    I am sorry, but am I the only one not getting the same ESLint installation he got? I didn't have any style choice, and it also shows, that it is ESLint 1.20.00.
    How do I get what he got?

    • @CoderOne
      @CoderOne  5 месяцев назад

      @@PewDiePie777 I was just going through ESLint setup a couple of days ago and it looks like they have changed the setup and installation, actually, they made it easier now using their new CLI, just run the ESLint CLI as per docs and follow the terminal instructions (e.g choosing Typescript or Javacript) and it will do the setup for you.

    • @PewDiePie777
      @PewDiePie777 5 месяцев назад

      @@CoderOne Thank you, ima try it next time. Hopefully it helps.

    • @PewDiePie777
      @PewDiePie777 5 месяцев назад

      @@CoderOne I've tried it according to docs as well, but I am still not getting the third option of using my lint to check syntax, find problems, AND enforce code style. Which I am trying to choose, but I am not getting offered this choice. I only have two to pick, from. Which are to check syntax only, or to check syntax, and find problems.
      And it doesn't offer me any options regarding style like Airbnb as well(

  • @MrMegaFirestarter
    @MrMegaFirestarter 2 года назад

    Excellent but .. in "extends" - "airbnb" have to be replaced to "airbnb-base" otherwise "ESLint couldn't find the config "airbnb" to extend from."

  • @reikoleci4303
    @reikoleci4303 2 года назад

    works

  • @necrotikS
    @necrotikS 2 года назад

    What about the "eslintConfig" that create-react-app automatically inserts in the package.json file? Shouldn't it be removed from it?

    • @CesarDenis
      @CesarDenis 2 года назад

      You can delete "eslintConfig", it will get the configuration from ".eslintrc.json"

  • @Keshish4
    @Keshish4 11 месяцев назад

    while Airbnb style doesn't exist, I ran into several problems, also no repository for this video (at least i couldn't find one)

  • @nantipatsawanglak8084
    @nantipatsawanglak8084 2 года назад

    problems and than volu automate the boi cuz I didn’t know how to sidechain. My one buddy produces riddim and he legit saw my daw

  • @حسينعبده-ت3ض
    @حسينعبده-ت3ض 2 года назад

    I downloaded it for free and get full version

  • @shofahabib3912
    @shofahabib3912 2 года назад

    lot during covid.

  • @bibhushankarki9194
    @bibhushankarki9194 2 года назад

    did he pronounce husky as hashkey? xD

  • @kamgdy89
    @kamgdy89 2 года назад

    No! No any!

  • @geosystems2106
    @geosystems2106 Год назад

    Lintel run command what ???? You guys take some stuff so much granted .. How the hell did you *run* this : > Lintel : ......Visualizer ?? So out of the blue :/

  • @bostonlow4789
    @bostonlow4789 2 года назад

    what is the equivalent for npm init @eslint/config in yarn?

  • @palach_666
    @palach_666 9 месяцев назад

    Thanks you🎉

  • @rofin3631
    @rofin3631 2 года назад

    thank you so much