How to setup eslint for react typescript projects
Tags: react, eslint, typescript, prettier
Published: 2021-04-25 16:24:06

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](https://eslint.org/docs/user-guide/configuring/#extending-configuration-files)

```
{
  "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](https://github.com/yannickcr/eslint-plugin-react)
* plugin:@typescript-eslint/recommended - Turns on rules from TypeScript-specific plugin. `npm install --save-dev @typescript-eslint/eslint-plugin` [details](https://www.npmjs.com/package/@typescript-eslint/eslint-plugin)

* plugin:react-hooks/recommended - Eslint configuration for react-hooks by create-react-app [details](https://www.npmjs.com/package/eslint-plugin-react-hooks). 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](https://github.com/prettier/eslint-config-prettier)


### 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](https://github.com/typescript-eslint/typescript-eslint/blob/HEAD/docs/getting-started/linting/README.md)

#### 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](https://www.npmjs.com/package/@typescript-eslint/parser#configuration)

### 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](https://eslint.org/docs/user-guide/configuring/configuration-files#adding-shared-settings)
[eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react#configuration)

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. :smile: