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

🧭 Watch Tutorial on Designing the website on Figma

🧭 Watch Create a Modern React Login/Register Form with smooth Animations

🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools

🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React

🧭 Learn Redux For Beginners | React Redux from Zero To Hero build a real-world app

🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize

🧭 Introduction to GraphQL with Apollo and React

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!

[sandeeppokhrel]

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

[muhammadtouhiduzzaman]

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 ?

[OscarMartinez-ntzn]

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.

[JakeeReacher]

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

[GoblinBlaster]

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.]

Very thorough and on point approach. Keep on rocking!

[quamzgraphix]

Best video on Eslint + prettier +husky config🥳🥳

[Gangbuster]

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

[nabeelahmed]

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

[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

[leevitammelin]

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

[sanisahani]

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

[justcoder]

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

[matteolorenzoni]

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

[pireus]

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?

[sofiabertomy]

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

[waili]

great video! this is exactly what i need!

[ashutoshbisoyi]

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