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:

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/

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

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

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

Prettier Setup:

What is Prettier? Prettier is an opinionated code formatter

check more details here: 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

{
  "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

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