Configuración de ESLint usando la guía de estilo React/JSX de Airbnb

Cristian Moreno
Feb 1 · 3 min read

La Guía de estilo React/JSX de Airbnb es la guía de estilo más popular para la codificación en React. En este post, te explicaré cómo implementarlas.

Instalación y uso de ESLint

Puede consultar todas las reglas de ESLint en el sitio web oficial y todas las reglas especiales de React ESLint.

Para iniciar a configurar nuestras reglas ejecutamos el siguiente comando en la consola estando ubicados dentro de la carpeta del proyecto.

Eslint nos preguntará diferentes opciones para configurar el proyecto, entre ellas, el foco de este post, con cual guia de estilos queremos trabajar en el proyecto.

Which style guide do you want to follow?

Al final de responder todas estas preguntas, tendremos configurado nuestro nuestras reglas de ESLint.

Existen algunas reglas que no pueden gustarte o con tu equipo deciden que no quieren trabajarlas, en el archivo .eslintrc.js es donde puedes sobre escribir estas reglas.

Configurar EditorConfig

EditorConfig también es muy útil para mantener estilos de codificación consistentes cuando las personas de nuestro equipo utilizan diferentes editores. EditorConfig es compatible con muchos editores. Puede verificar si tu editor es compatible en el sitio web oficial, http://editorconfig.org.

La configuración que uso es ésta; necesita crear un archivo llamado .editorconfig en su directorio raíz:

Puede afectar a todos los archivos con [*], y archivos específicos con [* .extensión].

Githooks

La ejecución de la validación del linter en nuestro editor o con la Terminal no es suficiente para asegurarnos de que vamos a validar el 100% de nuestro código y que no vamos a inyectar ningún error del linter en nuestros repositorios Git.

La forma más efectiva de estar 100% seguro de que estamos enviando un código validado a nuestros repositorios Git es usar Githooks. Eso significa ejecutar el validador del linter antes de realizar un commit (pre-commit) o ​​antes de un push (pre-push). Prefiero ejecutar el linter en el pre-commit y las pruebas unitarias en el pre-push.

Husky es el paquete que vamos a utilizar para modificar nuestros ganchos Git; Puedes instalarlo con este comando:

Una vez que hayamos agregado este paquete, debemos modificar nuestro package.json y agregar nuevos scripts:

En este caso, en nuestro pre-commit, ejecutaremos nuestro validador de linter y si el validador falla, el commit no se ejecutará hasta que nosotros arreglemos todos los errores del linter. Los hooks de post-merge y post-rewrite nos ayudan a sincronizar nuestros paquetes npm.

Existen mas opciones y herramientas para mejorar y evitar errores en nuestro codigo, todo depende de que queremos controlar.

¡Espero que esto haya sido útil y/o te haya hecho aprender algo nuevo!

Cristian Moreno

Written by

FullStack Javascript Developer and Community builder. Javascript Lover 👨🏻‍💻♥️👨🏻‍🏫 Co-Organize of @MedellinJS @avanet