What is Flow?

Flow

Flow is an error-checking technology for JavaScript projects that features near-realtime error checks. Normally, Flow uses type annotations to check for errors; however, it also works without them.

Installation

There are multiple ways to set up Flow. This tutorial will explain how to install Flow using npm for Babel and normal JavaScript.

Babel

First, the following script needs to be run to install @babel/core, @babel/cli, and @babel/preset-flow.

npm install --save-dev @babel/core @babel/cli @babel/preset-flow

Next, a .babelrc file needs to be created at the root of the project. In the presets, @babel/preset-flow needs to be added. To compile all the files from one folder to another, the following line may be used.

./node_modules/.bin/babel <SOURCE FOLDER> -d <TARGET FOLDER>

Here, the <SOURCE FOLDER> is the directory of the folder where all the files are stored before compiling – the <TARGET FOLDER> is the directory where all compiled files are to be moved.

Normal JavaScript

The following script needs to be run in a terminal to install Flow’s compiler.

npm install --save-dev flow-remove-types

Next, to compile all the files from one folder to another, the following line may be used.

./node_modules/.bin/flow-remove-types <SOURCE FOLDER> -d <TARGET FOLDER>

Here, the <SOURCE FOLDER> is the directory of the folder where all the files are stored before compiling – the <TARGET FOLDER> is the directory where all the compiled files are to be moved.

Setup

For both cases, a devDependency should be added using the script below.

npm install --save-dev flow-bin

Finally, a flow script needs to be added in the scripts of the package.json file.

"scripts": {
    "flow": "flow"
  }

Usage

The following script needs to be run when Flow is being run the first time.

npm run flow init

Afterward, the following line needs to be run to check for errors.

npm run flow

Run the following to set up Flow to run incremental background checks.

flow status