ESLint with VSCode, Prettier, Husky and React For Beginners

ESLint, Prettier, Husky, VSCode and React for applying different style guides and forcing a specific code style across the whole codebase. In this video, we will go through what is ESLint, Prettier and Husky and how to properly set up to use with VSCode and React with Typescript to get the best modern project setup!
⭐ Timestamps ⭐
00:00 Intro
00:55 Setting up ESLint
07:41 Best ESLint Config
09:39 Linting your Project
18:49 Overriding ESLint rules
19:22 Setting up Prettier with VSCode
21:31 Best Prettier Config
25:11 ESLint VSCode Helper Extension
27:49 Git Pre-commit linting w/ Husky
🧭 Turn Design into React Code | From prototype to Full website in no time
• Turn Design into React...
🧭 Watch Tutorial on Designing the website on Figma
• I Design a onecolor We...
🧭 Watch Create a Modern React Login/Register Form with smooth Animations
• Create a Modern React ...
🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
• Debug React Apps Like ...
🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
• Master React Like Pro ...
🧭 Learn Redux For Beginners | React Redux from Zero To Hero build a real-world app
• Debug React Apps Like ...
🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
• Build Login/Register A...
🧭 Introduction to GraphQL with Apollo and React
• Introduction to GraphQ...
🐦 Follow me on Twitter: / ipenywis
💻 Github Profile: github.com/ipenywis
Made with 💗 by Coderone

[@realnanodude]

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!

[@GoblinBlaster3000]

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

[@BoazRymland]

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

[@georga.9236]

Very thorough and on point approach. Keep on rocking!

[@JakeeReacher]

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

[@sofiabertomy5389]

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

[@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.

[@leevitammelin1795]

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

[@matteolorenzoni9975]

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

[@waili4028]

great video! this is exactly what i need!

[@RobertThomasrob_thomasa10]

Just what I needed!

[@erwindelacruz3946]

Good tutorial .Thank you!

[@sandeeppokhrel]

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

[@BotanicalWonders60]

same as me

[@takumi_fuji86]

Thank you! It’s really helpful video!

[@camilloalexandrebovio9022]

This video has a great value!

[@JustTrace17]

Thank you so much! Helped a lot

[@leraymond706]

i really waiting for this video uploaded

[@quamzgraphix9826]

Best video on Eslint + prettier +husky config🥳🥳

[@mylo1997]

nice , it what i needed!

[@itskritz1996]

Really nice and helpful... Thanks!

[@aamiramin6112]

Amazing video thanks for sharing

[@madmat8825]

Great tutorial!

[@denisotimguitar]

Awesome Work!🔥

[@softblood1941]

amazing video thanks !

[@theyoussefnassar]

very helpful, thanks a lot 😄

[@morale3056]

Thanks bloody so much!

[@AlejandroNavarroD]

Pretty good tutorial

[@Nosleepguy]

so nice and usefull

[@prajwalmore7554]

Thanks. it really helped...!

[@rahuldotel5983]

Thank you very much bro ..

[@tula1308]

Thank a lot for a good video

[@santiagogarciavazquez6569]

Nice, thx guys

[@palach_666]

Thanks you🎉

[@rofin3631]

thank you so much

[@tanmayjain19]

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.

[@alihosseini6630]

Thanks a lot

[@code-island]

Nice, keep it up

[@DuyTran-ss4lu]

Awesome

[@hbela1000]

Good.thx.

[@harishkumarforever515]

worth your course

[@muhammadtouhiduzzaman7491]

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 ?

[@27sosite73]

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

[@longnhat6405]

fire!!!!

[@ashutoshbisoyi8074]

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

[@Schweppese]

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

[@adil88201]

you're as awesome as TraversyMedia

[@CheulongSear]

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

[@paceman]

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

[@donatobaonguis4315]

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

[@reikoleci4303]

works

[@noriller]

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

[@Gangbuster74]

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

[@dueft4479]

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.

[@nabeelahmed5277]

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

[@justcoder2868]

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

[@ericdecolsales3066]

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

[@regilearn2138]

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.

[@838vuks]

omg who's gonna remember all that

[@bedirhan7029]

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

[@soumenj2]

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

[@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?

[@tranquiloteov]

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

[@pradipspeaks9395]

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

[@JohnnyDickson]

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]

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

[@noszczykmichal]

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

[@sanisahani818]

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

[@prathamdubey2363]

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

[@call_me_rusker]

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]

I have the same question

[@CoderOne]

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]

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

[@julianflorez9972]

@@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 😅

[@naimurrahib5751]

What’s the theme his using ?

[@dogukan5384]

SO link is given below!!!

[@MrMegaFirestarter]

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

[@vaishnavis2165]

For me Airbnb is not showing after choosing the guide

[@whozsidhant]

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

[@dzhaniivanov5837]

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

[@user-gf9of9lc7c]

I downloaded it for free and get full version

[@nantipatsawanglak8084]

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

[@sidokouki670]

is it me or node apps doesnt have airbnb guide ?

[@necrotikS]

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

[@CesarDenis]

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

[@shofahabib3912]

lot during covid.

[@Keshish4]

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

[@bibhushankarki9194]

did he pronounce husky as hashkey? xD

[@kamgdy89]

No! No any!

[@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 :/

[@natel8578]

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

[@claudecharles94]

Same issue here

[@srdjancoralic2166]

same

[@senturkdev]

same :(

[@21mighty86]

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]

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

[@bostonlow4789]

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

[@BotanicalWonders60]

thank so much