How to set up ESLint and Prettier in React TypeScript 5 project? 2023
Published: 2023-07-29 18:44:51

![](https://cdn-images-1.medium.com/max/1024/1*g9weKSpENxxNzHdckVCIBg.png)

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:**

1. 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/](https://eslint.org/)


2.Install ESLint as a dev dependency

```
npm install eslint --save-dev
```


3.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

![](https://cdn-images-1.medium.com/max/1024/1*QiWcflw6g2in0POiki1lFw.png)


![](https://cdn-images-1.medium.com/max/1024/1*GnQA78l783xMQHmMB9Nd0Q.png)


![](https://cdn-images-1.medium.com/max/1024/1*c3yA-nqdo2lQE1t37NVaAQ.png)


![](https://cdn-images-1.medium.com/max/1024/1*Cj0L_6rGSvLkmvqbSissGQ.png)


![](https://cdn-images-1.medium.com/max/1024/1*uNUxQ2IW97wL02MnRrVi5g.png)


![](https://cdn-images-1.medium.com/max/1024/1*FW3vweDjSqLMrZ05cmlQjg.png)


![](https://cdn-images-1.medium.com/max/1024/1*OAn-C2Dfjd_B2z3FfH108w.png)


![](https://cdn-images-1.medium.com/max/1024/1*mvoNcnR-ArkN3Q3rX15BxQ.png)


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


![](https://cdn-images-1.medium.com/max/584/1*KCeakO-YysnukhOX8B4HYg.png)

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](https://www.npmjs.com/package/eslint-import-resolver-typescript)
- [eslint-plugin-import](https://www.npmjs.com/package/eslint-plugin-import)


4.Install eslint-import-resolver-typescript and eslint-plugin-import as development dependency.

```
npm i eslint-import-resolver-typescript eslint-plugin-import --save-dev
```


5.To make the resolver packages work properly add the below in the  **.eslintrc.json** like below

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


6.If you haven’t already installed ESLint extension, add that to the VSCode

![](https://cdn-images-1.medium.com/max/1024/1*9xEW9h8mSVgE7_0R468qvA.png)

### **Prettier Setup:**

> What is Prettier? Prettier is an opinionated code formatter

check more details here: [https://prettier.io/](https://prettier.io/)


7.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
```


8.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
```

9.Add the required configurations in the config file like below

Check more configurations [https://prettier.io/docs/en/options.html](https://prettier.io/docs/en/options.html)

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


10.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" // prettier
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "ecmaFeatures": {
      "jsx": true
    },
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "react", "prettier"], // prettier
  "rules": {},
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}
```


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

![](https://cdn-images-1.medium.com/max/1024/1*2XdsjhtgdUHjlgJXhlj-PQ.png)


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