How to setup eslint for react typescript projects

Lee Jian Howe — Sun, 25 Apr 2021 16:24:06 +0000

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. 😄

Hello World

Lee Jian Howe — Tue, 13 Apr 2021 16:05:57 +0000

Today, I found out about dev. to.

A great place for tech enthusiasts. It has a great community of developers from different backgrounds. Many articles to read for new developers like myself and for experienced developers to share their knowledge.

I will share with you my journey in coming from a non-tech background into tech. I think many of you here are in the same shoes as I am.

Join me in my journey as I share my experiences. hope you like my articles. would love to hear your thoughts and experiences.❤️

DEV Community: Lee Jian Howe