How to use with Flowtype?

[lucianomlima]

My package.json for a react-native app:

{
  "devDependencies": {
    "jest": "^23.4.0",
    "jest-runner-eslint": "^0.6.0",
  },
  "jest": {
    "projects": [
      {
        "displayName": "test",
        "preset": "react-native",
        "timers": "fake",
        "setupTestFrameworkScriptFile": "./src/tests/setup.js",
        "transformIgnorePatterns": [
          "node_modules/(?!((jest-)?react-native|react-clone-referenced-element|@expo(nent)?/.*|react-navigation|native-base|rn-placeholder|instabug-reactnative))"
        ],
        "transform": {
          "^.+\\.js$": "<rootDir>/src/tests/jest-preprocessor.js"
        },
        "snapshotSerializers": [
          "enzyme-to-json/serializer"
        ]
      },
      {
        "displayName": "lint",
        "runner": "jest-runner-eslint",
        "testMatch": [
          "<rootDir>/src/**/*.js"
        ]
      }
    ]
  },
  "jest-runner-eslint": {
    "cliOptions": {
      "ignorePattern": [
        "<rootDir>/src/**/__tests__",
        "<rootDir>/src/**/__generated__"
      ],
      "plugin": [
        "jsx-control-statements",
        "flowtype"
      ]
    }
  }
}

My .eslintrc file:

{
  "extends": "airbnb",
  "parser": "babel-eslint",
  "plugins": [
    "jsx-control-statements",
    "flowtype"
  ],
  "globals": {
    "fetch": true,
    "WebSocket": true,
    "__DEV__": true,
    "If": true,
    "Else": true,
    "For": true,
    "Choose": true,
    "When": true,
    "Otherwise": true
  },
  "ecmaFeatures": {
    "modules": true,
    "arrowFunctions": true,
    "destructuring": true
  },
  "rules": {
    "flowtype/define-flow-type": 1,
    "flowtype/use-flow-type": 1,
    "import/prefer-default-export": 0,
    "import/no-named-as-default": 0,
    "import/no-unresolved": [2, { "ignore": ["^[~]"] }],

    "new-cap": 0,
    "no-console": [2, { "allow": ["warn", "error"] }],

    "no-unused-vars": [2, { "argsIgnorePattern": "^_$", "varsIgnorePattern": "^_$" }],

    "react/prop-types": 0,
    "react/sort-comp": 0,
    "react/require-default-props": 0,
    "react/no-unescaped-entities": 0,
    "import/extensions": [2, {
      "js": "never",
      "graphql": "always",
      "png": "always"
    }],

    "comma-dangle": [2, {
      "arrays": "always-multiline",
      "objects": "always-multiline",
      "imports": "always-multiline",
      "exports": "always-multiline",
      "functions": "ignore"
    }],

    "class-methods-use-this": 0,
    "consistent-return": 0,
    "arrow-parens": [2, "as-needed"],

    "global-require": 0,

    "jsx-control-statements/jsx-choose-not-empty": 2,
    "jsx-control-statements/jsx-for-require-each": 2,
    "jsx-control-statements/jsx-for-require-of": 2,
    "jsx-control-statements/jsx-if-require-condition": 2,
    "jsx-control-statements/jsx-otherwise-once-last": 2,
    "jsx-control-statements/jsx-use-if-tag": 2,
    "jsx-control-statements/jsx-when-require-condition": 2,
    "jsx-control-statements/jsx-jcs-no-undef": 2,
    "no-undef": 0,
    "no-underscore-dangle": 0,

    "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }],
    "react/jsx-no-undef": [2, { "allowGlobals": true }],
  },
  "env": {
    "jest": true,
    "jsx-control-statements/jsx-control-statements": true
  },
  "import/resolver": {
    "babel-plugin-root-import": {
      "extensions": [".js"]
    }
  }
}

Using flowtype and jsx-control-statements plugins but I always got these errors:

  141:10  error  'navigationOptions' is not defined                             jsx-control-statements/jsx-jcs-no-undef

# below is a type
  141:61  error  'NavigationScreenProp' is already declared in the upper scope  no-shadow

I add plugin in cliOptions but doesn't work.

[SimenB]

Do you now get those errors if you run eslint outside of this runner?

[lucianomlima]

No. Outside this runner, no errors is reported.

[lucianomlima]

I'll create a repo with a example, maybe can help!

[rogeliog]

@lucianomlima thanks! 😄