Setup Eslint Prettier with Typescript and React -Nextjs, Create React App
In this video, you are going to learn how to setup eslint and prettier with #react and typescript.
Eslint and prettier are great handy tool for any JavaScript developer.
Eslint force you to write consistent code all over your project and makes you do
the best practices.
Prettier is helps you to automatically format your code. It fix all spacing, semi colo, tabs etc for you. It makes your code clean and readable.
That's why they are using. In this video I have shown you how to setup and use #eslint and #prettier with typescript
Topics are covered in this video:
1. How to setup typescript in nextjs.
2. Setup absolute import with typescript.
3. Install eslint and prettier.
4. Configure eslint and prettier with configuration files.
I have also written a blog about it. Use it as a reference.
Blog link: https://cules-coding.vercel.app/blog/...
Repository created in this video: https://github.com/thatanjan/eslint-p...
My eslint configuration: https://gist.github.com/thatanjan/c3c...
Resources used in this video.
Eslint
Plugin: https://eslint.org/docs/user-guide/in...
Prettier
Plugin: https://prettier.io/docs/en/editors.html
configuration: https://prettier.io/docs/en/configura...
Timestamps:
0:00 Intro
0:14 What is Eslint and Prettier?
1:56 Setup React project
3:09 Setup TypeScript
4:24 Setup absolute import with TypeScript
6:50 Install Eslint package
8:55 Install Prettier package
9:25 Customize eslint config
11:12 Setup Prettier config
12:51 Customize common eslint error
13:27 Resolve react/jsx-filename-extension
15:00 Resolve react/jsx-in-scope
16:14 Test absolute import
18:00 Resolve import/no-unresolved
20:22 Resolve import/extensions
22:00 Outro
If you like this video, Please Like, share and subscribe. It really motivates me to create more content just like this.
Stay Safe, Wear Mask. Good bye
Videos you might like:
Redux toolkit crash course: • Redux toolkit crash course. Everythin...
What is Client Side Rendering? How Client Side Rendering Works : • What is Client Side Rendering? How Cl...
What is Server Side Rendering? How Server Side Rendering Works :
• What is Server Side Rendering? How Se...
Redirect in nextjs from server side | React | Authentication :
• Redirect in nextjs from server side |...
Access COOKIES in NextJS from server side. | Reactjs | SSR :
• Access COOKIES in NextJS from server ...
Want to learn full stack web development to get your dream job? If so then you
are in the right place. Cules coding will help you to get that. You will find
tutorials about full stack web development, data structures & alghorithms and
many more cool things. So hit the Subscribe button so you don't miss any of
those cool stuffs.
About Me: My name is Anjan Shomodder. I am a full stack web developer. I can
create full stack applications social media, chat applications, blogging website
and many more. I also write blog posts about web development and cool
technologies on Medium and dev.to.
If you want to see my portofolio then visit:
Portofolio: https://thatanjan.me/
My Personal projects:
Dev-book: https://dev-book.vercel.app/
My blog posts are:
Medium: / thatanjan
Dev: https://dev.to/thatanjan/
Cules Coding: https://culescoding.space/
If you want to reach out to me you can send me email or simply dm me on social
media.
Email: [email protected]
I would really appreciate if you follow me on social media as @thatanjan.
You can follow me on:
LinkedIn: / thatanjan
Twitter: / thatanjan
Github: https://github.com/thatAnjan/
Instagram (personal): / thatanjan
Instagram (youtube channel): / cules_coding
Facebook: / thatanjan
Thank You guyz. Hope you have a good day.
Stay safe.