Setup Flow with Visual Studio Code
When first time using flow, many people use it through terminal. This is fine but there is a better way to implement Flow to your workflow. Many modern text editors and IDEs like Visual Studio Code and Atom offer extension for Flow that runs the Flow checks every time for example a file is saved and displays the errors right at the editor.
In this post I will cover how to setup Flow extension for Visual Studio Code.
You should have Flow installed to your project via npm. You can install Flow globally but I recommend installing and configuring Flow per project. I have found this the best way especially when I've been working with open source projects because some projects use different versions of Flow than others and if you have Flow installed globally, this can cause mysterious problems.
In order to show errors in the VS Code we need to install the Flow Language Support extension for Visual Studio Code. You can do this by going to the extensions tab (1) in VS Code and searching for "flow" (2). Click "Install" (3) and after the installation is complete click "Reload".
The extension documentation states that you need a .flowconfig file for your project. If you don't already have one, you can generate it by running "flow init".
Note that if you don't have Flow installed globally, you need to run Flow from your project directory with "node_modules/.bin/flow init".
The docs also state that you should disable the built-in TypeScript extension for your project. I found this unnecessary and the Flow extension seemed to be working just fine without disabling the built-in TypeScript extension.
Next let's open a file that is marked as Flow file (has // @flow in it). If you didn't install Flow globally, you should get the following error.
We can fix this by adding flow.pathToFlow variable with appropriate value to VS Code workspace settings. Open workspace settings by typing "workspace settings" to the command palette (Cmd+Shift+P on Mac and Ctrl+Shift+P on Windows).
Add the following line to the json config file.
If you are using newer version of VS Code you might see a settings UI instead of the json file. In that case you can find the setting under Extensions -> Flow Configurations. See the screenshot below.
Adding the extension for Flow to VS Code is pretty much a must if you work with Flow and VS Code. The ability to see the errors right in the editor speeds up the development tremendeously compared to running Flow from terminal.
If you have any questions related to Flow and VS Code please leave them in the comments and I'll be sure to answer them!