为什么使用流程时ESLint会引发错误？

Question

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

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以识别这是流类型声明？

Answer 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"] }]
    }
}