Install the dependencies

yarn add -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin 

Then you can simply use the recommended config if you like:

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

Otherwise, you can configure our plugin yourself:

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

It would probably be good for us to document this considering it is probably a very common use case.

Hi, I have a working airbnb + typescript + prettier .eslintrc.js, this might help you: eslint/eslint#8813 (comment)

I've added a PR that adds some instructions in #177. Feedback welcome.

To make it work on TSLint's codebase (you've got to try your instructions somewhere 😄) I had to disable no-useless-constructor, I'm guessing that this is due to #15.

  "rules": {
    "no-useless-constructor": "off"
  }

yarn add -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin 

Sadly this did not work. I run that command after reverting the suggested commands.

npm install eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin --save -dev

Then I had to install some peer dependencies

npm i -save -dev eslint-plugin-jsx-a11y@^6.1.1 acorn@^6.0.0

and extended .eslintrc.json with the suggestion

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

But the App.tsx does not get linted for airbnb styles. I setup VS-Code workspace settings with

  "eslint.enable": true,
  "prettier.eslintIntegration": true,
  "eslint.run": "onSave",

so after saving I can see that prettier is applying some airbnb rules. But the usual styleguide gets igonored. I tested it with react/jsx-no-bind from here

@bradzacher I refer to the following configuration.

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

This is allowing rules in @typescript-eslint/recommended to take precedence? In particular indent, no-unused-vars and no-use-before-define rules in @typescript-eslint/recommended are not similar to the equivalent ESLint rules in airbnb.

For TypeScript variant of Airbnb, I concluded that it would not be as straightforward, which is what I'm trying to achieve in my repo.

No, it does work that way, because the base rule indent is a completely separate rule to our rule @typescript-eslint/indent.
So eslint doesn't share the config between them.

In our recommended, we do switch off the base rules that conflict, and turn on our version

https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/src/configs/recommended.json

however, note you'll lose airbnb's config for those rules, and it'll instead just use the default config for the rule.