Configure Typescript Linting in React Apps

Note: This article was originally published on Medium.

TL;DR: This article is about configuring Typescript linting in your old React apps which are configured using babel-eslint.

Recently, I had to setup typescript linting in one of my app for which I had to read different articles and tried a few plugins and tools to setup Typescript linting compatible with my app, so I thought to write a single article for people who fall in my case.

Photo by timJ on Unsplash

Typescript has been officially introduced in react with create-react-app v2.1.0, so I had to configure typescript linting in my app which was developed before that. Before linting, you must have Typescript installed in your app and tsconfig.json file in your app. For your new installed apps you can get tsconfig.json by default with --typescript tag,

yarn create react-app my-app --typescript

For, older apps, you have to manually install typescript and setup tsconfig.json, you can easily get a lot of articles on that, I won’t dive deeper into that.

My main focus here is to setup linting on those apps. When I started to do this task, the first thing I got in my mind was tslint, but soon I got to know on it’s github repo:

⚠️ TSLint will be deprecated some time in 2019. See this issue for more details: Roadmap: TSLint → ESLint.

So, the good thing is I don’t need a transition from eslint so my next problem was my .eslintrc using babel-eslint parser, so I tried a lot of typescript linting plugins to work with it, but none of them worked because:

Babel does now support parsing (but not type-checking) TypeScript source code — What about Babel and babel-eslint?

My objective was to find a plugin or parser that would not be conflicting with prettier and my other setup linting plugins like airbnb, ava, eslint, react and prettier/react.

After reading a lot of articles, trying a few different plugin and parser combinations, I got to find @typescript-eslint which worked with all my configured plugins.

@typescript-eslint/parser - An ESLint-specific parser which leverages typescript-estree and is designed to be used as a replacement for ESLint's default parser, espree.

To setup @typescript-eslint in your app, you have to install @typescript-eslint/parser and replace in your .eslintrc file

{
   "parser": "@typescript-eslint/parser",
    ...,
}

There is a plugin, you have to use with @typescript-eslint to work with your eslint rules that is @typescript-eslint/eslint-plugin

@typescript-eslint/eslint-plugin - An ESLint-specific plugin which, when used in conjunction with @typescript-eslint/parser, allows for TypeScript-specific linting rules to run.

To setup @typescript-eslint/eslint-plugin with your parser, add it in your .eslintrc file plugins, you can also add prettier/@typescript-eslint and your other linting plugins just as mine

{
   "parser": "@typescript-eslint/parser",
   "extends": [    
      "plugin:@typescript-eslint/recommended",
      "prettier/@typescript-eslint",
      "airbnb",
      "plugin:ava/recommended",
      "eslint:recommended",
      "plugin:react/recommended",
      "prettier",
      "prettier/react",
      ...,
     ],
   "parserOptions": { 
      "project": "./tsconfig.json",
      "ecmaFeatures": {
          "jsx": true,
          ...,
   },
  ...
}

One point to remember is @typescript-eslint and @typescript-eslint/eslint-plugin should have same version number.

You also need to specify your app’s tsconfig.json in the parser options. This setting is required if you want to use rules which require type information.

To enable parsing JSX (if you still have .jsx files), you need to enable jsx in ecmaFeatures.

If you are using this on eslint v4, also set useJSXTextNode to false in ecmaFeatures, this is by default true. If this is false, the parser creates the AST of JSX texts as the legacy style.

You are all set to go on. The scripts to install these packages are as under, Enjoy!

npm install @typescript-eslint/parser --save-dev
or yarn add @typescript-eslint/parser --dev

npm install @typescript-eslint/eslint-plugin --save-dev
or yarn add @typescript-eslint/eslint-plugin --dev