ESLint Plugin TypeScript

Installation

Make sure you have TypeScript and @typescript-eslint/parser installed, then install the plugin:

npm i @typescript-eslint/eslint-plugin --save-dev

It is important that you use the same version number for @typescript-eslint/parser and @typescript-eslint/eslint-plugin.

Note: If you installed ESLint globally (using the -g flag) then you must also install @typescript-eslint/eslint-plugin globally.

Usage

Add @typescript-eslint/parser to the parser field and @typescript-eslint to the plugins section of your .eslintrc configuration file:

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"]
}

Then configure the rules you want to use under the rules section.

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/rule-name": "error"
  }
}

You can also enable all the recommended rules for our plugin. Add plugin:@typescript-eslint/recommended in extends:

{
  "extends": ["plugin:@typescript-eslint/recommended"]
}

You can also use eslint:recommended (the set of rules which are recommended for all projects by the ESLint Team) with this plugin. As noted in the root README, not all eslint core rules are compatible with TypeScript, so you need to add both eslint:recommended and plugin:@typescript-eslint/eslint-recommended (which will adjust the one from eslint appropriately for TypeScript) to your config:

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ]
}

As of version 2 of this plugin, by design, none of the rules in the main recommended config require type-checking in order to run. This means that they are more lightweight and faster to run.

Some highly valuable rules simply require type-checking in order to be implemented correctly, however, so we provide an additional config you can extend from called recommended-requiring-type-checking. You would apply this in addition to the recommended configs previously mentioned, e.g.:

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
  ]
}

Pro Tip: For larger codebases you may want to consider splitting our linting into two separate stages: 1. fast feedback rules which operate purely based on syntax (no type-checking), 2. rules which are based on semantics (type-checking).

NOTE: If you want to use rules which require type information, you will need to specify a path to your tsconfig.json file in the "project" property of "parserOptions". If you do not do this, you will get a runtime error which explains this.

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/restrict-plus-operands": "error"
  }
}

See @typescript-eslint/parser's README.md for more information on the available "parserOptions".

Note: Make sure to use eslint --ext .js,.ts since by default eslint will only search for .js files.

Usage with Prettier

Install eslint-config-prettier to disable our code formatting related rules:

{
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "prettier/@typescript-eslint"
  ]
}

Note: Make sure you have eslint-config-prettier@4.0.0 or newer.

Usage with Airbnb

Airbnb has two configs, a base one eslint-config-airbnb-base and one that includes rules for React eslint-config-airbnb.

First you'll need to install the config according to the instructions in one of the links above. npx install-peerdeps --dev eslint-config-airbnb or npx install-peerdeps --dev eslint-config-airbnb-base should work if you are using npm 5+.

Then you should add airbnb (or airbnb-base) to your extends section of .eslintrc. You might also want to turn on plugin:@typescript-eslint/recommended as well to enable all of the recommended rules.

{
  "extends": ["airbnb-base", "plugin:@typescript-eslint/recommended"]
}

Note: You can use Airbnb's rules alongside Prettier, see Usage with Prettier

Supported Rules

Key: ✔️ = recommended, 🔧 = fixable, 💭 = requires type information