React Typescript #1 Setup with ESLint, Prettier, and Husky Pre-commit hooks

#reactjs #bearjs #javascript #es6 #jsx #tsx #typescript #reacttypescript #eslint #prettier #husky #precommit #setup #coding #codinglife #js #ts #github #createreactapp #yarn #2023

How to setup a react typescript app from scratch. The main lesson objectives are:

1. Setting up the project in Github and pulling locally
2. Setting up the basic typescript and react project using CRA
3. Install ESLint
4. Install Prettier
5. Husky Pre-commit Hooks

** Chapters **

00:00
00:59 1. Setting up the project in Github
02:08 2. Setting up the basic typescript and react project using CRA
03:07 -- 2.1. Debugging - Upgrading NPM
05:08 -- 2.2. GitHub - Initial Commit
05:39 -- 2.3. Running the App for the first time
06:00 3. ESLint [Code Quality]
06:51 -- 3.1. ESLint Init
09:18 -- 3.2. Fixing ESLint Errors
15:19 4. Prettier [Code Formatting]
16:32 -- 4.1. Prettier Installation
17:36 -- 4.2. Prettier Format & Pre-Commit Scripts
19:12 -- 4.3. Resolving Prettier & ESLint Conflicts
21:00 5. Husky Pre-Commit Hooks

** The repository for the video is here: **

[vitaliiverdiiev]

Amazing and simple explanation with real-time problems solving. Thank you! 💛

[hiddenworld]

It was an amazing and powerful tutorial done in a very simple way for easy understanding. Liked and subscribed. Thank you!

[allhailalona]

Thank you very much! I liked and subscribbled!

[mudshark]

Running prettier on all files is fine for small projects, but when the project gets bigger you might wanna use a some tool like lint-staged.
It will only process the files you've actually staged, using prettier, and/or any other tool, like the linter.
Files that you haven't changed need not be run through prettier, that is mostly just a waste of time.
If each commit starts to take 5 seconds or longer, it will get annoying really fast, especially if you do micro-commits.
But for small projects, with few files, you probably won't notice the delay.

[vnm_]

couldn't you use eslint and prettier as extensions in VSCode, is it better to use it like this?