Photo by Mathew Schwartz on Unsplash

Live Flow errors in your IDE

The Flow team has been working hard to make Flow even faster at rechecking your code after you make changes. To supplement that work, here is a new feature that just makes Flow feel faster!

As of v0.110.1, Flow can now show you live errors as you type in your IDE, assuming your IDE’s Flow plugin uses the Flow language server via flow lsp.

Old behavior

Flow would show parse errors as you type, but not type errors. We would only show type errors after you save. Changing a file too much could even cause the errors to disappear.

Demo of the old behavior

New behavior

As you type, Flow will typecheck the file that you are modifying and send back the errors near instantly.

Demo of the new behavior

How this works

1. As you type, your IDE sends onChange notifications to Flow’s language server.
2. The Flow server uses these onChange notifications to build a copy of your modified file.
3. The Flow server looks up the types for all the imports in your modified file.
4. The Flow server typechecks your modified file and sends back the errors. This works even during rechecks, thanks to some prior work!
5. If files change on disk and you have open files in your IDE (e.g. maybe you rebased or saved one file), then Flow rechecks all the open files quickly.

Caveats

• You won’t see live errors until the Flow server starts up and checks the imports of your file.
• Flow uses the saved-to-disk versions of all imports to check your modified files. If A.js imports from B.js, then the live errors for A.js will always use the saved-to-disk version of B.js. If you change B.js, you will need to save it before the live errors for A.js reflect the changes.
• Flow only shows live errors for open files. You need to save in order to see errors in downstream files. For example if you delete an export, you won’t see live errors for the files which import that export until you save. If the modified file is in a cycle, then it is technically downstream from itself. So if you make changes to A.js that would normally propagate through the cycle and affect A.js again, then the live errors won’t reflect that propagation.

Let us know if you find any issues!

Ideally your IDE should show the same errors for a modified file that it would show if you saved it and ran flow status or flow check. If you see any discrepancies, we’d love to know! Please open a github issue!