Flow + Standard: Parsing error on type declaration

I have installed flow and standard and everything works perfectly form the CLI. I am struggling to make IDE give good suggestions though. I followed this basic example https://flow.org/en/docs/react/components/

and keep getting such error from standard in IDE (both WebStorm and RubyMine)

How can I make Flow and Standard work well together?

11 comments
Comment actions Permalink

Been there, done that. As I mentioned - everything works perfectly fine in CLI

0
Comment actions Permalink

please provide your configuration file (package.json or whatever file you use) and screenshot of Settings | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint page

BTW, what WebStorm version do you use?

0
Comment actions Permalink

package.json

"dependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.26.0",
"babel-loader": "7.x",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"classnames": "^2.2.5",
"coffee-loader": "^0.7.3",
"coffee-script": "^1.12.7",
"compression-webpack-plugin": "^1.0.0",
"css-loader": "^0.28.5",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"glob": "^7.1.2",
"immutability-helper": "^2.3.1",
"js-yaml": "^3.9.1",
"node-sass": "^4.5.3",
"numeral": "^2.0.6",
"path-complete-extname": "^0.1.0",
"postcss-loader": "^2.0.6",
"postcss-smart-import": "^0.7.5",
"precss": "^2.0.0",
"prop-types": "^15.5.10",
"rails-erb-loader": "^5.1.0",
"react": "^15.6.1",
"react-addons-css-transition-group": "15.6.0",
"react-dom": "^15.6.1",
"resolve-url-loader": "^2.1.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^3.5.5",
"webpack-manifest-plugin": "^1.3.1",
"webpack-merge": "^4.1.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-eslint": "^8.0.1",
"babel-preset-flow": "^6.23.0",
"eslint-plugin-flowtype": "^2.39.1",
"eslint-plugin-no-unused-expressions": "^0.1.0",
"eslint-plugin-react": "^7.4.0",
"flow-bin": "^0.56.0",
"flow-typed": "^2.2.0",
"standard": "^10.0.3",
"webpack-dev-server": "^2.7.1"
},
"standard": {
"parser": "babel-eslint",
"plugins": [ "flowtype" ]
}

And the settings:

The situation is the same when I use standard from within project.

Node 8.2.1 if that may play a role.

Tried on Webstorm 2017.1.4 and RubyMine 2017.2.4

 

0
Comment actions Permalink

>The situation is the same when I use standard from within project.

Please always use the one from the project - unless you have the same set of eslint plugins installed globally. This won't work otherwise. BTW, what command do you use when linting your code in cli? Do you use local or global standard package?

0
Comment actions Permalink

Could not make it happen. I used local statandard.
I just went with eslint with standard-flow config, works well.

0
Comment actions Permalink

Actually, I can't make Standard working with Flow as well, but my issue is different - https://youtrack.jetbrains.com/issue/WEB-29231... Let's see if fixing it fixes your problem as well

0
Comment actions Permalink

I am getting the same issue.

 

my .eslintrc:

 

{
"extends": ["airbnb", "prettier", "prettier/flowtype", "prettier/react"],
"plugins": ["react", "react-native", "flowtype", "prettier"],
"rules": {
"react/prefer-stateless-function": 0,
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"comma-dangle": ["error", "always-multiline"],
"import/prefer-default-export": "off"
}
}


and in package.json, my dev dependencies are:

 

"devDependencies": {
"babel-jest": "^23.4.0",
"babel-preset-flow": "^6.23.0",
"babel-preset-react-native": "^5.0.1",
"detox": "^5.6.1",
"eslint": "^4.9.0",
"eslint-config-airbnb": "16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-flowtype": "^2.50.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.4.0",
"eslint-plugin-react-native": "^3.2.1",
"flow-bin": "^0.75.0",
"husky": "^0.14.3",
"jest": "19.0.2",
"lint-staged": "^7.0.4",
"prettier": "^1.11.1",
"react-test-renderer": "^16.4.1"
},

 

0
Comment actions Permalink

Please provide more details on your issue - what exactly happens in your case?

Also how do your ESLint settings look like in the IDE? What Standard is chosen? (Should be the one installed locally)

What are Standard settings in package.json?

What is your IDE version?

0
Comment actions Permalink

Hi Oksana,

 

I am experiencing two issues. Here is the code:

 

As you can see there are 2 issues:

 

1) 

 

and 2)

 

Not sure why 2 is an issue, as it's clearly being used in the touchableOpacity component.

 

As for my settings, ESLINT in the IDE is using "automatic search", and finding the .eslintrc in the root of my repo, and the package is `~/git/my_app/node_modules/eslint`, to which I have posted my setup.

 

my IDE version is 

WebStorm 2018.1
Build #WS-181.4203.535, built on March 22, 2018
Licensed to My Name
Subscription is active until April 16, 2019
For educational use only.
JRE: 1.8.0_152-release-1136-b20 x86_64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
macOS 10.13.5

0
Comment actions Permalink

1) This is happening because babel-eslint is not specified as the parser. See https://github.com/gajus/eslint-plugin-flowtype#configuration

2) logged as https://youtrack.jetbrains.com/issue/WEB-34047, please follow it for updates

0

Please sign in to leave a comment.