Cómo configurar ESLint y Prettier con VS Code

El Linting es el proceso de analizar el código en busca de posibles errores, bugs o problemas con los estilo. Ayuda a mantener un estilo de código consistente, mejora la calidad del código y detecta errores comunes en las primeras fases de desarrollo. Dos herramientas populares para el linting de código en el desarrollo web moderno son ESLint y Prettier.

Introducción a Linting, ESLint y Prettier

Para empezar vamos a ver qué son ESLint y Prettier. Seguidamente veremos las ventajas de usar ambos a la vez.

¿Qué es Prettier?

Prettier es un formateador de código que se centra en el formato y la consistencia de los estilos. Formatea automáticamente tu código según reglas predefinidas, haciéndolo más legible y eliminando confusiones o esos eternos debates acerca del estilo del código.

La función de un formateador de código es principalmente la mejora de la apariencia visual, además de garantizar que el código sea consistente. Analiza automáticamente la estructura del código y aplica reglas de formato predefinidas para garantizar un estilo uniforme en todo el código. Los formateadores de código se centran en aspectos como el indentado, los saltos de línea, el espaciado o la ubicación de las llaves y paréntesis de apertura o cierre. El objetivo de un formateador de código como Prettier es estandarizar la apariencia del código, haciéndolo más legible y mejorando la consistencia del código en un proyecto o equipo.

¿Qué es ESLint?

ESLint es un linter que te permite definir reglas personalizadas de linting y hacer cumplir estándares de programación. Ayuda a identificar y corregir posibles errores, obliga a cumplir estilos de código consistentes y promueve las mejores prácticas en tu código.

Un linter de código va más allá del formato y se centra en la corrección, calidad y posibles problemas dentro del código. Los linters analizan el código en busca de posibles errores, bugs, inconsistencias con los estilos o las violaciones de estándares y mejores prácticas de programación. Verifican problemas como variables no utilizadas, puntos y coma faltantes, uso incorrecto de funciones, posibles fugas de memoria y adherencia a convenciones de codificación. Los linters de código como ESLint proporcionan advertencias, errores o sugerencias a los desarrolladores sobre las áreas problemáticas del código, ayudándoles a identificar y corregir posibles problemas durante el proceso de desarrollo. Al hacer cumplir estilos de programación consistentes y detectar errores, los linters mejoran la calidad y mantenibilidad del código, reduciendo la posibilidad de que se introduzcan bugs.

Por qué usar ESLint y Prettier

Combinar ESLint y Prettier en tu flujo de trabajo de desarrollo puede mejorar significativamente la calidad del código, la mantenibilidad y la colaboración dentro de un equipo. ESLint garantiza que tu código cumpla con usa serie de reglas específicas y detecta posibles problemas, mientras que Prettier ayuda a adoptar un formato de código consistente.

Con ESLint y Prettier configurados en tu entorno de desarrollo, puedes centrarte en escribir un código limpio y de alta calidad mientras disfrutas de un formato de código automatizado, con ayudas acerca de cómo programar.

Cómo instalar ESLint y Prettier

En este apartado veremos cómo instalar tanto ESLint como Prettier, además de ver cómo integrarlos con VSCode.

Configura y ESLint y Prettier con React

Inicia un proyecto de React ejecutando el siguiente comando en tu terminal:

npm create vite@latest

Durante la ejecución del comando selecciona React y TypeScript cuando se te pregunte. Una vez creado el proyecto, accede al mismo usando el comando cd y luego ejecuta el comando npm install. Finalmente abre el proyecto en VSCode. ESLint se incluye por defecto junto con Vite, por lo que no es necesario reinstalar ESLint.

1. Elimina el archivo .eslintrc.cjs del directorio raíz del proyecto y reemplázalo por el archivo .eslintrc.json, que deberá tener el siguiente contenido:

   {
     "extends": [
       "standard",
       "plugin:react/recommended",
       "plugin:tailwindcss/recommended",
       "prettier"
     ],
     "rules": {
       "max-len": [2, 250],
       "no-multiple-empty-lines": [
         "error",
         {
           "max": 1,
           "maxEOF": 1
         }
       ],
       "object-curly-newline": 0
     }
   }

2. Luego instala los paquetes necesarios mediante este comando:

   npm install eslint-config-standard eslint-plugin-tailwindcss eslint-config-prettier

   • eslint-config-standard: Es un paquete para hacer cumplir el estilo de codificación estándar. Puedes consultar las reglas aquí.
   • eslint-plugin-tailwindcss: Es un paquete para hacer cumplir el orden lógico de las clases de Tailwind CSS.
   • eslint-config-prettier: Es un paquete para evitar conflictos entre ESLint y Prettier.
