Adding code linting and autoformatting

Explore how to integrate ESLint and Prettier in a manually set up React and TypeScript project. Learn to install required packages, configure linting rules for React hooks and TypeScript, and set code formatting standards. This lesson helps you maintain clean, error-free, and consistently formatted code.

We'll cover the following...

Adding linting #
Adding autoformatting
Wrap up #

Adding linting #

We touched on linting with ESLint when we created a project using Create React App. We are going to use ESLint in this project as well. So, let’s install ESLint along with the plugins we are going to need as development dependencies:

npm install --save-dev eslint eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin

Below is an explanation of the packages that we just installed:

eslint: This is the core ESLint library.

...

1.Why TypeScript?

2.Using basic types

3.Creating types

4.Working with generic types

5.Creating strongly-typed function component props

6.Creating strongly-typed function component state

7.Creating strongly-typed class components

8.Creating strongly-typed component events and event handlers

9.Creating strongly-typed context

10.Creating strongly-typed refs

11.Creating React projects with TypeScript using Create React App

12.Creating a React and TypeScript project manually

13.Putting everything together

Adding code linting and autoformatting

Adding linting #