DEV Community

Quizzesforyou
Quizzesforyou

Posted on • Originally published at Medium

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

3.After installing ESLint, we need to create a configuration file with a below command



npx eslint --init 


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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

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



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


Enter fullscreen mode Exit fullscreen mode

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



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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)