Flow + Vim — The long journey

A few months ago, I started to work at Loggi, a company focused in change the way that we talk about Logistics. There, I found an awesome and new stack built in top of React, Relay and Graphql, using ESLint and Flow for code quality.

If you don't know Flow, I encourage you to look deep into it, is a static checker, created by Facebook, that analyze your code and could find common errors/typos in your code.

Something that is common and knew for all developers, is that if you have new technologies, you will find new challenges and that is the case about Flow.

As editor I use Neovim, that is how they describe "a refactor, and sometimes redactor" of traditional Vim, so, when I faced Flow, the first thing was look for a Vim plugin and here start the problem, Facebook created vim-flow plugin, but since is something new, it didn’t work as expected.

Why? If you're used to Syntastic or Neomake you gonna feel little uncomfortable with the way that vim-flow works, you cannot customize the way that errors are printed or show an signal/letter in line that error occured.

My next solution, was use a feature available in Syntastic and Neomake, that is create custom maker, basically, you define a exe/bin that will be executed with the options that you pass, and, the stdout, will be used for Syntastic/Neomake.

Here I found a new problem, the result of Flow is pretty ugly and impossible to be used by Neomake, to solve this problem, was necessary find something that parse the result from Flow. After a research I found a npm module, called flow-vim-quickfix, that received a JSON from Flow and parse it for Neomake.

At this point, the things were much better than in beginning, but there was still one problem, Flow was checking the whole project and not the current file, generating a noisy result.

Looking into Flow documentation (that is really poor), I found a solution, that is use flow check-contents , enabling you to flow the content that you pass in stdin, after that, I started to work in a way to pass the current file as stdin for Flow and arrived in this config:

" == Neomake ==
function! FlowArgs()
let g:file_path = expand('%:p')
return ['-c', g:flow_path.' check-contents '.g:file_path.' < '.g:file_path.' --json | flow-vim-quickfix']
let g:flow_maker = {
\ 'exe': 'sh',
\ 'args': function('FlowArgs'),
\ 'errorformat': '%E%f:%l:%c\,%n: %m',
\ 'cwd': '%:p:h'
\ }
let g:neomake_warning_sign = {
\ 'text': 'W',
\ 'texthl': 'WarningMsg',
\ }
let g:neomake_error_sign = {
\ 'text': 'E',
\ 'texthl': 'ErrorMsg',
\ }
let g:makers = ['eslint', 'flow']
let g:neomake_javascript_enabled_makers = g:makers
let g:neomake_jsx_enabled_makers = g:makers
let g:neomake_javascript_flow_maker = g:flow_maker
let g:neomake_jsx_flow_maker = g:flow_maker
autocmd! BufWritePost * Neomake

Just remembering, is necessary to have flow-vim-quickfix installed globally to work.

Let’s Flow \o/

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.