Using Flow in WebStorm

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 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.

flow-preferences

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.

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

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Cool Feature, Tutorials and tagged , . Bookmark the permalink.

8 Responses to Using Flow in WebStorm

  1. James Spence says:

    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.

  2. Anthoni Gardner says:

    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 :|

  3. David says:

    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:

      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!

  4. Jon Kenoyer says:

    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 :/

Leave a Reply

Your email address will not be published. Required fields are marked *