Flow

Flow is a static type checker that brings type annotations to JavaScript. PhpStorm recognizes Flow structures and provides syntax highlighting for them on all operating systems.

Before you start

Download and install Node.js.

Installing and configuring Flow

In the embedded Terminal (Alt+F12) , type one of the following commands:
- npm install --global flow-bin to install Flow globally.
- npm install --save-dev flow-bin to install Flow as a development dependency.

Learn more from the Flow official website.

To have PhpStorm recognize Flow structures, provide correct syntax highlighting, report errors properly, and avoid false-positive error highlighting, change the JavaScript language level in your project to Flow, add a .flowconfig configuration file to your project, and supply every file to be checked with a // @flow comment on top.

Change the project language level to Flow

In the Settings/Preferences dialog Ctrl+Alt+S, go to Languages and Frameworks | JavaScript. The JavaScript page opens.
From the JavaScript Language Version list, choose Flow.
In the Flow package or executable field, specify the path to the node_modules\flow-bin package or the Flow binary executable file. To use node_modules\.bin\flow, make sure the path to Node.js is added to the PATH environment variable.
In the Use Flow server for: area, specify the basis for coding assistance by selecting or clearing the following checkboxes:
- Type checking: When this checkbox is selected, syntax and error highlighting is provided based on the data received from the Flow server. When the checkbox is cleared, only the basic internal PhpStorm highlighting is available.
- Navigation, code completion, and type hinting: When this checkbox is selected, suggestion lists for reference resolution and code completiong contain both suggestions retrieved from integration with Flow and suggestions calculated by PhpStorm. When the checkbox is cleared, references are resolved through PhpStorm calculation only.
The checkboxes are available only when the path to the Flow executable file is specified.
Keep the Save all modified files automatically checkbox selected to ensure that Flow is applied continuously because Flow checks the current files only after all the other modified files are saved.

Enable Flow

To add a .flowconfig, open the embedded Terminal (Alt+F12) and type:
flow init
To add .flowconfig to a specific folder, type:
cd <path to the folder to check>
flow init
To enable Flow in a file, add a // @flow comment at the top of the file: just type flow, press Tab, and PhpStorm will expand it into // @flow.
If you still don't have a .flowconfig yet, PhpStorm shows a tooltip prompting you to add a configuration file to the current folder.
To choose between the current folder and the project root, click More actions or press Alt+Enter.

Monitoring errors

PhpStorm lets you view errors detected by Flow in the dedicated Flow tool window, which becomes available after you add at least one .flowconfig file to your project. To open the tool window, select View | Tool Windows | Flow from the main menu.

The Flow tool window consists of two panes.

The Errors pane shows a list of all the discrepancies detected in the file which is opened in the active editor tab. At the top the full path to the file is displayed.
When you open the Flow tool window, only the Errors pane is displayed.
The Project Errors pane shows a list of all the discrepancies detected in all the files in the current project after you run Flow against the entire project by clicking on the toolbar. The error messages are grouped by files in which they were detected.

Toolbar

The toolbar is common for the Current Errors and the Project Errors panes.

Item	Tooltip and Shortcut	Description
	Show all errors	Click this button to switch to the Project Errors pane and view all the discrepancies detected in the current project.
	Help	Use this button to navigate to the help topic for the tool window.
	Close `Ctrl+Shift+F4`	Click this button to terminate the Flow type checker and close the tool window.
/	Expand all `Ctrl+NumPad +` Collapse all `Ctrl+NumPad -`	Use these buttons to have all nodes expanded or collapsed.
	Clear All	Click this button to remove all the error messages from the currently active pane.

Context Menu

The context menu is common for the Errors and the Project Errors panes.

Item	Description
Jump to source	Choose this option to open the file where the selected problem was detected and navigate to the fragment of code which caused the error.
Copy	Choose this option to copy the selected error message with the information on the file, the line, and the column where the error occurred.

Last modified: 23 September 2021