Note
Development of the extension has been moved into the main Flow repo here. As a result, this repo will be archived. All issues about the extension should be made in https://github.com/facebook/flow/issues.
This extension adds Flow support for VS Code. Flow is a static type checker, designed to find type errors in JavaScript programs. Follow the official guide to get started.
Want to help make Flow in VS Code really shine? If this is you, you can get set up for development easily.
Search for "Flow Language Support" in the VS Code extensions panel or install through the marketplace.
- Make sure you have a
.flowconfig
file somewhere in your project. - Make sure you are able to run the
flow
command from the command line (or see Configuration to customize the command or use NPM packaged flow). - Set
javascript.validate.enable
option tofalse
or completely disable the built-in TypeScript extension for your project (see gif below):
- If you install Flow via
flow-bin
(recommended), then we will by default try to use this installation of flow by looking for it innode_modules
. This behavior can be disabled by setting theflow.useNPMPackagedFlow
setting tofalse
. - If you install Flow globally (for example,
npm install -g flow-bin
), make sureflow
is available on yourPATH
. If neither are true, then a version bundled with this extension will be used, but this is discouraged as it may change over time.
You can specify a configuration by amending the VS Code settings.json
file. Access this through Preferences → Settings. You must reload VS Code after installing this extension for these settings to take effect.
-
flow.useNPMPackagedFlow
(default: true) allows using flow from your node_modules for VSCode.Note: Plugin will look for node_modules in
flowconfigDir
and root ofworkspaceFolder
-
flow.pathToFlow
(default: 'flow') Absolute path to flow binary.{ // You can use ${workspaceFolder} it will be replaced by workspaceFolder path "flow.pathToFlow": "${workspaceFolder}/node_modules/.bin/flow" // You can also use var ${flowconfigDir} it will be replaced by flowconfigDir path "flow.pathToFlow": "${flowconfigDir}/node_modules/.bin/flow" // or use some absolute path "flow.pathToFlow": "/home/test/some_path/flow" }
Note: Path is normalized and ".cmd" is added if needed.
-
flow.useBundledFlow
(default: true) fallback to flow bundled with this plugin if nothing else works. -
flow.showUncovered
(default: false) Iftrue
will show uncovered code by default. You can also toggle it later by using command or clicking on status bar widget. -
flow.coverageSeverity
(default: 'info'): Type coverage diagnostic severity. -
flow.lazyMode
(default: null): to override the lazy mode. Prefer to set this in.flowconfig
instead. -
flow.stopFlowOnExit
(default: true) stop flow server on exit from Project. -
flow.useCodeSnippetOnFunctionSuggest
(default: true) Complete functions with their parameter signature. -
flow.enabled
(default: true) you can disable flow for some Project for example.
- Supports multiple flowconfig and vscode multi-root workspaces
- IntelliSense
- Go to Definition / Peek Definition
- Diagnostics (Errors, Warnings)
- Hover type information
- Toggle-able Code Coverage reports
Toggle display of uncovered areas
: Show|hide coverage uncovered areas.Restart Client
: Restarts flow client.Show Client Status
: Show current status of client.Log Client Debug Info
: Log client debug info in output panel.Show Output Channel
: Opens plugin output pannel.
- If you're having problems with syntax highlighting try Babel Javascript.
First, follow the instructions to setup your launch configuration file, launch.json
.
To use flow-remove-types:
- Follow the flow-remove-type Quick Start.
- In
launch.json
, add"runtimeArgs": ["-r", "flow-remove-types/register"]
to the "launch" configuration.
To use Babel:
- Follow the Babel Quick Start.
- Install babel-register.
- In
.babelrc
, add"retainLines": true
. - In
launch.json
, add"runtimeArgs": ["-r", "babel-register"]
to the "launch" configuration.
- please refer to CONTRIBUTING.md
This project exists thanks to all the people who contribute. [Contribute].
Thank you to all our backers! 🙏 [Become a backer]
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]