Use Code Quality Toolings

Project Configuration

Create a new project directory

Create a package.json file

Install React and ReactDOM

TypeScript Configuration

Install TypeScript and type definitions

Configure the TypeScript compiler

Specify the type-checking command

Develop the project’s React component

Type-check your code

Add static type definitions to your code

Run the type-check script

Create the entry script

Create the web page

Run your application

Optional: Run multiple scripts at the same time

ESLint Configuration

Initialize ESLint’s configuration

Lint your code

Configure eslint-plugin-react to auto-detect the app’s React version

Configure eslint-plugin-react to support the new JSX transform

Add a rel="noreferrer" to the anchor element

Re-lint your code

Customize ESLint rules

Specify the files ESLint should ignore

Prettier Configuration

Install Prettier and eslint-config-prettier

Set up the app’s Prettier formatting rules

Specify the files Prettier should ignore

Check if your files are formatted

Format unformatted files

And That’s It!

Optional: Configure VS Code to Auto-Format and Lint Your Code

1. Install the ESLint and Prettier VSCode extensions

2. Configure VS Code to use Prettier to auto-format on save