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.
Se você seguiu exatamente os passos da primeira parte, provavelmente neste momento após o VSCode abrir, irá reparar o seguinte erro:
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-binOutro 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": falsePronto, 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.
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-reportE executamos ele através do comando abaixo:
./node_modules/.bin/flow-coverage-report -i src/**/*.js -o coverage -t text -t html
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!
