Instalar el maravilloso static type checker llamado Flow 😄

Photo by Jeremy Bishop on Unsplash

Hoy instalaremos flow by facebook para que poder agregar soporte de tipado estatico en javascript e integrarlo en nuestro editor de codigo vscode para que nuestro codigo sea mas legible y tener la informacion de funciones a la mano con tan solo hacer hover en ellas. Fucking Awesomeee for me 😸

Primero instalamos el preset de flow para babel

yarn add --dev babel-preset-flow

Ahora agregamos la siguiente linea a nuestro archivo .babelrc

{
  "presets": ["flow"]
}

Flow funciona mejor si lo tenemos instalado por proyecto con un tipo de version especifica, que tenerlo instalado globalmente:

yarn add --dev flow-bin

Si por algun motivo flow no reconoce la version instalada en el proyecto tendras que instalarla de manera global:

npm -g install flow-bin

Archivo de configuracion Flow (.flowconfig)

Ahora vamos a crear un archivo de configuración para flow, donde podremos indicarle que directorios excluir entre otras cosas más. El siguiente comando creara un archivo .flowconfig en la raiz de nuestro directorio.

yarn run flow init

Agregaremos lo siguiente al archivo de configuración:

[ignore]
.*/node_modules/*

Anotaciones flow

Flow solo revisara los archivos que contengan el comentario /* @flow */ en la primera linea, asi que deberas agregarlo manualmente en el archivo que deseas que flow revise.

Correr flow

Ahora si hemos hecho todo bien. Bastara con correr el siguiente comando en la consola para que flow empiece a revisar nuestro código:

yarn run flow

Si logramos obtener el siguiente mensaje, ya estamos listos para integrarlo a nuestro editor favorito. En mi caso vscode

Muy bien! Flow esta funcionando correctamente y no ha detectado errores.

Integracion con VSCODE

Para los usuarios vscode, instalaremos la extension para tener usar las maravillosas cosas que nos otorga flow.

Vscode extension for flow

Maravillosa DeV-Experience

Muy importante, para que el vscode nos muestre los errores de flow mientras codeamos es fundamental desactivar el soporte nativo de typescript. Hacerlo como se muestra a continuación:

Desactivar soporte nativo de typescript

NOTA

Si flow te da un error como dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.60.dylib puedes probar hacer lo siguiente:

brew uninstall — ignore-dependencies node icu4c
brew uninstall --force icu4c

Yo utilizo nvm quizás por eso tuve problemas, pero normalmente con el flujo de instalación normal debería funcionar todo.

Ahora si a disfrutar 👽