Flow is a static type system developed by Facebook. It introduces a syntax of type annotations for JavaScript and provides a type checking tool.
Using types in your code allows Flow to catch more errors before you run the code, but is not mandatory – Flow’s static analysis can detect some errors even without type annotations.
WebStorm 2016.3 adds integration with Flow. So if you’re using Flow in your project, you will now see errors reported by Flow in the editor, as well as in a new Flow tool window. Errors are displayed right as you make changes in your code, without having to save them. Flow can also power WebStorm’s code completion, type hints, and navigation to the definition.
Let’s have a closer look at how this all works in WebStorm.
Installing Flow
If you’re new to Flow, we recommend that you check some examples on the Flow website first and follow their installation steps:
- Make sure that Flow is added to your project. If not, run
npm install --save-dev flow-bin - Add a .flowconfig file to your project with
flow initcommand. - For all files you’d like to check with Flow, add
// @flowcomment on top.
Tip: Type flow and press Tab – WebStorm will expand it into // @flow.
In WebStorm:
- Go to Preferences | Languages & Frameworks | JavaScript in WebStorm and set language version to Flow. WebStorm will then understand Flow type annotations in your code.
- Check that the path to Flow is specified. If it’s correct, click OK to apply settings. You’re ready to go!
As you may have already noticed, there are three checkboxes for configuring how the Flow service is going to be used by WebStorm. Later we’ll discuss the features each checkbox adds.
Code analysis and type checking
Once you’re done with the steps above and have enabled Type checking, WebStorm will run a Flow server that will analyze the code you’re working on.
Don’t forget that Flow analyzes only those files that have // @flow at the top.
Any errors Flow finds will be highlighted in the editor. Hover on the error to see its description.
All errors reported by Flow are also listed in the Flow tool window. In its Errors tab you will see only the errors for the file you’re now working on.
Click the Show all errors icon on the left-hand side of the tool window and switch to the Project Errors tab to see all errors in the project. Double-click on the error to jump to the file.
Note that disabling the checkbox Type checking in the Flow preferences will stop Flow from running.
Navigation, code completion, and type hinting
As Flow has the information about the types used in your code from the annotations and type inference, it can also provide code completion suggestions based on that. WebStorm would show them in the autocompletion popup as well as in type hints.
To use this, go to Preferences and select the Navigation, code completion, and type hinting checkbox in addition to Type checking.
WebStorm can also use the information from Flow for navigation actions like Go to definition.
Code highlighting and built-in inspections
With this checkbox enabled, WebStorm will use the information provided by Flow to power code highlighting and its built-in inspections. Please note that enabling this option may cause performance problems.
Your WebStorm Team
I’m having issues with this integration since the update. Whenever I enable flow, nothing appears in my project. Despite me type hinting variables, for example, no errors are displayed by the IDE. This is despite me installing flow bin into my node modules, specifying the path to the flow executable, and having type hinting on.
Do you have
// @flowcomment on top of your file and .flowconfig in you project?I do, yes. I ended up opening a support ticket so hopefully it’ll be solved there. I will update if we resolve it.
I have exactly the same experience. No matter if flow is enabled or not, the editor show nothing, although i can get the errors from flow CLI.
Sorry to hear that. Can you please provide us with a bit more information on you project configuration, Flow version and changes you make either via our issue tracker or our tech support.
That also might be the same issue as this one https://youtrack.jetbrains.com/issue/WEB-23706 Unfortunately, there’s no much with can do with that :(
Ville, the thing that fixed it for me was ensuring I was testing Flow with the LOCAL version of flow, not the global version. Ensure you’re calling flow with something like: “./node_modules/flow-bin/flow server”. For me, the reason for my error was because of a mismatch in local flow version and my .flowconfig file. The IDE was failing silently and not telling me.
Hope it helps!
We’ve added a notification in the Flow tool window about the version mismatch in the latest bug-fix update, so it should be easier to spot issues like that in the future. Good that it works for you now!
Unfortunately this causes horrendous problems with Windows.
I followed these instructions and installed flow and then used the flow-bin folder.
All works as should. When editing a JSX file I can see types etc just like in Typescript.
However when I click to move to say the console (still in the editor) flow.exe instantly crashes. To make it worse I’ve had several Blue Screens of Death since using this.
I would really love to get this working properly, but I am not sure if flow is working properly for Windows and I do not believe it’s your fault :|
Hey there,
thanks for integration flow in Webstorm.
Unfortunately I have to say the performance is really bad when switching on
“Navigation, code completion and type hinting”. I don’t see any sense in using flow in my IDE if this feature is switched off.
I also got the problem, that paths completely break. CMD + Click doesn’t work anymore, paths are not resolved when using import or require.
When you have this option enabled, as its name suggests, all navigation is powered by Flow. It may happen that Flow doesn’t support resolve in these cases: please ensure that with
low find-module moduleref filenamecommand, where moduleref is the path, e.g.flow find-module "./foo" bar.js. We’ll also try to make WebStorm resolve paths itself as a fallback if Flow can’t.For investigating performance issues, can you please send us the content of your IDE log folder via https://youtrack.jetbrains.com/issues/WEB. Thank you!
I am also getting the Flow Windows crash using 2016.3.2 and flow 0.38.0. Note that Flow works fine from the command line.
We are evaluating using Flow with React and WebStorm with 40 plus developers and this is a stopping issue :/
Hi Jon,
Does the error seem similar to this one: https://youtrack.jetbrains.com/issue/WEB-24993?
If it’s different, please send us the content of your IDE log folder (menu Help – Show log)?
You can send it to our tech support (Submit a request link on top) or report a new issue on our tracker.
That will help us a lot. Thanks!
why is the path to the flow binary not relative?
i see it always in the directory
node_modulesof the current projectBy default a locally installed Flow is selected for all projects. You can alternatively select and use a globally installed Flow – select the path from the drop-down list or click on the … icon to the right from the input and select the path.
but in the most cases you use the via npm/yarn installed flow (like with youtrack-mobile – please look at your own screenshot in your blogpost)
Sorry, I’m not sure I understand your question then.
In youtrack-mobile Flow is a local dependency, flow-bin is listed in project’s package.json and WebStorm by default uses this Flow version from the project’s node_modules.
What Flow version do you want to use?
no – by default it not uses the version from the projects node_modules – if you are the same person check in and checkout then it looks like it uses it.
steps to reproduce:
– other account then maintainer
– checkout project
– open in WebStorm
– get error that flow is not found (as i remember the last used path suggest was the path from previous maintainer)
that means:
– the path is stored in IDE settings absolute
– the path is not stored relative to project root
the path should be stored as:
node_modules/flow-bin/vendor/flowor
./node_modules/flow-bin/vendor/flowand not as
/Users/ekaterinaprigara/WebstormProjects/youtrack-mobile/node_modules/flow-bin/vendor/flowHi,
Is there any way I can change folder for flow server running by PhpStorm?
Currently I have my
.flowconfigin/src, but PhpStorm starts Flow server in thefolder, so it can’t find that config (output of Flow/Console tab):/usr/local/bin/flow server
Could not find a .flowconfig in or any of its parent directories.
Do I understand correctly that you have Flow installed in the node_modules folder in the project root and the .flowconfig file is in project_root/src?
That seems to be related to this issue, please follow its for updates: https://youtrack.jetbrains.com/issue/WEB-25258
Hi, I’m having issues when using “covariant” properties.
the example code is below
type State = {
+ uuid: number,
nickname: string
}
const mineState = {
uuid: 12345,
nickname: 'Kitty'
}
console.log(mineState.uuid);
The
+sign means “covariant” properties indicate theuuidis read-only.(Ref: https://flowtype.org/en/docs/frameworks/redux/)
But WebStorm keep warning me
type member expected, see the screenshot here:http://wx4.sinaimg.cn/mw690/5eeb2608gy1fe3ka19gq2j206t073wer.jpg
Am I doing something wrong ?
But the way, my flow version is 0.42.0
Hi. What IDE version are you using? Should work fine in 2017.1 (WEB-24433).
Sorry, my fault. My IDE version is too old(2016.3.2).
1) In settings IDE automatically suggest path to flow executable: “home/me/someproject/node_modules/.bin/flow”;
2) I check “Type checking” (or another checkboxes) and press Apply button;
3) IDE show error “Cannot Save Settings: Error during checking Flow path: /usr/bin:
node: No such file or directory…”;4) Solving: specify path like “/home/me/someproject/node_modules/flow-bin/flow-linux64-v0.48.0/flow” and it works.
I think it’s a bug.
WebStorm 2017.1.4
Build #WS-171.4694.29, built on June 7, 2017
Linux 4.4.0-81-generic
flow-bin 0.48.0
node 6.9.4 via NVM
How do you start WebStorm? Can you please try to start it from the terminal? It seems that WebStorm can’t find Node.js. Thanks!
I got the same error message.
Flow Executable: “/Users/ice/src/calypso/node_modules/.bin/flow”
Error: “Cannot Save Settings: Error during checking Flow path: env: node: No such file or directory, please provide a valid path to the executable.”
Solution: /Users/ice/src/calypso/node_modules/flow-bin/flow-osx-v0.53.1/flow
I start webstorm via app launcher.
Node 8.1.4 via nvm
Flow-bin: 0.53.1
Node and NPM settings set in Webstorm.
Other debugging and tools work fine inside Webstorm.
Can you please send us the IDE logs (menu Help – Show logs) for the investigation. You can create a new issue on YouTrack and attach the logs or send them to our tech support. Thank you!
How to turn off Flow Service?
Flow service configuration is available in Preferences | Languages & Frameworks | JavaScript. If you uncheck all the checkboxes, Flow service will be disabled.
When I switch to the Flow option in Javascript settings, my editor starts highlighting any ES6 stuff (like import, async, & const) as errors. Anyone have any ideas how to fix this? The project has Flow installed.
Do you see these error in the Flow tool window? What exactly the error says?
I’m not seeing the errors in the Flow Tool window. It looks like I get a “Failed to Load” in my events which seems to show up after it tries to load the Flow server.
The errors I’m seeing are things like:
–
importis only available in ES6– Class properties must be methods
Running 2017.2.2 btw.
Can you please send us your IDE logs (menu Help – Show logs)? You can either submit a new request on our issue tracker and attach files there or send them to our tech support.
The IDE should actually understand this syntax even without starting Flow service.
Done: https://youtrack.jetbrains.com/issue/WI-37674
Thanks.
It’s really a great feature that flow has been integrated into WebStorm etc. but “Resolving Reference” takes often several secs (rarely less than one second) which is a bit annoying.
Whenever I CMD+Click a reference a little popup with a progress bar comes up and it says “Resolving Reference”. The popup hangs there for a few seconds and finally the IDE navigates to reference.
It’s a known issue unfortunately, please follow https://youtrack.jetbrains.com/issue/WEB-28070 for updates
Thanks for your reply, I’ve voted the issue.
does Flow provide some advantages over the use of embedded WebStorm’s code analysis in conjunction with using TypeScript? in other words, if I already use WebStorm (with its embedded code analysis) and TS, why should I consider using WebStorm+Flow in my future projects?
I think it would be fairer to compare the languages themselves. Here’s a good very detailed article on that: http://patrickdesjardins.com/blog/typescript-vs-flow-part-1-of-3-who-they-are