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 (1)

Collapse
 
awolf81_31 profile image
Alexander Wolf •

Thanks for the great post.

The call npx eslint --init generates a esling.config.js. I think the init code changed but that's OK. The question for the config file format is removed and it defaults to a js config.

I only struggled a bit with where to add the import/resolver and prettier plugin to the eslint.config.js. But just adding it as a object to the array should work:

export default [
  // ...other config
  pluginReact.configs.flat.recommended,
  // Add Prettier integration & import/resolver
  {
    settings: {
      'import/resolver': {
        typescript: {},
      },
    },
    extends: ['plugin:prettier/recommended'], // Enforces Prettier rules
  },
]
Enter fullscreen mode Exit fullscreen mode

And to run on save I have added the following to .vscode/settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}
Enter fullscreen mode Exit fullscreen mode

Now, it is working for me.

Happy coding.
Bye Alex

Read next

abhay_yt_52a8e72b213be229 profile image

Mastering Docker Security: A Comprehensive Guide to Protecting Your Containers

Abhay Singh Kathayat -

shrsv profile image

How Adam Smith Differentiates Money, Capital, Wealth & Goods

Shrijith Venkatramana -

qpwo profile image

How to run llama 405b bf16 with gh200s

Luke Harold Miles -

vellanki profile image

AWS ECR Made Easy: Securely Store and Manage Your Container Images

Koti Vellanki -