Before you start
Make sure you have Node.js on your computer.
Installing and configuring Flow
In the embedded Terminal (Alt+F12) , type one of the following commands:
npm install --global flow-binto install Flow globally.
npm install --save-dev flow-binto install Flow as a development dependency.
Learn more from the Flow official website.
// @flow comment on top.
Change the project language level to 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
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 WebStorm 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 WebStorm. When the checkbox is cleared, references are resolved through WebStorm 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.
To add a .flowconfig, open the embedded Terminal (Alt+F12) and type:
To add .flowconfig to a specific folder, type:
cd <path to the folder to check>
To enable Flow in a file, add a
// @flowcomment at the top of the file: just type
flow, press Tab, and WebStorm will expand it into
If you still don't have a .flowconfig yet, WebStorm 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.
WebStorm lets you view errors detected by Flow in the Problems tool window. To open the tool window, select from the main menu or click the widget in the right corner of the editor.
The 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.
To get more in formation about an error, select Show Error Details from the context menu of its description.
The Project Errors pane shows a list of all the discrepancies detected in all the files in the current project. The error messages are grouped by files in which they were detected.