How to set up ESLint and Prettier in React TypeScript 5 project? 2023

In this article, let's do step by step set up of ESLint and Prettier in React Typescript 5 project. By the end of this guide, you’ll have a clean and productive development environment that will boost your productivity and code quality.

Create React Project with Typescript Template:

Create React project with TypeScript Template

 npx create-react-app react-typescript-setup --template typescript

 //"react-typescript-setup" is the project name. You can user yours. 
 // --template typescript - installs the Typescript

ESLint setup:

What is ESLint? ESLint is an open-source JavaScript linting utility

check more details https://eslint.org/

Install ESLint as a dev dependency
```
 npm install eslint --save-dev
```
After installing ESLint, we need to create a configuration file with a below command
```
 npx eslint --init
```

A series of questions will be asked. Answer them according to your project requirement. I am selecting the following options

The above steps create a .eslintrc.json in the root path of the project

Contents of the .eslintrc.json would be like below

{
   "env":{
      "browser":true,
      "es2021":true
   },
   "extends":[
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:react/recommended"
   ],
   "parser":"@typescript-eslint/parser",
   "parserOptions":{
      "ecmaFeatures":{
         "jsx":true
      },
      "ecmaVersion":"latest",
      "sourceType":"module"
   },
   "plugins":[
      "@typescript-eslint",
      "react"
   ],
   "rules":{

   }
}

To let ESLint correctly resolve TS imports/exports from Typescript and .tsx files, we would need to add the additional dependencies like eslint-plugin-import and eslint-import-resolver-typescript eslint-import-resolver-typescript eslint-plugin-import

Install eslint-import-resolver-typescript and eslint-plugin-import as development dependencies.
```
 npm i eslint-import-resolver-typescript eslint-plugin-import --save-dev
```
To make the resolver packages work properly add the below in the .eslintrc.json like below
```
 "settings":{
    "import/resolver":{
       "typescript":{}
    }
 }
```
If you haven’t already installed ESLint extension, add that to the VSCode

Prettier Setup:

What is Prettier? Prettier is an opinionated code formatter

check more details here: https://prettier.io/

To install Prettier and make it work with ESLint, the following packages need to be installed as dev dependencies. Installing the eslint-config-prettier and eslint-plugin-prettier packages will resolve any conflicts between Eslint and Prettier.
```
 npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
```
At the root of the project, create a prettier config file using the below command, this will create a .prettierrc file in the root path
```
 touch .prettierrc
```
Add the required configurations in the config file like below

Check more configurations https://prettier.io/docs/en/options.html

{
   "printWidth":80,
   "tabWidth":2,
   "singleQuote":true,
   "semi":true,
   "trailingComma":"all"
}

Add “prettier” to the .eslintrc.json under the plugins and extends, the final JSON file would like below

 {
    "env":{
       "browser":true,
       "es2021":true
    },
    "extends":[
       "eslint:recommended",
       "plugin:@typescript-eslint/recommended",
       "plugin:react/recommended",
       "prettier"
    ],
    "parser":"@typescript-eslint/parser",
    "parserOptions":{
       "ecmaVersion":"latest",
       "ecmaFeatures":{
          "jsx":true
       },
       "sourceType":"module"
    },
    "plugins":[
       "@typescript-eslint",
       "react",
       "prettier"
    ],
    "rules":{

    },
    "settings":{
       "import/resolver":{
          "typescript":{

          }
       }
    }
 }

Install the Prettier VSCode extension if you haven’t installed it already

The Above steps will configure the Prettier and ESLint tools in React Typescript project. Happy Coding!

How to set up ESLint and Prettier in React TypeScript 5 project? 2023

let's do step by step set up of ESLint and Prettier in React Typescript 5 project.

Create React Project with Typescript Template:

ESLint setup:

Prettier Setup:

Did you find this article valuable?