Using Flow in WebStorm

Ekaterina Prigara November 21, 2016

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 init command.
For all files you’d like to check with Flow, add // @flow comment 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 the Flow syntax.
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.

enable-flow-in-the-project

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.

flow-error

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.

flow-project-errors

Note that disabling the checkbox Type checking in the Flow preferences will stop Flow from running.

Make sure that you’ve checked Save all modified files automatically if you want to see errors from Flow as you type. Otherwise, Flow will check your code only when you press Save all.

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.

flow-completion

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

#Flow #WebStorm 2016.3

Comments below can no longer be edited.

95 Responses to Using Flow in WebStorm

James Spence says:
December 6, 2016
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.
- Ekaterina Prigara says:
  December 7, 2016
  Do you have // @flow comment on top of your file and .flowconfig in you project?
  - James Spence says:
    December 7, 2016
    I do, yes. I ended up opening a support ticket so hopefully it’ll be solved there. I will update if we resolve it.
    - Ville says:
      February 23, 2017
      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.
      - Ekaterina Prigara says:
        February 24, 2017
        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 🙁
      - James Spence says:
        March 6, 2017
        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!
        
        Ekaterina Prigara says:
        March 7, 2017
        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!
Anthoni Gardner says:
December 12, 2016
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 😐
David says:
January 11, 2017
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.
- Ekaterina Prigara says:
  January 12, 2017
  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 filename command, 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!
Jon Kenoyer says:
January 27, 2017
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 :/
- Ekaterina Prigara says:
  January 30, 2017
  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!
Arno.Nyhm says:
February 21, 2017
why is the path to the flow binary not relative?
i see it always in the directory `node_modules` of the current project
- Ekaterina Prigara says:
  February 22, 2017
  By 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.
  - Arno.Nyhm says:
    February 23, 2017
    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)
    - Ekaterina Prigara says:
      February 23, 2017
      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?
      - Arno.Nyhm says:
        March 23, 2017
        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
      - Arno.Nyhm says:
        March 23, 2017
        the path should be stored as:
        
        `node_modules/flow-bin/vendor/flow`
        or
        `./node_modules/flow-bin/vendor/flow`
        
        and not as
        
        `/Users/ekaterinaprigara/WebstormProjects/youtrack-mobile/node_modules/flow-bin/vendor/flow`
