Generador de ESLintrc

Qué contiene la configuración generada

El generador parte siempre de eslint:recommended y añade exactamente lo que implican tus selecciones:

• env con browser y/o node, más es2022
• @typescript-eslint/parser y plugin:@typescript-eslint/recommended cuando TypeScript está activado
• plugin:react/recommended cuando React está activado
• no-console y no-unused-vars establecidas en warn

El resultado es un objeto JSON sencillo con la forma clásica de .eslintrc.json, listo para pegar y ampliar con tus propias reglas.

Configuración plana vs heredada

ESLint 9 desaprobó el formato .eslintrc.* a favor de la configuración plana (eslint.config.js). Diferencias clave:

Los nuevos proyectos deben usar configuración plana. Los proyectos existentes pueden permanecer en heredado a través de la línea 10.x, pero se recomienda la migración.

Ecosistema de plugins

Plugins típicos para proyectos React/TS:

@typescript-eslint/eslint-plugin
@typescript-eslint/parser
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-jsx-a11y
eslint-plugin-import
eslint-config-prettier

Eso son seis paquetes para una configuración con criterios moderadamente marcados. El generador añade los que selecciones, así que solo instalas lo que la configuración referencia.

Coexistencia con Prettier

Prettier maneja el formato; ESLint maneja la corrección y el estilo más allá del formato. Para evitar conflictos:

1. Instala eslint-config-prettier y añádelo como el ÚLTIMO elemento en tus extends/config.
2. Esto desactiva todas las reglas de ESLint que entran en conflicto con la salida de Prettier.
3. Ejecuta Prettier por separado (al guardar en el editor, en el gancho de pre-commit, en CI).

No uses eslint-plugin-prettier en nuevos proyectos; ralentiza ESLint al ejecutar Prettier dentro de ESLint. Separa las dos herramientas.

Consejos para ajustar reglas

• Comienza laxo, ajusta más estricto. Habilita advertencias antes de errores.
• Sobreescribe para pruebas. Los archivos de prueba a menudo necesitan no-unused-expressions relajado y globals de Jest disponibles.
• Sobreescribe para scripts. Los scripts de construcción pueden necesitar globals de Node sin añadir env: node globalmente.
• Documenta las sobreescrituras. Cada sobreescritura de regla merece un comentario explicando por qué.

Configuración que coincide con tu editor

VS Code necesita la extensión ESLint instalada y configurada. Añade esto a la configuración de tu espacio de trabajo para auto-corrección al guardar:

{
  "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" },
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}