¿Qué es un linter? Entender ESLint y su importancia para el código limpio

Cuando varios desarrolladores trabajan en la misma base de código, las incoherencias de estilo y los errores ocultos pueden acumularse rápidamente.
Ahí es donde intervienen los linters, que comprueban automáticamente el código en busca de posibles problemas y aplican un estilo coherente en todo el proyecto.

En este artículo, exploraremos qué es un linter, por qué deberías utilizar uno y por qué ESLint se ha convertido en la herramienta de referencia del ecosistema JavaScript y TypeScript.

Qué detectan los linters

Un linter analiza tu código y detecta diversas categorías de problemas antes de que provoquen errores o incoherencias.

• Errores de sintaxis → Problemas que hacen que el código sea inválido o no pueda ejecutarse. Ejemplos:

  • Paréntesis o llaves que faltan → if (user.isLoggedIn {
  • Cadenas sin cerrar → console.log("Hello)
  • Instrucciones return mal colocadas o ausentes.

• Problemas de calidad del código → Patrones que no rompen la sintaxis, pero pueden provocar errores en tiempo de ejecución o confusión. Ejemplos:

  • Variables sin usar → Declarar const result = computeValue(); sin utilizar nunca result.
  • Código inalcanzable → Tener instrucciones después de un return.
  • Variables que ocultan otras → Reutilizar el nombre de una variable de un ámbito externo.

• Incoherencias de estilo → Diferencias de formato y estilo que dificultan la lectura del código. Ejemplos:

  • Puntos y coma ausentes o sangría incoherente.
  • Utilizar "double quotes" en un archivo y 'single quotes' en otro.
  • Mezclar tabuladores y espacios en la sangría.

• Incumplimientos de buenas prácticas → Código que funciona técnicamente, pero contradice los patrones recomendados. Ejemplos:

  • Utilizar API obsoletas (por ejemplo, ReactDOM.render() en React 18).
  • Utilizar var en lugar de let o const.
  • Llamar a funciones asíncronas sin await.
  • Utilizar == en lugar de ===, lo que puede provocar errores sutiles de conversión implícita de tipos.

Los linters como ESLint hacen más que detectar errores, aplican convenciones y evitan que los malos hábitos lleguen a tu repositorio.

¿Por qué utilizar un linter?

1. Detectar errores pronto

Los linters detectan problemas incluso antes de que se ejecute tu aplicación.
Por ejemplo, ESLint puede advertirte sobre una variable sin definir o un await ausente en una función asíncrona, ahorrándote tiempo de depuración más adelante.

2. Garantizar la coherencia

Un linter aplica un estilo de código unificado en todo el equipo, evitando debates innecesarios sobre tabuladores frente a espacios o dónde colocar las comas.

3. Mejorar la calidad del código

Los linters fomentan un código más limpio y fácil de mantener al advertir sobre patrones complejos o arriesgados (como funciones de retorno de llamada muy anidadas o importaciones sin usar).

4. Integrarse en tu flujo de trabajo

Se ejecutan automáticamente en tu IDE, durante los commits (mediante hooks de pre-commit como Husky) o en canalizaciones CI/CD, manteniendo limpia tu base de código en cada paso.

Enfoque en ESLint: El estándar para JavaScript y TypeScript

ESLint es el linter más popular del ecosistema JavaScript y se utiliza ampliamente en proyectos React, Node.js y TypeScript.

🔧 Funciones principales

• Muy configurable → Personaliza cada regla para adaptarla a tu estilo.
• Ecosistema de plugins → Amplíalo con plugins de la comunidad (por ejemplo, React, Jest, seguridad, accesibilidad).
• Compatibilidad con TypeScript → Integración completa mediante @typescript-eslint.
• Reglas con corrección automática → Muchos problemas pueden corregirse automáticamente con:
  Copiar código

  npx eslint . --fix
  

• Integraciones → Funciona con VS Code, WebStorm, GitHub Actions y casi todos los sistemas de CI.

Configuración de ESLint

Puedes configurar ESLint en tu proyecto con:

npx eslint --init

Si utilizas ESLint v8.23 o posterior, este comando creará un archivo Flat Config llamado eslint.config.mjs (en lugar del formato anterior .eslintrc.json). Este formato moderno utiliza módulos JavaScript y ofrece mayor rendimiento y claridad.

Este es un ejemplo sencillo de configuración que podrías utilizar en un proyecto Next.js + TypeScript:

// eslint.config.mjs
import js from '@eslint/js'
import tseslint from 'typescript-eslint'
import prettier from 'eslint-config-prettier'
import { FlatCompat } from '@eslint/eslintrc'

const compat = new FlatCompat({ baseDirectory: import.meta.dirname })

export default [
  js.configs.recommended, // Core JavaScript best practices
  ...tseslint.configs.recommended, // TypeScript-specific linting
  ...compat.extends('next/core-web-vitals'), // Next.js and React recommendations
  prettier, // Avoid rule conflicts with Prettier
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    rules: {
      'no-console': ['warn', { allow: ['warn', 'error'] }],
      '@typescript-eslint/no-unused-vars': [
        'warn',
        { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
      ],
      semi: ['error', 'always'],
    },
  },
]

Explicación

Veamos qué ocurre en cada parte:

js.configs.recommended

Carga las reglas principales recomendadas de ESLint, que cubren problemas básicos de JavaScript como:

• Variables sin usar
• Código inalcanzable
• Instrucciones de retorno ausentes
• Errores de sintaxis

tseslint.configs.recommended

Añade reglas que tienen en cuenta TypeScript, que detectan, por ejemplo:

• Importaciones sin usar
• Uso incorrecto de tipos
• Variables declaradas pero nunca utilizadas en archivos .ts/.tsx

compat.extends('next/core-web-vitals')

Aplica reglas de Next.js y React, entre ellas:

• Buenas prácticas de accesibilidad (a11y)
• Comprobaciones del uso de React Hooks
• Advertencias sobre problemas de rendimiento (como utilizar <img> en lugar de <Image>)

prettier

Desactiva las reglas de análisis relacionadas con el formato que, de otro modo, entrarían en conflicto con Prettier.

rules

Ajustes personalizados específicos del proyecto:

• 'no-console': ['warn'] → permite console.warn y console.error, pero advierte sobre otras llamadas a la consola.
• '@typescript-eslint/no-unused-vars' → advierte sobre variables o parámetros declarados pero sin usar (ignora los que empiezan por _).
• 'semi': ['error', 'always'] → obliga a utilizar puntos y coma.

Esta configuración te proporciona:

• Análisis fiable de JavaScript + TypeScript
• Buenas prácticas de Next.js integradas
• Compatibilidad automática con Prettier
• Reglas sencillas y claras que hacen que tu base de código sea coherente, legible y esté libre de errores

Una vez creado este archivo, puedes analizar tu proyecto con:

npm run lint

o corregir automáticamente los problemas que admitan corrección:

npm run lint -- --fix

ESLint frente a otros linters

Desde que TSlint quedó oficialmente obsoleto en favor de ESLint, casi todos los proyectos modernos de JavaScript y TypeScript utilizan ESLint hoy en día.

Buenas prácticas para utilizar ESLint

• Combina ESLint con Prettier para dar formato automáticamente al código.
• Añade comprobaciones de ESLint a tus hooks de pre-commit de Git con Husky o lint-staged.
• Ejecútalo en tu canalización de CI para garantizar la calidad del código en las solicitudes de incorporación.
• Puedes utilizar paquetes recomendados como eslint-config-airbnb o eslint-plugin-react

Conclusión

Los linters son esenciales para mantener bases de código limpias, coherentes y libres de errores, especialmente en proyectos colaborativos. Entre ellos, ESLint destaca como la herramienta más flexible y potente para los desarrolladores JavaScript y TypeScript.

Tanto si trabajas solo como en un equipo grande, añadir ESLint a tu flujo de trabajo garantiza que tu código siga siendo profesional, legible y fácil de mantener a largo plazo.

¿Quieres ver ESLint en acción? Consulta su documentación oficial o prueba a añadirlo a tu proyecto con npx eslint --init.