Archivo eslint.config.js #

Este archivo es el corazón de la configuración de ESLint para tu proyecto. ESLint es una herramienta de linting (análisis estático de código) que identifica patrones problemáticos encontrados en el código JavaScript/TypeScript. Ayuda a mantener la calidad del código, la consistencia del estilo y a prevenir errores comunes.

• Descripción: eslint.config.js es un archivo de configuración moderno de ESLint (basado en el nuevo sistema de configuración plana introducido en ESLint v8.x). Define un conjunto de reglas, plugins y opciones de lenguaje para analizar el código de la aplicación, especialmente para JavaScript, TypeScript y React.
• Propósito:
  • Mejorar la Calidad del Código: Detecta errores potenciales, malas prácticas y antipatrones en el código.
  • Forzar la Consistencia del Estilo: Asegura que todo el equipo siga las mismas convenciones de estilo de código.
  • Prevenir Bugs: Identifica problemas que pueden llevar a errores en tiempo de ejecución.
  • Integración con TypeScript y React: Configura ESLint para entender y lintear código TypeScript y las "Reglas de los Hooks" de React.
• Secciones Clave de la Configuración Plana:
  • export default tseslint.config(...): Utiliza el nuevo sistema de configuración plana de ESLint (introducido en ESLint v8.x). tseslint.config es una utilidad de typescript-eslint para crear una configuración de forma segura con tipos.
  • { ignores: ['dist'] }:
    • Significado: Define un patrón global para archivos y directorios que ESLint debe ignorar. En este caso, ignora la carpeta dist, que contiene el código compilado de producción, ya que no necesita ser linterado.
  • Segundo Objeto de Configuración ({ extends: ..., files: ..., languageOptions: ..., plugins: ..., rules: ... }): Define una configuración específica que se aplica a un conjunto de archivos.
    • extends: [js.configs.recommended, ...tseslint.configs.recommended]:
      • Significado: Extiende configuraciones recomendadas de ESLint:
        • js.configs.recommended: Reglas generales recomendadas para JavaScript de ESLint.
        • tseslint.configs.recommended: Reglas recomendadas de typescript-eslint, que añaden reglas específicas y configuraciones para TypeScript.
    • files: ['**/*.{ts,tsx}']:
      • Significado: Esta configuración se aplica solo a archivos JavaScript/TypeScript (.ts, .tsx) en cualquier subdirectorio (**/*).
    • languageOptions: Opciones relacionadas con cómo el código es parseado.
      • ecmaVersion: 2020: Define la versión de ECMAScript a la que se adhiere el código.
      • globals: globals.browser: Utiliza el paquete globals para predefinir variables globales disponibles en entornos de navegador (ej., window, document), evitando advertencias de "variable no definida".
    • plugins: Define los plugins de ESLint que añaden nuevas reglas.
      • 'react-hooks': reactHooks: Habilita el plugin eslint-plugin-react-hooks, que aplica las "Reglas de los Hooks" de React (ej., llamar Hooks solo en componentes funcionales o Hooks personalizados, y siempre en el mismo orden).
      • 'react-refresh': reactRefresh: Habilita el plugin eslint-plugin-react-refresh, que ayuda a asegurar que el "Fast Refresh" de React funcione correctamente en desarrollo.
    • rules: Define reglas específicas o sobrescribe las reglas heredadas.
      • ...reactHooks.configs.recommended.rules: Incluye todas las reglas recomendadas del plugin eslint-plugin-react-hooks.
      • 'react-refresh/only-export-components': ['warn', { allowConstantExport: true }]: Una regla específica de react-refresh que advierte si los componentes no se exportan de forma adecuada para el "Fast Refresh". allowConstantExport: true permite exportaciones como export const MyComponent = () => {...}.
• Rol en el Proyecto: eslint.config.js es una herramienta de calidad de código esencial. Forma parte del proceso de desarrollo para garantizar que el código cumpla con los estándares definidos, es crucial para la colaboración en equipo y ayuda a prevenir bugs, haciendo que el proceso de desarrollo sea más eficiente y el código final más fiable.

// eslint.config.js

import js from '@eslint/js' // Configuración base de JavaScript de ESLint
import globals from 'globals' // Utilidad para definir variables globales
import reactHooks from 'eslint-plugin-react-hooks' // Plugin para las reglas de los Hooks de React
import reactRefresh from 'eslint-plugin-react-refresh' // Plugin para optimizar React Fast Refresh
import tseslint from 'typescript-eslint' // Integración de ESLint con TypeScript

// Configuración de ESLint utilizando el nuevo formato plano
export default tseslint.config(
  // Primer objeto de configuración: Define patrones de archivos a ignorar globalmente.
  { ignores: ['dist'] }, // Ignora la carpeta 'dist' (código compilado) para el linting

  // Segundo objeto de configuración: Configuración principal para archivos TypeScript/React.
  {
    // Aplica esta configuración solo a archivos TypeScript y TSX.
    files: ['**/*.{ts,tsx}'],

    // Extiende configuraciones recomendadas para JavaScript y TypeScript.
    extends: [js.configs.recommended, ...tseslint.configs.recommended],

    // Opciones del lenguaje.
    languageOptions: {
      ecmaVersion: 2020, // Define la versión de ECMAScript (JavaScript) soportada.
      globals: globals.browser, // Define variables globales de entorno de navegador (ej., 'window').
    },

    // Define los plugins de ESLint a utilizar.
    plugins: {
      'react-hooks': reactHooks,   // Habilita reglas para los Hooks de React.
      'react-refresh': reactRefresh, // Habilita reglas para React Fast Refresh.
    },

    // Define reglas específicas o sobrescribe reglas de las configuraciones extendidas.
    rules: {
      // Incluye todas las reglas recomendadas del plugin de React Hooks.
      ...reactHooks.configs.recommended.rules,
      // Regla específica para React Fast Refresh: advierte si los componentes no se exportan correctamente.
      'react-refresh/only-export-components': [
        'warn', // Muestra una advertencia (no un error)
        { allowConstantExport: true }, // Permite exportaciones como 'export const MiComponente = () => {}'
      ],
    },
  },
)