If you are wondering how to lint Typescript code, there are two options available at the moment: TSLint or ESLint. Both can make sure to keep your code clean but TSLint just as the name indicates, is a linter only for Typescript whereas ESLint works mostly for Javascript.

Most of the people use TSLint these days but the owner’s latest decision might change this in the near feature.

⚠️ TSLint will become deprecated some time in 2019. See this issue for more details: Roadmap: TSLint → ESLint. If you’re interested in helping with the TSLint/ESLint migration, please check out our OSS Fellowship program.

README.md – Github TSLint

Basically, it means that ESLint will get better support for typescript language (finally!) and conflicting rules between ESLint and TSLint will not be a problem anymore.

Add Typescript support to ESLint

First of all, you need to install all typescript dependencies for ESLint:

yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

Then install prettier and needed additional dependencies like:

• eslint-config-prettier – Disable ESLint rules that might conflict with prettier.
• eslint-plugin-prettier – Run Prettier as an ESLint rule and reports differences as individual ESLint issues.
• eslint-plugin-react – React specific linting rules for ESLint.

yarn add prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react -D

Now is time to add .eslintrc.js file with our configuration:

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
      jest: true,
    },
  },
  plugins: ['react', '@typescript-eslint', 'prettier'],
  env: {
    browser: true,
    jasmine: true,
    jest: true,
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
  rules: {
    '@typescript-eslint/explicit-function-return-type': 0,
    '@typescript-eslint/no-unused-vars': 'error',
  },
};

You’re probably wondering why I disabled those two rules. Let me explain:

• @typescript-eslint/explicit-function-return-type – In React’s components you don’t have to always return something from a function inside function component. I know that a lot of developers gets frustrated because of that rule so I disabled it.
  If you are up to more functional approach or/and using KISS principle (which I highly recommend!) then feel free to remove this line. ?
• @typescript-eslint/no-unused-vars – current version will throw only a warning. For me it wasn’t enough. I wanted to be sure that I don’t left any redundant code in the codebase.

Add prettier to format code

After that we can go further and add .prettierrc.js file for prettier configuration (feel free to edit this if you like).

module.exports = {
  semi: true,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 100,
};

Ignore files that shouldn’t be linted by ESLint

Before we run ESLint on our files we need to ignore serviceWorker.js file that it comes together with create-react-app. Unfortunately to ignore files in ESLint you have to add eslintIgnore entry to your package.json:

  "eslintIgnore": [
    "serviceWorker.js"
  ],

Create-React-App v3 doesn’t support .eslintignore file so it’s the only way to do it without ejecting CRA or overriding CRA settings by react-app-rewired or rescripts .

Add script to run our linter

In package.json you need to add a new script for linting that will allow you to run the configured linter:

  "scripts": {
    "lint": "eslint 'src/**/**.{ts,tsx,js,jsx}'",
  },

Your next step is to run yarn lint and see if everything was configured correctly. If so, you might see some warnings or even errors from your codebase (or not because you don’t do mistakes as a developer! ?).

After all those steps you have configured ESLint and Prettier for Create-react-app project with Typescript language.