Oleksandr Sidko says:
February 28, 2017
Hi,
Is there any way I can change folder for flow server running by PhpStorm?
Currently I have my `.flowconfig` in `/src`, but PhpStorm starts Flow server in the “ folder, 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.
“`
- Ekaterina Prigara says:
  March 2, 2017
  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
Lianghua Sun says:
March 29, 2017
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 the `uuid` is 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 ?
- Lianghua Sun says:
  March 29, 2017
  But the way, my flow version is 0.42.0
- Konstantin Ulitin says:
  March 29, 2017
  Hi. What IDE version are you using? Should work fine in 2017.1 (WEB-24433).
  - Lianghua Sun says:
    March 31, 2017
    Sorry, my fault. My IDE version is too old(2016.3.2).
Oleg says:
June 22, 2017
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
- Ekaterina Prigara says:
  June 22, 2017
  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!
  - Ice says:
    August 21, 2017
    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.
    - Ekaterina Prigara says:
      August 21, 2017
      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!
Denis says:
August 3, 2017
How to turn off Flow Service?
- Ekaterina Prigara says:
  August 3, 2017
  Flow service configuration is available in Preferences | Languages & Frameworks | JavaScript. If you uncheck all the checkboxes, Flow service will be disabled.
Jonny says:
August 16, 2017
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.
- Ekaterina Prigara says:
  August 16, 2017
  Do you see these error in the Flow tool window? What exactly the error says?
  - Jonny says:
    August 16, 2017
    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:
    – `import` is only available in ES6
    – Class properties must be methods
    - Jonny says:
      August 16, 2017
      Running 2017.2.2 btw.
      - Ekaterina Prigara says:
        August 16, 2017
        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.
      - Jonny says:
        August 16, 2017
        Done: https://youtrack.jetbrains.com/issue/WI-37674
        
        Thanks.
Martin says:
September 1, 2017
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.
- lena_spb says:
  September 1, 2017
  It’s a known issue unfortunately, please follow https://youtrack.jetbrains.com/issue/WEB-28070 for updates
  - Martin says:
    September 11, 2017
    Thanks for your reply, I’ve voted the issue.
Anatoly says:
September 12, 2017
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?
- Ekaterina Prigara says:
  September 12, 2017
  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
Dmitriy Tupalov says:
September 27, 2017
Hi!
I have options in my constructor. Options is described by some flow type (e.g. TBaseApiOptions). When I write code and create an instanse of my class, WebStorm suggest that my options is type of name TBaseApiOptions. But I want to see the content of this type, not name of that type. Is there variants to do this?

Example of my code and WebStorm’s suggest
https://www.dropbox.com/s/n6bppy6bpnl8hsp/type_name.png?dl=0
Pascal Pflaum says:
October 17, 2017
I had the same issue as Oleg in IDEA Ultimate 2017.2
And want to give a solution if you end up here like I did.

When setting the flow executable I got an error:
Error: “Cannot Save Settings: Error during checking Flow path: env: node: No such file or directory, please provide a valid path to the executable.”

My System
* Ubuntu 17.10
* NVM (https://github.com/creationix/nvm)

I got the Error for global and local flow-bin package.

I solved this by starting the idea.sh from a Terminal instead from a LauncherIcon. I think that NVM and the way how it changes node versions in combination with IDEA not started from terminal caused the problem.
- Ekaterina Prigara says:
  October 17, 2017
  Hi Pascal,
  
  the problem seems to be related to this issue: https://youtrack.jetbrains.com/issue/IDEABKL-7589
  We’ll see what we can do. Please vote for this issue and follow it for the updates.
  - Ekaterina Prigara says:
    October 17, 2017
    We discussed it once again and it seems that it would be better to fix the problem from the other end – change the Flow configuration. Please follow this issue instead: https://youtrack.jetbrains.com/issue/WEB-29101
Lukasz says:
October 26, 2017
I’m struggling with setting up flow on my Windows machine.
In Languages&Frameworks>JavaScript I set JavaScript version to Flow then I set Flow executable to C:\Users\myUserName\AppData\Roaming\npm\flow.cmd and checked type checking and navigation. However, now when I run Webstorm (2017.2) I just see spinner and information “starting flow service” after some time in flow console I see error that service timed out.
- Oksana Chumak says:
  October 26, 2017
  Hi Lukasz,
  
  Do you have by any chance another flow service started out of WebStorm?
  
  Could you please add #com.intellij.lang.javascript.flow.protocol.FlowJSStandardOutputProtocol and #com.intellij.lang.javascript.flow.FlowJSServerService to `Help > Debug Log Settings…`, reproduce the issue and provide your idea.log.* files (Help > Show log in…)?
  - Seb says:
    November 1, 2017
    I’ve got the same issue. ‘Starting Flow Service’ keeps on going forever.
    
    Log attached below
    https://www.dropbox.com/s/lnu6ysr7wf6eg44/idea.log?dl=0
    
    Thanks
Seb says:
November 2, 2017
Can’t get Flow to start. All is set but the message Starting Flow Service keeps on spinning.
- Ekaterina Prigara says:
  November 2, 2017
  What WebStorm and Flow versions do you use? Can you please share with us the IDE log files (menu Help – Show logs). Please file a new issue on https://youtrack.jetbrains.com/issues/WEB and attach them to the issue or send them to our tech support. Thank you!
  - Seb says:
    November 3, 2017
    Created the issue with all the details and log attached https://youtrack.jetbrains.com/issue/WEB-29545
    - Ekaterina Prigara says:
      November 3, 2017
      Thank you!
    - Seb says:
      November 3, 2017
      Managed to get it to work. Turned out I had wrong version of Flow installed.
      - Matthaus says:
        December 20, 2017
        witch version did you switch to to get it to work?
Александр Староверов says:
November 15, 2017
Hi! Its real highlight flow in comments style?
- Ekaterina Prigara says:
  November 16, 2017
  Hello! Sorry, WebStorm doesn’t provide code completion and highlighting for Flow comments. Please vote for this issue: https://youtrack.jetbrains.com/issue/WEB-16606
Viktor Molokostov says:
January 16, 2018
Hi guys, thank you for the Flowtype integration. It works ok, but lacks one important feature which Atom Nuclei has – inferred types hinting. Flow has very powerful type inferring abilities, so one can make a lot less type annotations, but still get full type coverage. Nuclei can show interred types which is very handy during development, IDEA does it only when the type is declared in the same file which is much less useful. Is there a possibly of you guys adding such feature in IDEA?
- Ekaterina Prigara says:
  January 17, 2018
  Hello Viktor,
  You can use the Expression Type action (Ctrl-Shift-P) to see the inferred types. We plan to show the inferred types in Flow on cmd-hover, similar to TypeScript.
Aleksandr says:
February 7, 2018
Hello,
Flow support is good feature, but i have some troubles.

1. In IDEA 2017.3.1 code completion not work for all types from https://flow.org/en/docs/react/types.
2. I try to cmd+click on “SyntheticInputEvent” but i see “Cannot find declaration to go to”. In Flow docs (https://flow.org/en/docs/react/events) says: “…use the SyntheticEvent…”.

In error message for React.Component without Props i see link and can navigate to type definitions file in “/private/tmp/flow/flowlib_/react.js”, original source on git – https://github.com/facebook/flow/blob/master/lib/react.js.
Also in this directory /private/tmp/flow/flowlib_/ there is a file react-dom.js with react events type definitions, but no links in Flow error message for navigate.

Screenshots:
https://www.dropbox.com/s/80p7i4qiri9nray/SyntheticInputEventError.png?dl=0
https://www.dropbox.com/s/7ozt06zau20gmzx/ReactComponentError.png?dl=0

Why Navigation to global types of react events not working and React.Node, Key, ElementType and rest too?
- lena_spb says:
  February 7, 2018
  IDEA code completion/navigation is based on file index – all project .js files are added to it, including files from locally installed npm dependencies (see https://blog.jetbrains.com/webstorm/2014/07/how-webstorm-works-completion-for-javascript-libraries/). React types are built in Flow, but the corresponding libdefs are not a part of Flow package installed with npm install. So, no completion/navigation is possible, unless you choose to use Flow for it (Navigation, Completion and type hinting should be enabled in File | Settings | Languages & Frameworks | JavaScript): in this case Flow uses the definition files it creates in your system TEMP dir while running
Poyan Nabati says:
March 8, 2018
Is there any way to enable flows lazy mode to speed up the checks? Right now it takes about 2-3 seconds for an update.

Thanks.
- Ekaterina Prigara says:
  March 12, 2018
  We haven’t yet looked into this new feature of Flow. I’ve created a new issue where you can track our progress: https://youtrack.jetbrains.com/issue/WEB-31678
  Thanks!
Zakhar says:
May 8, 2018
Hello,

I’ve got an issue with Flow in PhpStorm. If Flow version is higher then 0.59 it doesn’t work (no highlighting, just show the message “Starting Flow Service”). I’ve tried the global and local installation of Flow.

PhpStorm 2017.2.5
Flow 0.60 – 0.71.0
.flowconfig:
[ignore]
/test/*
/node_modules/*
/assets-server/*
/build/*
/scripts/*
/coverage/*
[include]
[libs]
/flow-typed/*
[lints]
[options]
[strict]
- Ekaterina Prigara says:
  May 8, 2018
  Hello,
  Support for these Flow versions has been added in PhpStorm 2017.3.1. Here’s a related issue on our tracker: https://youtrack.jetbrains.com/issue/WEB-30020
Oleg says:
May 25, 2018
So far I see no “Code Highlights and in-build inspections” in my Flow preferences setup. So as result this feature doesnt work for me. I have latest WebStorm.

WebStorm 2018.1.4
Build #WS-181.5087.27, built on May 21, 2018
JRE: 1.8.0_152-release-1136-b39 x86_64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
macOS 10.13.4
- Ekaterina Prigara says:
  May 25, 2018
  This option was renamed into Navigation, code completion, and type hinting. Please try it.
  - Oleg says:
    May 25, 2018
    Ok, i see. However, it doesn’t work for me. I do proper mistakes in types and syntax to check Flow, however, it doesn’t highlight anything.
    http://prntscr.com/jmidip
    - Ekaterina Prigara says:
      May 28, 2018
      Do you see a Flow tool window below the editor?
      - Oleg says:
        May 28, 2018
        No. I was looking for a hot-key or something to activate this window
        
        Ekaterina Prigara says:
        May 29, 2018
        It means that the Flow server is not running. Can you please try to restart an IDE and see if it shows up at the bottom of the screen. If it doesn’t help, please send us the IDE logs (menu Help – Show logs). Here’s you can reach our tech support: https://intellij-support.jetbrains.com/hc/en-us/requests/new
        Thank you!
Martin Kristof says:
May 29, 2018
Hello, I am using PHPStorm EAP 2018 with flow. I turned autocompleting on, but IDE doesn’t autocomplete props when I’m calling component in JSX. It only checks whether any prop is missing but not perform autocompleting.
- Ekaterina Prigara says:
  May 29, 2018
  Completion for component props is not available at the moment. Please follow this issue for updates: https://youtrack.jetbrains.com/issue/WEB-29907
  - Oussama G. says:
    September 11, 2018
    Ekaterina Prigara > The issue you linked say that it is fixed. Unfortunately it’s not fixed on my WebStorm version (2018.1.2).
    - Ekaterina Prigara says:
      September 11, 2018
      The issues was fixed in WebStorm 2018.2, which is the current stable WebStorm version that you can download here: https://www.jetbrains.com/webstorm/download/
      - Oussama G. says:
        September 11, 2018
        Thank you for the info Ekaterina !
Tom says:
December 17, 2018
Hello, I am using WS 2018.3.1 and it seems that the Flow code completion doesn’t work (at least for React. I didn’t try any other).

I am using the official Flow tutorial for creating React App:
————————————–
create-react-app my-app && cd my-app
yarn add –dev flow-bin
yarn run flow init
————————————–

Flow checker is working in my WebStorm but no code hinting.
In my WS settings, I have checked both “Type checking” and “Navigation, code completion, and type hinting”.

For example when I code:
————————————–
type Props = {
children?: React.Node;
}
————————————–
WebStorm is not offering ‘React.Node’ but ‘React.ReactNode’ from react.d.ts which is totally wrong! (Flow: Cannot get `React.ReactNode` because property `ReactNode` is missing in module `react` [1].) I switched off all TS and d.ts support but WS is not offering any Flow type but incompatible d.ts only.
- Ekaterina Prigara says:
  December 18, 2018
  Hello Tom,
  In the current implementation of the WebStorm’s integration with Flow, the IDE adds its own code completion suggestions powered by its JavaScript support in case when there are not suggestions from Flow.
  And this is exactly what happened in this case: Flow didn’t provide any suggestions after `React`.
  We will fix this particular case by tuning our suggestion.
  But would you prefer to see no suggestions at all in case when there are no options from Flow?
  - Tom says:
    December 18, 2018
    Hello Ekaterina, thank you for your prompt response.
    
    I think that would be maybe better to do not show other suggestion than the Flow one, because it can be really confusing.
    
    I have spent several hours of discovering what should be the correct type and type settings according to the actual best practices and autocompleting tool (I am switching from TS to Flow at the moment).
    
    For example, I know that WS is displaying in the autocompleting pop-up that the `React.ReacNode` is coming from a`d.ts` …but I was asking my self: can I use it for Flow or not and can Flow use `d.ts` if there is no flow-typed definition file?
    
    I can imagine that some libraries got same type names in TS as in Flow, but some don’t. Maybe you can make to see non-Flow suggestions as optional in WS/Flow settings.
    
    Thank you to JB for great products!
    - Ekaterina Prigara says:
      December 19, 2018
      Hello Tom,
      I’ve reported an issue for improving WebStorm’s own suggestions in this case: https://youtrack.jetbrains.com/issue/WEB-36395
      I think as part of this fix we will also disable any completion from the react.d.ts file.
Ferrero says:
March 17, 2019
Hello, I was trying to use all=true in the options in the file .flowconfig and it doesn’t work. Some Idea?
- Ekaterina Prigara says:
  March 18, 2019
  Hi, unfortunately, in WebStorm 2018.3 some options in .flowconfig are ignored. In WebStorm 2019.1 (which is now in Beta) we have started using the new Flow LSP APIs on macOS and Linux and thanks to that, the problem should be fixed.
belomi says:
May 30, 2019
Hey, thank you for this article. Changing the language version is apparently removing the Emmet support. Anybody here that could figure out how to use Flow and Emmet for React (js)?
- belomi says:
  June 3, 2019
  Hmm, apparently it was just stuck somehow. It’s working for me now.
  - Ekaterina Prigara says:
    June 3, 2019
    Thanks for the update!
42nato says:
June 14, 2019
Hi, I am using Flow with NodeJS (v10.14.2) and am attempting to debug in WebStorm. I am generating sourcemaps with `flow-remove-types –sourcemaps –pretty`. The breakpoint I set is being hit but the line numbers reported are incorrect and the debugger opens the compiled file instead of the source file. Can you perhaps add a guide for this use case and/or tell me if I am missing something obvious?
- Ekaterina Prigara says:
  June 14, 2019
  Hi, it seems that there’s some problem with the source maps generated by flow-remove-types – they don’t properly work neither in WebStorm nor in Chrome’s DevTools.
  I would recommend you to file an issue in their GitHub repo, however, I’m not sure if the project is still maintained.
Laurenz Glück says:
June 16, 2019
Hi Ekaterina,

I have a short question about autocompletion with React and Flow in WebStorm 2019.1.3.

If I have a React class without using Flow i can just start typing `component` and WebStorm is offering my all the default react component functions like `componentDidMount` for autocompletion. For classes using Flow this is not the case and there is no autocompletion… Is there any way to fix this?

Thanks for your help!
Laurenz
- Ekaterina Prigara says:
  June 17, 2019
  Hi Laurenz,
  I’ve filed a bug report: https://youtrack.jetbrains.com/issue/WEB-39437 Please follow it for the updates.
  As a workaround, you can add a TypeScript definition file in Preferences | Languages & Frameworks | JavaScript | Libraries – Download – react.
  Hope it helps!
  - Laurenz Glück says:
    June 18, 2019
    Hi Ekaterina,
    
    thanks for your response and for creating the bug report!
    
    I actually already tried your proposed workaround before – unfortunately without success… I added the @types/react and @types/react-dom packages and also restarted WebStorm. Still no autocomplete…
    
    I’m not sure how this TypeScript definition files work, but you to be sure – I’m not using TypeScript 😉
    
    Thanks for your help!
    Laurenz
    - Ekaterina Prigara says:
      June 19, 2019
      TypeScript type definition files are used by WebStorm to power-up JavaScript code completion, so it’s weird that it hasn’t helped… The issue has already been fixed and the fix will land in the next week’s WebStorm 2019.2 Early Preview build that you can download here: https://www.jetbrains.com/webstorm/eap/
Alec says:
October 2, 2019
Having issues with relative pathing.
import MyConfig from ‘../models/my-config.js’;
gives: Error:(10, 34) Cannot resolve module `../models/carrier-configuration.js`.

CTRL + Click brings me to the file (and i have the resolve references set to flow) and it finds the reference. Note if i run the flow command in the terminal these relative path issues don’t show up, just in the webstorm version
- Alec says:
  October 2, 2019
  sorry, error reads `Error:(10, 34) Cannot resolve module ../models/my-config.js`
  - Ekaterina Prigara says:
    October 3, 2019
    Hi Alec, we have a similar issue filed on our tracker but unfortunately we were not able to reproduce it. So it would really help us if you could share a sample project with us there. Thanks!
Lyubo says:
November 14, 2019
I don’t get any type hinting. I have flow installed both local and global. Tried setting either in the path, without success. The server runs and provides errors, both in the tab on the bottom and inline, but I don’t get any type hinting. My settings panel looks different. I have:

– Type checking
– Navigation, code completion, and type hinting
– Save all modified files automatically

All three are selected.

The way everything is set works in VS Code. I get type hinting, coverage (both total for the file and inline), all of it …

Is coverage supported in WebStorm?

WebStorm 2019.2.4
Build #WS-192.7142.35, built on October 29, 2019
Licensed to WebStorm Evaluator
Expiration date: December 13, 2019
Runtime version: 11.0.4+10-b304.77 x86_64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
macOS 10.15.1
GC: ParNew, ConcurrentMarkSweep
Memory: 1979M
Cores: 12
Registry: ide.mac.allowDarkWindowDecorations=true, ide.tree.ui.experimental=false, ide.balloon.shadow.size=0
Non-Bundled Plugins: IdeaVIM, com.chrisrm.idea.MaterialThemeUI, com.jetbrains.plugins.ini4idea
- Ekaterina Prigara says:
  November 15, 2019
  Hello,
  Type hints in WebStorm are shown on Cmd-hover over a symbol in the editor and look like this:
  
  Can you please try to hold Cmd, hover over a symbol and wait a bit longer – does the hint appear? If not, we would appreciate it if you report an issue on our tracker and attach IDE logs (menu Help – Show logs) and some sample code to help us reproduce the problem.
  
  No, sorry, Flow coverage reports are not supported. Please vote for this feature request: https://youtrack.jetbrains.com/issue/WEB-24582

Using Flow in WebStorm

Installing Flow

Code analysis and type checking

Navigation, code completion, and type hinting

Code highlighting and built-in inspections

95 Responses to Using Flow in WebStorm

James Spence says:

Ekaterina Prigara says:

James Spence says:

Ville says:

Ekaterina Prigara says:

James Spence says:

Ekaterina Prigara says:

Anthoni Gardner says:

David says:

Ekaterina Prigara says:

Jon Kenoyer says:

Ekaterina Prigara says:

Arno.Nyhm says:

Ekaterina Prigara says:

Arno.Nyhm says:

Ekaterina Prigara says:

Arno.Nyhm says:

Arno.Nyhm says:

Oleksandr Sidko says:

Ekaterina Prigara says:

Lianghua Sun says:

Lianghua Sun says:

Konstantin Ulitin says:

Lianghua Sun says:

Oleg says:

Ekaterina Prigara says:

Ice says:

Ekaterina Prigara says:

Denis says:

Ekaterina Prigara says:

Jonny says:

Ekaterina Prigara says:

Jonny says:

Jonny says:

Ekaterina Prigara says:

Jonny says:

Martin says:

lena_spb says:

Martin says:

Anatoly says:

Ekaterina Prigara says:

Dmitriy Tupalov says:

Pascal Pflaum says:

Ekaterina Prigara says:

Ekaterina Prigara says:

Lukasz says:

Oksana Chumak says:

Seb says:

Seb says:

Ekaterina Prigara says:

Seb says:

Ekaterina Prigara says:

Seb says:

Matthaus says:

Александр Староверов says:

Ekaterina Prigara says:

Viktor Molokostov says:

Ekaterina Prigara says:

Aleksandr says:

lena_spb says:

Poyan Nabati says:

Ekaterina Prigara says:

Zakhar says:

Ekaterina Prigara says:

Oleg says:

Ekaterina Prigara says:

Oleg says:

Ekaterina Prigara says:

Oleg says:

Ekaterina Prigara says:

Martin Kristof says:

Ekaterina Prigara says:

Oussama G. says:

Ekaterina Prigara says: