Generador de configuración de ESLint
Responde unas preguntas sobre tu proyecto y obtén un eslint.config.js moderno en formato plano para ESLint 9, además de los paquetes exactos que debes instalar. Cubre JavaScript y TypeScript (incluido el linting con información de tipos), React con reglas de Hooks y de accesibilidad, Node.js, globales de pruebas y Prettier.
Última actualización:
eslint.config.js
Cómo usar Generador de configuración de ESLint
- Elige una configuración rápida como React + TypeScript o Node.js, o ajusta las opciones tú mismo.
- Elige el lenguaje y el framework: TypeScript añade typescript-eslint; React añade los plugins de React, Hooks y, opcionalmente, accesibilidad.
- Selecciona el entorno (navegador, Node.js, globales de pruebas) y si tus archivos usan módulos ES o CommonJS.
- Activa reglas extra y la compatibilidad con Prettier, y lista las carpetas que se deben ignorar.
- Copia la configuración y el comando de instalación, guarda el archivo en la raíz de tu proyecto y ejecuta
npx eslint ..
¿Qué paquetes añade cada opción?
| Opción | Paquete | Qué añade a la configuración |
|---|---|---|
| Siempre | eslint, @eslint/js, globals | js.configs.recommended y globales del entorno |
| TypeScript | typescript-eslint, typescript | Parser, plugin y el conjunto de reglas recommended o strict |
| React | eslint-plugin-react | react.configs.flat.recommended y la configuración jsx-runtime para React 17+ |
| Rules of Hooks | eslint-plugin-react-hooks | rules-of-hooks (error) y exhaustive-deps (advertencia) |
| Accesibilidad | eslint-plugin-jsx-a11y | Comprueba texto alternativo, etiquetas, ARIA válido y soporte de teclado en JSX |
| Buenas prácticas de Node.js | eslint-plugin-n | Imports que faltan, funciones de Node.js no compatibles, API obsoletas |
| Prettier | eslint-config-prettier | Desactiva las reglas que entran en conflicto con el formato de Prettier |
Migrar de .eslintrc a flat config
- Las cadenas
extendspasan a ser imports."extends": ["eslint:recommended"]pasa a serjs.configs.recommendedimportado de@eslint/js. envpasa a serlanguageOptions.globals."env": { "browser": true }pasa a serglobals: { ...globals.browser }.- Los
overridespasan a ser objetos separados con su propio patrónfiles, aplicados en orden. .eslintignorepasa a serignoresdentro del archivo de configuración.- Los niveles de gravedad de las reglas no cambian:
"off","warn","error"(o 0, 1, 2), opcionalmente con opciones en un array.
El formato es cosa de un formateador: crea una configuración a juego con el generador de configuración de Prettier y mantén la sangría coherente entre editores con el generador de EditorConfig.
Preguntas frecuentes
¿Qué es la configuración plana (flat config) de ESLint?
La flat config es el formato de configuración introducido en ESLint 8.21 y que pasó a ser el predeterminado en ESLint 9. En lugar de archivos .eslintrc con cadenas extends, exportas un array de objetos de configuración desde eslint.config.js e importas los plugins y las configuraciones compartidas directamente como módulos de JavaScript.
¿Mi archivo debe ser eslint.config.js o eslint.config.mjs?
Usa eslint.config.js cuando tu package.json tenga "type": "module", porque el archivo usa import y export. En un proyecto CommonJS, llámalo eslint.config.mjs, que siempre se trata como módulo ES, o elige eslint.config.cjs para usar require y module.exports.
¿Qué hace defineConfig?
defineConfig() de eslint/config (ESLint 9.22 y posteriores) añade comprobación de tipos y acepta arrays anidados, así que las configuraciones compartidas como tseslint.configs.recommended se pueden listar sin el operador spread. globalIgnores() deja claro que los patrones se aplican a todo el proyecto. Desmarca la opción para obtener un array exportado simple para versiones anteriores de ESLint 9.
¿Qué es el linting con información de tipos?
typescript-eslint puede usar la información de tipos del compilador de TypeScript para reglas como no-floating-promises y no-misused-promises. Necesita un tsconfig.json y hace el linting más lento. La configuración generada activa projectService y desactiva las reglas con información de tipos para los archivos .js simples.
¿Cómo uso ESLint junto con Prettier?
Deja que Prettier se encargue del formato y ESLint de la calidad del código. Marca la opción de Prettier para añadir eslint-config-prettier como último elemento, lo que desactiva todas las reglas de ESLint que podrían entrar en conflicto con el resultado de Prettier. Ejecuta Prettier por separado o en tu editor al guardar.
¿Qué pasó con .eslintignore?
La flat config no lee .eslintignore. Pon las rutas ignoradas en la propia configuración, como un objeto con solo la clave ignores o con globalIgnores(). node_modules y .git se ignoran automáticamente.
¿Se sube algo?
No. La configuración se genera en tu navegador y tus elecciones solo se recuerdan en el almacenamiento local de este navegador.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.