React Hero: Setup ESlint for TypeScript + React application

If you’re working on a Typescript + React project, setting up ESLint + Prettier can help you catch errors early and enforce coding standards across your codebase. In this post, we’ll go through the steps of setting up ESLint + Prettier for a Typescript + React application

In case you’re not aware, my React Hero series will guide you step-by-step through the following topics, helping you become familiar with React:

1. Setup a new React application with Vite + TypeScript
2. Setup React application with a design system — Material UI
3. Setup Jest + React Testing Library
4. Setup ESlint + Prettier in React
5. React Router
6. React Form Handling + Validation
7. Setup Redux Tool Kits & RTK Query
8. Build + Deploy your React application to your own server
9. Setup CI/CD pipeline for React app using GitlabCI
10. And more…

Okay, let’s finish ESLint + Prettier setup now

Install ESLint

Install ESLint using Yarn by running the following command:

yarn add eslint --dev

Install the Typescript…