Live Flow errors in your IDE

Gabriel Levi
Oct 25, 2019 · 3 min read

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.

New behavior

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

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!

Flow

The official publication for the Flow static type checker…

Thanks to Jordan Brown

Gabriel Levi

Written by

Flow

Flow

The official publication for the Flow static type checker for JavaScript. Code faster. Code smarter. Code confidently.

More From Medium

More from Flow

More on Flow from Flow

More on Flow from Flow

What we’re building in 2020

Andrew Pardoe
Mar 9 · 4 min read

368

More on Flow from Flow

More on Flow from Flow

Improvements to Flow in 2019

Andrew Pardoe
Feb 19 · 4 min read

200

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade