为什么 ESLint 在使用 flow 时会抛出错误？答案

【问题标题】：Why does ESLint throw error while using flow?为什么 ESLint 在使用 flow 时会抛出错误？
【发布时间】：2019-08-28 00:31:42
【问题描述】：

我已经使用 RN 版本 0.59 初始化了一个新的 react-native 项目。我已经设置了 eslint（使用 airbnb-ruleset）、babel 和 flow：

package.json：

"devDependencies": {
"@babel/core": "^7.4.0",
"@babel/runtime": "^7.4.2",
"@react-native-community/eslint-config": "^0.0.3",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.5.0",
"babel-preset-flow": "^6.23.0",
"eslint": "^5.15.3",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"flow-bin": "^0.96.0",
"jest": "^24.5.0",
"metro-react-native-babel-preset": "^0.53.1",
"react-test-renderer": "^16.8.5"
},

babel.config.js

module.exports = {
  presets: ["module:metro-react-native-babel-preset", "flow"]
};

eslintrc.json

{
    "env": {
        "es6": true,
        "node": true,
        "jest": true
    },
    "extends": "airbnb",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "react/jsx-filename-extension": [1, { "extensions": [".js"] }]
    }
}

问题： 如果我运行 eslint，会出现以下错误：

  8:17  error  Parse errors in imported module '../app/App': Unexpected token Props (19:6)  import/no-named-as-default
  8:17  error  Parse errors in imported module '../app/App': Unexpected token Props (19:6)  import/no-named-as-default-member

如何以正确的方式配置 eslint 以识别这是一个流类型声明？

【问题讨论】：

标签： react-native babeljs eslint flowtype

【解决方案1】：

我想通了。首先我安装了eslint-plugin-flowtype 之后，我像这样编辑了 .eslintrc.json：

添加parser: "babel-eslint",
添加到extends"plugin:flowtype/recommended"`
添加到plugins："flowtype"

之后，它就起作用了。

文件现在看起来像这样：

{
    "parser": "babel-eslint",
    "env": {
        "es6": true,
        "node": true,
        "jest": true
    },
    "extends": "plugin:flowtype/recommended",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "flowtype"
    ],
    "rules": {
        "react/jsx-filename-extension": [1, { "extensions": [".js"] }]
    }
}

【讨论】：