Nuclide has deep, built-in support for Flow-enabled JavaScript.

Flow recently became supported on Windows. See the Windows is Supported! Flow blog post for more information.

Installing Flow

In order to fully use the integration of Flow, you must have Flow installed on your system:

Flow’s integration into Nuclide provides you with productivity features such as:

These features will not work properly unless you are working with Flow-enabled JavaScript since they require a .flowconfig file in your project root and the ability to run the Flow typechecker (e.g., flow) from the project root.

Code Diagnostics

If you write code that doesn’t pass the Flow typechecker, Nuclide will provide you error details in both its Code Diagnostics pane and inline within the Editing Area. Hover over the sideways red triangle in the gutter to see the Flow error inline. ​​ Given that Nuclide has access to all of the type information within your project along with the built-in types provided by Flow, autocomplete just works. By default suggestions from Flow will be shown first in the list of autocomplete results. However if you don’t want this behavior (e.g. you want snippets to be on top), you can configure priority in Nuclide’s preferences.

Jump To Definition

Nuclide provides a jump to definition/symbol feature for Flow programs.

For example, if you want to go to the definition of arr_length(), hover over arr_length()and either press Cmd-<mouse click> (Ctrl-<mouse click> on Linux) or Cmd-Option-Enter (Ctrl-Alt-Enter on Linux). Type Hinting

If you hover over a variable in your Flow file, you can get the type of the variable directly inline. The highlighted variables show that their type variables have been pinned. If you hover over the type hint, its associated variable will have motion in its highlight.

Pinned type hints can be moved anywhere within the editor.

Type Coverage

Nuclide can show you how much of your Flow file is covered by the type system with Type Coverage. If the percentage is less than 100%, you can toggle the Type Coverage inline display to show you where the issues are.

From the Command Palette, choose Nuclide Type Coverage: Toggle Inline Display. You can also either press Ctrl-Option-Shift-V (Ctrl-Alt-Shift-V on Linux) or simply click on the percentage displayed in the Status Bar.

Hover over any sideways triangles that appear in the gutter to see the type check issue inline, or open the Diagnostics Table to see them all listed together. Clicking on any issue in the Diagnostics Table will highlight the associated line.
[null, {"document_url": "https://nuclide.io/docs/languages/flow/", "unformatted_src": "/static/images/docs/language-flow-code-diagnostics.png", "src": "https://nuclide.io/static/images/docs/language-flow-code-diagnostics.png", "formatted_filename": "language flow code diagnostics"}, null, {"document_url": "https://nuclide.io/docs/languages/flow/", "unformatted_src": "/static/images/docs/language-flow-code-diagnostics-gutter.png", "src": "https://nuclide.io/static/images/docs/language-flow-code-diagnostics-gutter.png", "formatted_filename": "language flow code diagnostics gutter"}, null, {"document_url": "https://nuclide.io/docs/languages/flow/", "unformatted_src": "/static/images/docs/language-flow-autocomplete.png", "src": "https://nuclide.io/static/images/docs/language-flow-autocomplete.png", "formatted_filename": "language flow autocomplete"}, null, {"document_url": "https://nuclide.io/docs/languages/flow/", "unformatted_src": "/static/images/docs/language-flow-jump-to-definition-link.png", "src": "https://nuclide.io/static/images/docs/language-flow-jump-to-definition-link.png", "formatted_filename": "language flow jump to definition link"}, {"document_url": "https://nuclide.io/docs/languages/flow/", "unformatted_src": "/static/images/docs/language-flow-jump-to-definition-result.png", "src": "https://nuclide.io/static/images/docs/language-flow-jump-to-definition-result.png", "formatted_filename": "language flow jump to definition result"}, null, {"document_url": "https://nuclide.io/docs/languages/flow/", "unformatted_src": "/static/images/docs/language-flow-typehint.png", "src": "https://nuclide.io/static/images/docs/language-flow-typehint.png", "formatted_filename": "language flow typehint"}, null, {"document_url": "https://nuclide.io/docs/languages/flow/", "unformatted_src": "/static/images/docs/language-flow-pinned-typehint.png", "src": "https://nuclide.io/static/images/docs/language-flow-pinned-typehint.png", "formatted_filename": "language flow pinned typehint"}, null, {"document_url": "https://nuclide.io/docs/languages/flow/", "unformatted_src": "/static/images/docs/language-flow-type-coverage.png", "src": "https://nuclide.io/static/images/docs/language-flow-type-coverage.png", "formatted_filename": "language flow type coverage"}, null, {"document_url": "https://nuclide.io/docs/languages/flow/", "unformatted_src": "/static/images/docs/language-flow-type-coverage-inline.png", "src": "https://nuclide.io/static/images/docs/language-flow-type-coverage-inline.png", "formatted_filename": "language flow type coverage inline"}]