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;?

Reticule

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

Breath

Thank you for the answer! Do you know is it possible to use flowtype + eslint? I mean is it possible to eslint will show errors of flowtype when I run eslint App.js? – Reticule

It's possible but nobody that I'm aware of has written something to show Flow results in ESLint. Personally I don't think it would be a good idea. Better to use Flow as intended and use ESLint as intended, as separate tools. – Breath

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.

Peephole

Answer 3

eslint-plugin-flowtype doesn't appear to have a rule to check that.

The purpose of the linter-plugin is to enforce stylistic things or convention things (such as always annotating function return types), not to check types themeselves.

You'll want to run Flow itself to check that the types are actually correct.

Ambivert

Answer 4

Disable the flowtype rule in .eslintrc file:

"rules": {
  "flowtype/no-types-missing-file-annotation": 0
}

Monosome