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 with this plugin. Add both eslint:recommended and plugin:@typescript-eslint/eslint-recommended:

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

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

{
  "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