Meninunes
Published in

Meninunes

Análise estática com Flow — parte 2

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.

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:

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.

javascript.validate.enable — Erro configuração

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.

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.

Código com 100% coberto pelo Flow
Código com 81.8% coberto pelo 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
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!

--

--

--

Web Development by — Leandro “Little Big” Nunes

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
Leandro Nunes

Leandro Nunes

Software Engineer @ CI&T | https://lnfnunes.com.br

More from Medium

WebStorm. How to create your own file templates

React App with bulma.io

Deploying React app to GitHub Pages

SOLID in component architecture 🎉