How to setup eslint for react typescript projects

In this article, i am going to show you how i set up basic linting with eslint for react typescript projects.

There are many articles online regarding setting up eslint for react. It was a real mess and difficult to figure out which settings to use and what packages to install. After sieving through countless articles and resources, i have finally found a setup which covers all the basics in a react project.

I normally use npx create-react-app [projectname] --template typescript to start my react project with typescript template. This template installs eslint for you.

However, if you do not, you will need to install the eslint and typescript package. npm install eslint typescript

I would recommend installing and setting up eslint for every project instead of using your own global eslint package/settings. Each project might have different requirements. Your .eslintrc file will be configured to the required linting for each of your projects. It ensures consistency in code for all developers working on the project.

---

First, in your react project, create a .eslintrc.json file in the root directory.

Next, in the json file, use the following set up. For more details on configuring eslint, you can find out more from the eslint website

{
  "env": {
    "browser": true,
    "es6": true,
    "jest": true
  },
  "rules": {
    "no-console": "error",
    "import/first": "error",
    "react/prop-types": "off"
  },
  "extends": [
    "react-app",
    "react-app/jest",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "root": true,
  "plugins": ["react", "@typescript-eslint"],
  "parserOptions": {
    "ecmaVersion": 11,
    "ecmaFeatures": {
      "jsx": true
    },
    "project": "./tsconfig.json"
  },
  "settings": {
    "react": {
      "pragma": "React",
      "version": "detect"
    }
  }
}

---

So what are the configurations being set?

env

Enables the use of global env variables in your code. Enabling the env variables will prevent eslint from giving errors.

rules

Configure/enable/disable specific rules from the plugins and configs

extends

Extends configuration files from npm packages.

• react-app - Eslint configuration used by create-react-app
• react-app/jest - Eslint configuration used by create-react-app
• eslint:recommended - Eslint recommended configuration by eslint
• plugin:react/recommended - Recommended react linting configs details

• plugin:@typescript-eslint/recommended - Turns on rules from TypeScript-specific plugin. npm install --save-dev @typescript-eslint/eslint-plugin details

• plugin:react-hooks/recommended - Eslint configuration for react-hooks by create-react-app details. Comes installed together with npx create-react-app

• prettier - Turns off all rules that are unnecessary or might conflict with Prettier. You will need to install this package for you to use it. npm install --save-dev eslint-config-prettier
  details

plugins

Plugins from npm packages which configures and rules

• react - For eslint-plugin-react
• @typescript-eslint - For parser and extension @typescript-eslint/recommended

parser

• Use @typescript-eslint/parser for typescript to work with eslint. This allows Eslint to understand TypeScript syntax. Install typescript-eslint npm install --save-dev @typescript-eslint/parser details

parserOptions

• ecmaVersions - sets the ECMAScript version you want to support for your project
• ecmaFeatures - set jsx to true for React
• project - Tells Eslint where to find the root tsconfig file of your project. If you have multiple tsconfigs in the project, you can define where the tsconfigs are found. details

settings

The settings made here will be shared across all rules for plugins. For eslint-plugin-react, it will require some defaults setttings:

• pragma: "React" - defaults to React
• version: "detect" - auto detects the version of React eslint eslint-plugin-react

Remember to install vscode extension Eslint and Prettier in order for linting and styling to work. With this configuration, you are all set to write in typescript for any React projects.

---

You can add or remove plugins/configs which you find more suitable for your style. Enable rules like "no-console" which will give an error when compiling. Good coding practice for preventing unwanted console logs in your app. Or "import/first" where all import modules must come first at the top of the file. Catches any import errors during compilation.

Hope this article was useful for you. Leave a comment, like or share if you found it useful. 😄