Typescript vs Flow - IDE Support 2018-03-25

This is the second post in a series about comparing Typescript and Flow.

In this post I will look for the most popular IDE and will look about how well they support and integrate with Typescript and Flow. I won’t be using any of this IDE, so this won’t include usability, that’s for another post. I’ll just check about how many IDE have support, and how many features for each, if the support is from a first party, or a third party. The order of appearance will be alphabetical. For the sake of web development, I will also add text editors.

Atom

Atom is a free and open source popular text editor, created by Github using web technologies. It have plugins support, and many features available out the box.

Flow

Atom does not have support for Flow out-the-box. But it does have several plugins available for it.

Nuclide

Nuclide is a full IDE created by people at Facebook that has support for Flow built-in. It provides a linter, autocomplete and type coverage support, click-to-definition and type description on hover.
However, it currently lacks support for on-the-fly type-checking (showing your type errors before you save your file).

Flow-IDE

Flow-IDE is a smaller package that only provides you with a linter and autocomplete functionality. It, too, currently lacks support for on-the-fly linting.

Linter-Flow

In case you’re looking for something even more minimal, linter-flow may be worth your attention. It only lints your code and provides no other features, but it does support on-the-fly linting.

Autocomplete-Flow

autocomplete-flow is another purpose-built tool that only does one thing. This package, as the name suggests, will give your flow enabled code autocomplete suggestions and nothing else.

So there are four options, but it actually seems like we would combine at least three of them to have a real IDE experience. I think if I had to chose Atom, I could go with Nuclide and Linter-Flow and see how that works, but I use Windows to develop, just because, and Nuclide does not have full support for Windows. So, that.

Typescript

Atom-Typescript

A Typescript language service for Atom developed by TypeStrong

Well, we don’t have that much of options with Typescript, actually, there are a few where we will get that much of options. This depends on other package atom-ide-ui. On other hand, it have several common used features such as autocomplete, live error analysis, type description on hover, click-to-definition, and compile on save, among others. So, I think you will get all the IDE experience form this.

Emacs

An extensible, customizable, free/libre text editor — and more.

Flow

flow-for-emacs

An emacs plugin for Flow, a static typechecker for JavaScript.

  • Shows errors found by typechecking JavaScript code with Flow.
  • Provides a bunch of common IDE features powered by Flow to aid reading and writing JavaScript code.

I haven’t used emacs, so I don’t know what to expect about this. I do know that you need to setup your environment to work with this. It is however, officially supported, so that is something.

Typescript

tide - Typescript Interactive Development Environment for Emacs

I have the same problem with this. But it does seems to have more features available that the one for Flow. Maybe one of you guys can help me out with this.

Sublime Text

A sophisticated text editor for code, markup and prose.

Flow

Flow

Flow JavaScript analyzer plugin for SublimeText 2 and 3

SublimeLinter-flow

SublimeLinter plugin for JavaScript static type checking, using flow.

Again, we have options. The first actually has not been updated in over 3 years. It seems to runs only in Linux and MacOS, but it does have all the common features of Flow. The other one, have seen more recent releases, but it seems to be a Linter only plugin.

Typescript

Typescript Sublime Plugin

The plugin uses an IO wrapper around the Typescript language services to provide an enhanced Sublime Text experience when working with Typescript code.

This is an official plugin from Microsoft and it seems to have all common used features about Typescript. It is regularly updated and also have support for Linux, Windows and MacOS.

Vim (and NeoVim)

Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient.

Flow

ale - Asynchronous Lint Engine (Vim and NeoVim)

The Asynchronous Lint Engine (ALE) vim-ale plugin for Vim 8+ and NeoVim provides linting of many syntaxes during editing, before files are saved. Supported JavaScript linters include eslint, jscs, jshint, flow, standard, and xo.

Vim-flow (Vim only)

A vim plugin for Flow.

  • Adds completions to omnifunc
  • Checks JavaScript files for type errors on save

Both options seems to cover basic functionality, but ale does the checking on the fly, and vim-flow waits for you to save. Also, ale integrate with other common tools used to lint. vim-flow is the official tool, however, even in the flow IDE page is the second to chose, so. I think I would take the first one.

Typescript

nvim-typescript (NeoVim only)

Provides standard IDE-like features such as auto-completion, viewing of documentation and type-signatures, go to definition, and reference finding.

typescript-vim (Vim only)

Typescript Syntax for Vim.

yats.vim (Vim only)

Yet Another Typescript Syntax: The most advanced Typescript Syntax Highlighting in Vim

Tsuquyomi (Vim only)

Make your Vim a Typescript IDE.

You would probably have to chose one syntax highlighting, and combine it with Tsuquyomi. Tsuquyomi is a client for the TSServer, and will allow you to use completion, go-to-definition and other features to a IDE-like experience. It need for a buffer is saved to check the file. You can check manually with a command, and also it allows you to check the entire project with another command.

Visual Studio Code

Code editing. Redefined. Free. Open source. Runs everywhere.

Flow

Flow Language Support

This provides all the functionality you would expect — linting, intellisense, type tooltips and click-to-definition. It’s stable and under active development.

vscode-flow-ide

An alternative Flowtype extension for Visual Studio Code. Flowtype is a static type checker went to find errors in Javascript programs.

The official plugin, Flow Language Support, seems to have all the features that you are looking in a plugin like this, such as Intellisense, go-to-definition, errors and warnings diagnostics, and others. The Flow IDE also seems to have all this features.

Typescript

Typescript support is build-in on VSCode. VSCode ships its own version of Typescript, so you don’t need to configure anything.

Webstorm

The smartest JavaScript IDE.Powerful IDE for modern JavaScript development.

Both, Flow and Typescript, have a first class support in Webstorm. However, you would need to configure Flow first to be able to use it, whereas to use Typescript, no previous configuration is required.

Additional Supported IDE

Flow

Actually, according to the documentation, Flow support is limited to the IDE already listed.

Typescript

Typescript does have support for other IDE:

Conclusion

I think that overall, Typescript support seems to be better, most of the plugins and IDE that support Typescript use the Typescript Language Service, and I think this is great way to provide features to the clients, and eventually the user.

Flow seems to have this right, and the Flow Language Server is already out, but only Atom appears to use this as today. I hope Flow support improve in the future with more plugins and IDE using this, because at the end they are implementing a long extended protocol, the Language Server Protocol. Today Windows does not seems to be a very supported platform to work with Flow, but they did release a Windows binary recently, so I think this can change.

To develop with Flow better have a Unix like machine to use Nuclide.

To develop with Typescript even when you have more choices, you are safe with VSCode.

Either way you are stuck with Electron consuming your soul for living

Even when you will probably have the same experience coding Flow with Nuclide, that coding Typescript with VSCode, the fact that you can’t even choice the SO bugs me. If you want to be outside the safe zone, you will have to install and configure Flow most of the time that you will need to configure Typescript. For this reason I will score Typescript with an 9, and Flow with a 6. You may see this unfair, but stick with me, the main issue is that you need a Linux machine or a Mac, to be able to run the editor with best Flow support, but if you don’t want one of the Microsoft editors, you probably will end with a really good experience.

Current Score

Feature Typescript Flow
Getting Started 17 16
Editor Support 9 6
Total 26 22

That’s all folks!

Thank you for reading. To all my new followers, hello followers!. Please, check my other post as well. I mainly write about Angular and Typescript. I’ll looking forward to read in your commends your thoughts about this series.