eslint-plugin-flowtype does not validate

Question

I am trying to configure eslint + babel-eslint + eslint-plugin-react + eslint-plugin-flowtype

I have the following devDependencies in package.json:

"babel-eslint": "^7.1.1",
"eslint": "^3.10.2",
"eslint-config-airbnb": "^13.0.0",
"eslint-plugin-flowtype": "^2.25.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.7.1"

And the following .eslinrc:

{
  "parser": "babel-eslint",
  "plugins": [
    "flowtype"
  ],
  "extends": [
    "airbnb",
    "plugin:flowtype/recommended"
  ],
  "rules": {
    "max-len": [1, 80, 2, {"ignoreComments": true}],
    "prop-types": [0],
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "react/prefer-stateless-function": [
      0,
      {
        "ignorePureComponents": true
      }
    ],
    "no-console": 0
  },
  "settings": {
    "flowtype": {
      "onlyFilesWithFlowAnnotation": true
    }
  }
}

I wrote simple code example in App.js:

function foo() {
  const a: string = 1;
  return a;
}

async function bar() {
  const b = await foo();
  return b;
}

If I launch eslint src/App.js then eslint does not show any messages. If I add "flowtype/require-return-type": 2 into .eslintrc then eslint shows:

error  Missing return type annotation  flowtype/require-return-type
error  Missing return type annotation  flowtype/require-return-type
✖ 2 problems (2 errors, 0 warnings)

But I don't understand why const a: string = 1; is valid. How to enable checking type of const a: string = 1;?

Answer 1

eslint-plugin-flowtype is not Flow. It is an extension to ESLint that has a collection of lint rules relevant only to Flow's additional syntax.

For example, there is a rule that lets you enforce whether to use commas or semicolons in Flow object types (e.g. type Foo = {bar: string, baz: number} vs type Foo = {bar: string; baz: number})

However, to actually get typechecking you need to install Flow, and follow the instructions there to get set up. In short, it involves making sure that you have a .flowconfig file at your project root, making sure that you have the // @flow header on all your files, and then running flow status from the command line (or using Nuclide or another editor with Flow support).

Answer 2

If you want to have ESLint use Flow to validate your code, the correct plugin to use is eslint-plugin-flowtype-errors.

https://www.npmjs.com/package/eslint-plugin-flowtype-errors

As others wrote, eslint-plugin-flowtype only verifies that code with FlowType statements are syntactically correct. It does not actually do Flow type validation.