3. Instala Prettier usando este comando:

   npm install prettier.

4. Esto ha sido todo.

Más adelantedo veremos cómo configurar VSCode para trabajar con ESLint y Prettier.

Configura ESLint y Prettier con Next.js

Abre una ventana de terminal y ejecuta el comando npx create next-app@latest en el directorio de tu proyecto. Selecciona «sí» cuando se te pregunte si deseas agregar ESLint a tu proyecto.

Una vez hecho esto, abre el proyecto en VSCode y sigue estos pasos:

1. Agregar la configuración de ESLint: Si observas el archivo .eslintrc.json en la raíz de tu nuevo proyecto, verás que ya hay una configuración de ESLint llamada next/core-web-vitals y standard. Es importante conservarla, ya que te advertirá cuando escribas código en tu proyecto de Next.js que afecte al rendimiento del proyecto. Sin embargo, necesitamos agregar otra configuración de ESLint para garantizar un estilo de código consistente, ya que la configuración predeterminada de Next.js no hace mucho para ayudarte a mejorar la calidad de tu código. Instalemos la configuración estándar para seguir estas reglas. Para ello, ejecuta este comando:

   npm install eslint-config-standard

   Esto instalará la configuración estándar de ESLint en tu proyecto. Luego, agrégala a tu archivo .eslintrc.json:

   {
     "extends": ["next/core-web-vitals", "standard"]
   }P

2. Probando ESLint en la Terminal: Ahora que hemos agregado una nueva configuración de ESLint, podemos ejecutarla con este comando para asegurarnos de que esté funcionando:

   npm run lint

   Más adelante, veremos cómo hacer que funcione automáticamente en VSCode cada vez que guardes un archivo.

3. Agrega la configuración de ESLint para TailwindCSS: Tenerlos nombres de las clases bien organizados en Tailwind facilita la lectura y revisión del código. Podemos instalar otra configuración de ESLint que se encargue de esto automáticamente. Para ello usa el siguiente comando:

   npm install eslint-plugin-tailwindcss

   Luego añade el plugin instalado al archivo .eslintrc.json de este modo:

   {
     "extends": ["next/core-web-vitals", "standard", "plugin:tailwindcss/recommended"]
   }

4.  Para evitar que ESLint y Prettier colisionen en ocasiones, que es algo que puede suceder, ejecuta el siguiente comando:

   npm install eslint-config-prettier

   Esto instalará un paquete que elimina todas las reglas de ESLint que podrían entrar en conflicto con Prettier. Una vez instalado, agrega «prettier» a tu archivo .eslintrc.json.

   {
     "extends": ["next/core-web-vitals", "standard", "plugin:tailwindcss/recommended", "prettier"]
   }

5. No olvides instalar Prettier antes de continuar; de lo contrario, las cosas no funcionarán y no sabrás por qué:

   npm install prettier

6. Esto ha sido todo.

A continuación veremos cómo configurar tanto ESLint como Prettier para que se integren con VSCode.

Configura ESLint y Prettier con VS Code

Ahora que todo está configurados, es hora de integrar ESLint y Prettier con VSCode. Para ello, necesitaremos modificar el archivo settings.json o crear una configuración específica para nuestro proyecto que podamos compartir con otros. Optaremos por lo segundo.

Crea la carpeta .vscode en la raíz de tu proyecto de Next.js, y dentro de ella crea el archivo settings.json con el siguiente código:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.addMissingImports": true
  },
  "prettier.tabWidth": 2,
  "prettier.useTabs": false,
  "prettier.semi": true,
  "prettier.singleQuote": false,
  "prettier.jsxSingleQuote": false,
  "prettier.trailingComma": "es5",
  "prettier.arrowParens": "always",
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Esto configura ESLint y Prettier para trabajar dentro de VSCode. Cada vez que guardes tu trabajo, tanto Prettier como ESLint se ejecutarán. Pero para probarlo en acción, hay una última cosa que debemos hacer.

Debes instalar estas tres extensiones en VSCode:

• ESLint
• Prettier – code formatter
• Prettier ESLint

Una vez instaladas, reinicia VS Code. Ahora intenta editar algún proyecto y guarda algunos archivos. Deberías notar que Prettier y ESLint están funcionando correctamente. Para comprobar que el plugin de Tailwind CSS también esté operativo, intenta colocar nombres de clases flex como el último miembro de la clase y observa si se devuelve al frente al guardar.

Esto ha sido todo. Espero que te haya sido de ayuda.

---