eslint-plugin-flowtype does not validate

问题:

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

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

回答2:

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.

回答3:

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.