Como desarrolladores sabemos que una de las cosas más importantes al momento de construir una aplicación es la consistencia de nuestro código así como asegurarnos de perder el menor tiempo posible revisando si hay algún error de sintaxis o algo que represente una potencial falla en nuestro proyecto.

Es ahí donde entran las herramientas que nos ayudan a resolver estos problemas como JsHint, JsLint o Eslint que nos permiten configurar parámetros para encontrar código que no se apegue a guías específicas específicamente para javascript.

Pero empecemos con lo interesante, sabes que en muchas ocasiones lo que menos queremos es tomar tiempo configurando cosas y optamos por utilizar herramientas que nos faciliten este proceso, como es el caso de los que desarrollamos con react… el útil create react app.

Esta herramienta que desarrolló el equipo de facebook ya tienen configuradas varias opciones con webpack como el transpilador de código, servidor, procesador de estilos y lo que nos importa para este post… EsLint para revisar nuestro código, create react app crea una configuración por nosotros con reglas predefinidas pero ¿Qué pasa si queremos hacer alguna modificación?

La realidad es que es muy sencillo, primero que nada tenemos que ejecutar el comando yarn eject esto con el fin de tener el control completo de la configuración de create react app, una vez hecho eso, tenemos que crear el archivo donde pondremos nuestra propia configuración, llamado .eslintrc

Este archivo debe de ser creado a la misma altura de nuestro archivo .gitignore y la carpeta src y es aquí donde pondremos la configuración que queramos para eslint.

Es importante mencionar que esta configuración sustituirá a la que crea el create react app y de igual forma cabe señalar que en la versión 2 de create react app al ejecutar el comando :

$ yarn eject (ó npm)

encargado de exponer toda la configuración que por defecto genera esta herramienta ya no tendremos un archivo .eslintrc visible.

Una vez creado este archivo basta con colocar la configuración en el:

// .eslintrc{  
 “rules”: {  
 “jsx-a11y/anchor-is-valid”: 0  
 }  
}

En este ejemplo estamos colocando una regla básica que queremos sustituir pero hay muchas más que pueden ver directo en la documentación de eslint.

Es posible que al correr el proyecto tengamos algún error debido al cambio que hemos hecho y a la configuración definida en webpack por el create react app.

Sin embargo la solución es muy simple. Basta con indicarle a eslint que extienda las reglas predefinidas quecreate react app tiene, de esta forma:

// .eslintrc{  
   "extends": "react-app", // extendemos reglas de create react app  
   "rules": {  
      "jsx-a11y/anchor-is-valid": 0  
   }  
}

Una vez hecho esto no debemos tener ningún error presente en la consola y podremos agregar todas las reglas que queramos o modificar las existentes de create react app .

Enlaces relacionados

• JsHint
• Eslint
• JsLint