Crea tu propia configuración de ESLint y compártela entre proyectos

Si alguna vez has trabajado en varios proyectos, conoces el aburrimiento de copiar configuraciones de ESLint de un repositorio a otro. Cada vez que empiezas un proyecto nuevo, o partes de cero o copias el archivo eslint.config.js del anterior. Hay una forma mejor: publicar tu propio paquete de configuración de ESLint.

Por qué me encanta antfu/eslint-config

Descubrir @antfu/eslint-config cambió mi forma de configurar ESLint. El paso a "Flat Config" me parecía innecesario, hasta que Anthony Fu creó una configuración que hace que ESLint sea sencillo de montar y de extender.

En lugar de hacer malabares con docenas de plugins, configuraciones y dependencias, instalas un paquete y listo. Por defecto no necesita configuración: lo importas, lo exportas y respeta tu .gitignore. Analiza tu proyecto y activa las reglas adecuadas para Vue, TypeScript o JavaScript, con unos valores por defecto con criterio que puedes sobrescribir.

Además formatea el código, así que en la mayoría de proyectos no necesitas Prettier. Aparte de JavaScript y TypeScript, se encarga de JSON, Markdown y YAML, de modo que ESLint lo gestiona todo.

Para mi stack habitual (Vue y TypeScript), es el mejor punto de partida para configurar ESLint.

¿Por qué crear tu propio paquete de configuración de ESLint?

Extender la configuración de antfu con mis preferencias y plugins es sencillo, porque está pensada para componer la tuya propia. Estoy acostumbrado a acabar las líneas con punto y coma, indentar con 2 espacios y tener el <template> al principio de mis ficheros .vue.

Pero lo importante no son los gustos personales, sino la consistencia y la reutilización. Cuando publicas tu configuración de ESLint como paquete de npm, puedes:

• Añadir plugins de librerías concretas que no pueden entrar en el core de antfu.
• Usarla en todos tus repositorios, con las mismas reglas en todos.
• Versionar tus reglas de linting: actualizas el paquete, subes la versión en tus proyectos y todos tienen las reglas nuevas.
• Compartirla con tu equipo o hacerla pública.
• Mantenerla en un solo sitio en vez de actualizar las mismas reglas en 10 proyectos.

Mi configuración: @angelblanco/eslint-config

Mi configuración, @angelblanco/eslint-config, está disponible en npm y el código fuente está en GitHub:

Cómo crear la tuya

Crear tu propia configuración de ESLint es sencillo. En lugar de empezar de cero, puedes hacer un fork de la mía:

1. Haz fork de @angelblanco/eslint-config.
2. Regístrate en npm con tu usuario de GitHub.
3. Actualiza package.json con el nombre de tu paquete, por ejemplo @tunombre/eslint-config, y el resto de datos.
4. Instala las dependencias con pnpm install.
5. Personaliza las reglas en index.ts.
6. Genera el JavaScript con tsup ejecutando pnpm build.
7. Publícalo con npm publish --access public.
8. Instala @tunombre/eslint-config en el resto de tus repositorios e impórtalo en su configuración de ESLint.

El README de mi repositorio tiene las instrucciones de instalación actualizadas, ejemplos de uso y todas las reglas que he cambiado. Abre un issue si quieres que te eche una mano.

Hazla tuya

No hace falta reinventar la rueda. Parte de algo sólido como @antfu/eslint-config, ajústalo a tu gusto y publícalo. Todo el proceso lleva más o menos una hora, y acabas con una única configuración de linting versionada para todos tus proyectos.

Si trabajas con Vue y TypeScript, prueba la configuración de antfu o la mía. Si ninguna es exactamente lo que buscas, haz un fork y hazla tuya.