Configurar ESLint en React y Visual Code
El estilo de código es un tema muy importante para un desarrollador, en especial cuando se trabaja dentro de un grupo de desarrolladores, todos deben tener un estilo de código común. Deben seguir las mismas reglas para que el código del proyecto en el cual trabajan se vea igual. Esto ayuda a que otros desarrolladores puedan leer tu código fácilmente, manejando un estándar o reglas.
Este Post te ayudará a configurar ESLint en un proyecto creado con create-react-app, pero en general lo podrás configurar en cualquier proyecto con base en React.
Empecemos creando un proyecto con create-react-app, el React Starter más popular dentro de la comunidad (además fue creado por Facebook).
# crear proyecto
npx create-react-app mi-proyecto # entrar a la carpeta
cd mi-proyecto# iniciar react
yarn start // recomendado usar yarn
npm start
Instalar ESLint
Es muy fácil, sólo es correr este comando dentro de la terminalnpm install -g eslintEsto lo va a instalar de manera global, así lo puedes usar en cualquier proyecto.
Ahora vamos a iniciar eslint en nuestro proyecto:eslint --init
Cuando ejecutemos el anterior comando nos va a mostrar en la terminal una lista de opciones, tal cual lo muestra la siguiente imagen:
- Escogemos ‘Use a popular style guide’ y damos enter.
- Luego vamos a escoger ‘Airbnb’
- Nos pregunta si estamos usando React (por obvias razones le decimos que sí ‘y’)
- Por último pregunta lo siguiente ‘What format do you want your config file to be in?’ vamos a escoger ‘JSON’.
La guía de estilo (Style Guide) de Airbnb es una de las más populares y completas para aplicar a nuestros proyectos, si quiere saber un poco más pueden verla en el siguiente enlace: https://github.com/airbnb/javascript/tree/master/react
Los pasos anteriores van a generar un archivo .eslintrc.jsonen el vamos a incluir el siguiente bloque de código el cual contiene las reglas para estilar nuestro proyecto:
Luego hay que añadir un nuevo comando en nuestro package.json
Si estas configurando eslint para react-native solo cambiar la ruta de la aplicación src/ por app/
// package.json
"scripts": {
// ...
"lint": "eslint src/",
"lint:fix": "eslint src/ --fix"
},Por último editamos la configuración de Visual Code para que nos formatee y nos muestre los errores cada vez que guardamos un archivo
// .vscode/settings.json
{
"prettier.eslintIntegration": true,
"editor.formatOnSave": true
}Con esto terminamos espero que sea de gran ayuda para sus proyectos, pueden dejar sus comentarios o seguirme en Twitter y Github.
Bonus
Hay varios paquetes en Visual Code que nos facilitará un poco más a la hora de codear, aquí te dejo algunos:
