1. Create react app and setup editor

Setting up React app with Typescript, ESLint, Prettier and Debugging

Installing react with typescript

• yarn create react-app my-app --template typescript

• creates a react project including eslint (the core eslint linting library) and typescript

Setting up eslint

• yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

• @typescript-eslint/parser: The parser that will allow ESLint to lint TypeScript code
• @typescript-eslint/eslint-plugin: A plugin that contains a bunch of ESLint rules that are

• Add .eslintrc file to configure eslint
• yarn add eslint-plugin-react eslint-plugin-react-hooks --dev

Installing prettier

• yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev

• prettier: The core prettier library
• eslint-config-prettier: Disables ESLint rules that might conflict with prettier
• eslint-plugin-prettier: Runs prettier as an ESLint rule

• Add .prettierrc file to configure prettier

Add scripts to run eslint

• Add scripts to package.json
• "lint": "eslint src/**/*.ts{,x}"
• "lint:fix": "eslint --fix src/**/*.ts{,x}"

Automatically fix code

• Add configuration to settings.json
• "editor.codeActionsOnSave": {"source.fixAll.eslint": true}

Add eslint and prettier to vs code editor

• Install the eslint and prettier VS Code extensions using the extensions panel

Debugging in the editor and browser

• Install Debugger for Chrome extension using the extensions panel
• Add launch.json file to .vscode folder in project root
• Add configuration for debugging with Chrome in launch.json file

Additional linting rules

• Information coming...

Additional formatting rules

• Information coming...