Cómo configurar ESlint y Prettier en React js

Cuando vas probando y creciendo como frontend se hace más fácil en escribir código y como «buenos profesionales» que somos siempre andamos buscando la forma mejorar. Tanto ESlint y prettier ayudan y mucho para trabajar rápido y de «forma correcta» configurar esas dos herramientas a mi se me complicó y casi mato a todos tratando de configurar ESlint y prettier en React js.

La verdad que hacerlo es «fácil» pero los tutoriales no siempre funcionan como deben funcionar y en el proceso de arreglarlo siempre podemos hacerlo de otra forma, estonces:

Cómo configurar eslint y prettier en React?

Desde hace tiempo que conozco a Prettier y eslint como plugins de VS Code, pero no le había dado la atención necesaria para que ambas funcionen mejor que solo un simple plugin. Pero…

Para qué sirve eslint?

Es un linter que ayuda para formatear y «limpiar» el código de javascript, aunque también nos ayuda mostrando los errores de sintaxis, sugerencias de buenas prácticas entre otras cosas relacionadas a las buenas prácticas.

y Prettier?

Es el formatter mas usado o famoso (antes estaba beatiful, no se si aun continua). Tiene soporte para HMTL, CSS, JavaScript, JSX, TypeScript, GraphQL, etc.

Se encarga de garantizar que el código se ajuste a un estilo consistente de manera automática. Para ello, analiza el código y lo reescribe cada vez que se ejecuta. (info)

Empcemos:

Instalando y configurando ESlint

Lo primero que se hace es tener instalado React, ya sea con Create-react-app o Vite 2.0, no importa como, pero ya deberíamos tener listo para iniciar un proyecto.

He iniciamos instalando eslint con lo siguiente:

npm i eslint -D

Sencillo… hasta ahí, yo creía que estaba ESlint hacía su magia y junto con VSCode me arreglaban todo el código de javascript mágicamente y me conformaba con algunas sugerencias y correcciones que el plugin me sugería, solo hasta ahi.

Pero me faltaba algo… configurar ESlint, para ello seguimos seguimos con:

npx eslint --init

Esto inicializará un menú de opciones en la terminal.

Aquí solo tenemos que seguir nuestros instintos y seleccionar lo que conocemos, por ejemplo:

  • To check syntax, find problems, and enforce code style. Esto nos corregirá lo que pueda corregir, nos mostrará los errores y evitará que publiquemos nuestro código con errores
  • JavaScript Modules (Import / Export) Ahora seleccionaremos el tipo de módulos queremos usar, si utilizar import o require
  • React
  • No, en mi caso no uso TypeScript.
  • Browser, ya que estamos en React

    Ahora viene algo importante, ESlint nos da la opción de usar una guía de estilo ya definida, inspeccionar nuestros archivos JavaScript, etc
  • Use popular guide style. Aqui tendremos tres opciones. (AirBnb, Standard o Google) la muy popular es la guía de AirBnb. Personalmente yo uso Standard.
  • Lo siguiente es una preferencia de cómo queremos el archivo de configuración. JavaScript, para no complicarse.
  • El último paso, nos preguntará antes de instalar todos los paquetes, es solo aceptar y ya tendríamos todo y configurado en el archivo .eslintrc.js

Instalando y configurando Prettier

Prettier hará que nuestro código se vea hermoso y no este lleno de espacios innecesarios :). Para instalar prettier y de una vez los plugins necesarios para que se integre con ESlint.

npm i eslint-plugin-prettier eslint-config-prettier babel-eslint -D

Entonces crearemos un archivo .prettierrc y dentro del archivo colocaremos las opciones que necesitamos en nuestro proyecto.

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

Para ver las opciones de prettier. La documentación

Últimos pasos

Por ultimo, nos vamos al archivo eslintrc.js y escribimos lo siguiente.

# .eslintrc.js
module.exports = {
  "extends": ["airbnb", "prettier"],
  plugins: ['react', 'prettier'],
  rules: {
    "prettier/prettier": ["error"],
    "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }]
  },
};

Otra opciones

Yo he tenido problemas con las reglas en eslint… no me reconocia de ninguna forma el archivo .prettierrc.js o (json) asi que en las reglas del archivo eslintrc.js colocamos todas las opciones que queremos en prettier. Por ejemplo:

rules: {
  'prettier/prettier': [
  'error',
     {
       singleQuote: true,
       trailingComma: 'none',
       arrowParens: 'avoid',
       semi: false
    }
  ],
  'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }]
}

Modificando el settings de VSCode

Ahora modificamos algunas opciones en VSCode, para que cada vez que guardemos el archivo, prettier y eslint hagan su trabajo. Para ellos apretamos el shortcut, Ctrl + Ship + P y buscamos las preferencias.

Configurar eslint y prettier en React en VS Code
Preferences: Open Settings

Una vez hubicado el archivo settings.json, modificamos lo siguiente.

"editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},

Conclusiones

Con todo eso ya habríamos configurado todo nuestro entorno, para iniciar de alguna manera «mejor». Para configurar ESlint y prettier en React no se necesita mucho conocimiento y a medida que te vayas acostumbrando al formateo, tanto de JS como en Html, CSS vas aprendiendo a limpiar tu código, sin necesidad de que lo hagan estos plugins.

PD: Para quienes les encanta trabajar con frameworks de CSS, ya sea: Bulma, Tailwind o Bootstrap. Esto los ayudará cuando estén «codeando» y agregando clases. Les sea mucho más legible su código

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *