Análise estática com Flow — parte 2

Leandro Nunes
Oct 17, 2017 · 4 min read
Image for post
Image for post

Na primeira parte da série sobre Flow, vimos como os primeiros passos de como instalar e fazer a análise estática do código via linha de comando. Agora nesta segunda parte, iremos ver como integrar de forma mais natural e com feedback direto no editor.

Irei abordar aqui a configuração no VSCode, pois é meu editor atual. Porém se você utiliza algum outro, pode olhar na documentação se seu editor possui suporte a algum plugin equivalente.

Para o VSCode, a extensão que utilizo e Flow Language Support, basta procurar na aba de extensions, clicar em install e depois reload.

Image for post
Image for post
Flow Language Support extension

Se você seguiu exatamente os passos da primeira parte, provavelmente neste momento após o VSCode abrir, irá reparar o seguinte erro:

Image for post
Image for post
Flow Language Support extension — Erro após instalação

Isso é porque instalamos o flow de forma local e não global e um dos requisitos da extensão é que o flow seja instalado global (como o próprio erro sugere), desta forma estamos informando para a extensão onde encontrar o executável do flow.

npm i -g flow-bin

Outro detalhe é que temos que desligar a validação de JavaScript nativa do VSCode, pois isso irá conflitar com a sintaxe do Flow, pois como eu disse no post anterior, não estamos mais utilizando JS puro e o lint VSCode irá acusar erros de sintaxe, parecido com a imagem abaixo.

Para resolver também é simples, aperte “ctrl+,” para abrir as configurações do usuário e busque pela palavra chave “javascript.validate.enable” e altere o valor para false.

"javascript.validate.enable": false

Pronto, a partir deste momento temos o Flow integrado diretamente no nosso editor VSCode. Legal, mas e o que eu ganho com isso!?
A partir deste momento, o VSCode passa a fazer a validação do arquivo em tempo real.

Image for post
Image for post

Outra coisa legal que a extensão nos mostra em tempo real assim que salvamos o arquivo é o quanto de cobertura que o código está suportado pela análise estática do Flow.

A porcentagem de cobertura é exibido no rodapé do VSCode e atualizado sempre que salvamos o arquivo.

Observe que é marcado com um tracejado verde abaixo das áreas onde o Flow detecta que está faltando cobertura.

E que tal se pudermos adicionar essa análise de cobertura ao processo de CI (Integração Contínua), como o Travis por exemplo, onde poderia ser validado a cobertura do código novo antes de aprovar aquele Pull Request ?

Para isso iremos instalar o package flow-coverage-report.

npm i -D flow-coverage-report

E executamos ele através do comando abaixo:

./node_modules/.bin/flow-coverage-report -i src/**/*.js -o coverage -t text -t html
Image for post
Image for post
Relatório de cobertura gerado pelo flow-coverage-report

Além do resultado ser exibido diretamente no terminal, uma pasta coverage será criada e dentro dela terá um index.html onde é possível abrir no navegador e visualizar cada arquivo e cobertura de forma mais detalhada.

Observe como refatorei os npm-scripts do package.json a fim de facilitar os comandos.

No próximo post pretendo abordar alguns exemplos práticos de declaração de tipos e validações que conseguimos adicionar com Flow.
Espero que estejam gostando, ajude a compartilhar e deixe seu comentário caso possa melhorar em algum ponto!

Meninunes

Web Development by — Leandro “Little Big” Nunes

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store