ESLint with Arbnb config and Facebook Flow together

Question

I am using ESLint in a project and want to use Facebook flow as well, But I am getting warnings from ESLint on flow type annotations.

I have .flowconfig and .eslintrc in project root.

.eslintrc:

// When you write javascript you should follow these soft rules and best practices
// https://github.com/airbnb/javascript

// This is a link to best practices and enforcer settings for eslint
// https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb

// Use this file as a starting point for your project's .eslintrc.
{
  "extends": "airbnb",

  "plugins": [
    "flow-vars"
  ],
  "rules": {
    "flow-vars/define-flow-type": 1,
    "flow-vars/use-flow-type": 1
  }
}

What should I do to make it work? Is there a way to run flow in watch task together using webpack?

Answer 1

flow-vars is deprecated!

This is the current proper way of getting Flow running with Airbnb's (with eslint-plugin-flowtype):

This assumes you already have flow installed.

npm install --save-dev eslint babel-eslint eslint-plugin-flowtype

.eslintrc

{
  "extends": [
    "airbnb",
    "plugin:flowtype/recommended"
  ],
  "parser": "babel-eslint",
  "plugins": [
    "flowtype"
  ]
}

Want custom configuration instead?

Answer 2

For me, the problem was solved by adding "parser": "babel-eslint" to my .eslintrc.

(I had to run npm install babel-eslint --save-dev first though).

{
  "extends": "airbnb",
  "parser": "babel-eslint", // <--
  "plugins": [
    "flow-vars"
  ],
  "rules": {
    "flow-vars/define-flow-type": 1,
    "flow-vars/use-flow-type": 1
  }
}