• Docs/
  • Selected guides/
  • Setting up ESLint

ESLint for TypeScript development (React)

Default setup

In Codifly NEST seeds (front end seed, back end seed, Digipolis seeds, ...) the linter is already correctly configured.

Learn by Example: setting up ESLint manually

However, to be able to troubleshoot ESLint issues or to setup ESLint manually (in cases where it is not possible to use Codifly NEST seeds), it is useful to have some basic knowledge regarding ESLint. For this reason, the information in this section is useful for any serious JavaScript developer.

In February 2019 Palantir (the creators of TSLint) have decided to deprecate TSLint and support the migration to ESLint as the standard linter for both TypeScript and JavaScript. Here is a quick overview on how to setup ESLint for TypeScript development in React for both new projects or when migrating from TSLint. This configuration also uses Prettier for formatting and autofixing problems.

Install packages

Install the necessary packages as dev dependencies using your favorite package manager. By default ESLint autofix will not sort imports so if you want this functionality be sure to add the necessary plugin.

Start by installing the ESLint packages: the ESLint library, parser to lint typescript code and plugin containing TypeScript specific rules

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

Then install the Prettier packages:

  • the Prettier library and ESLint plugins
  • config that disables some rules that might conflict with Prettier
  • plugin that enables running Prettier as ESLint rule
yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier

(OPTIONAL) Install the sort imports plugin

yarn add --dev eslint-plugin-simple-import-sort

Config files

Both ESLint and Prettier have .rc files that can be written in JS, JSON or YAML. Note that YAML and JS can contain comments which might be better for bigger config files where the use of some rules needs to be clarified. JS is however more used and looks more closely to JSON examples so expect to see more examples of this kind instead of YAML.

To generate the ESLint config file simply use the CLI using npx.

npx eslint --init

This command will run a wizard to setup your config file to your needs. Be sure to check that you're using TypeScript and React. This will add the necessary plugins to the file.

NOTE: ESLint will ask if you want to install the necessary packages at the end of the wizard. This can however only be done using npm so be sure to remove the npm lock file (package-lock.json) and run yarn afterwards to update its lock file (yarn.lock).

Be sure to manually add a Prettier config file: 

{
  "singleQuote": true,
  "trailingComma": "all"
}

The config file that the wizard has set up still needs to be modified a bit. Extend the TypeScript, Prettier and Prettier plugin rules. Your extends should look like this (examples are from a JS config file):

extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended'
]

ESLint's no-unused-vars rule will not recognize TypeScript enums so this rule needs to be overriden. Luckily the TypeScript plugin has this functionality. Add '@typescript-eslint/no-unused-vars': 'error' to your rules.

React's version needs to be specified in the config file. Add a settings section and set the version to be auto-detected:

settings: {
  react: {
      version: 'detect'
    }
}

(OPTIONAL) Add the simple-import-sort to your plugins section, turn on its rule and turn off the eslint rule like so:

'sort-imports': 'off',
'simple-import-sort/sort': 'error',

Refer to the package's README for more info on how to configure the plugin (default configuration works fine though).

ESLint CLI

ESLint can be used from the command line to report and fix linter errors (if possible). For convenience, be sure to add this to your project scripts to run with yarn or to use in pre-push/commit hooks. Consider packages such as lint-staged and prettier-quick to only lint/format staged files instead of the whole project.

"scripts": {
  "lint": "eslint '*/**/*.{ts,tsx}'"
  "lint:fix": "eslint '*/**/*.{ts,tsx}' --quiet --fix"
}

This concludes the overview for setting up ESLint with Prettier in your React TypeScript environment. Happy (clean) coding!