How to setup eslint with eslint.config.mjs in your React/Typescript project eslint.config.mjs

A few days ago, my wife decided to incorporate ESLint into a project she’s been working on.

However, she found that both the ESLint official documentation and other resources do not adequately explain how to implement the latest version of ESLint in a React project that utilizes TypeScript.

It seems that most of the available documentation focuses on older versions of ESLint, not the most recent release.

So let's see how to implement this in React Application :

What is Eslint ?

ESLint performs static analysis on your code to identify issues swiftly. It integrates with most text editors, and you can incorporate ESLint into your continuous integration workflow.

However, ESLint isn’t immediately compatible with TypeScript out of the box.

To enable ESLint to process TypeScript code, you must employ additional libraries.

For this purpose, we will utilize

typescript-eslint

which allows ESLint to operate on TypeScript code effectively.

STEP 1:

We will install these packages :

yarn add -D eslint @eslint/js typescript typescript-eslint

if you are using npm then use this :

npm install — save-dev eslint @eslint/js typescript typescript-eslint

STEP 2:

Create an eslint.config.mjs config file in the root of your project:

(Yes this is called the Flat Config file and different from the older version of eslintrc.js file)

Paste this code over there:

// @ts-check

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
);

This will enable the recommended configurations and then you can refine these based on your project requirements.

That’s it:

Run command

yarn eslint .  
or
for npm run this :  
 npx eslint .

This command will execute across all files in your project, including webpack configurations and bundle.js, which likely isn't our intention. To target this more precisely, we should specify the file types we're interested in, namely .tsx and .ts files.

eslint 'src/**/*.{ts,tsx}'

you should also add this as a script in you package.json file for quick access.

"scripts":{
 "lint": "eslint 'src/**/*.{ts,tsx}'"
}

That’s it !

I’m glad to offer assistance! If this guidance helps streamline your process and saves you time, that’s a great outcome. If you have any more questions or need further help, feel free to ask!