ESLint One for All Made Easy

Bien. ¿Cómo están todos? Bien. Hola a todos, y muchas gracias por estar aquí y no esperaba que hubiera tantos de ustedes aquí, así que gracias.

Estoy muy contento de estar aquí en JS Nation.

Así que, primero déjenme presentarme un poco. Bien, funcionó. Bien. Y sí, mi nombre es Anthony Fu, y soy co-miembro de Vite, Vue y Knox, y también el creador de Vite's LightDev, Uno CSS Type Challenges y Elk. También soy el mantenedor de ESLink, StylistLink y Cheeky2slash. Actualmente estoy trabajando en Nuzlab en el equipo de frameworks y pueden encontrarme en los enlaces, con los enlaces a continuación.

Así que, como pueden ver, estoy bastante entusiasmado con el código abierto y eso me ha llevado a trabajar en muchos proyectos. Así que, me encanta construir herramientas y resolver los problemas que encuentro. Como, por ejemplo, la diapositiva que están viendo está impulsada por SlideF, una herramienta de presentación basada en markdown que está construida sobre tecnologías web. Nació cuando descubrí que las herramientas existentes no eran lo suficientemente flexibles para presentar mi código. Así que, de manera similar, cuando miré ESLink y su ecosistema hace unos meses, encontré que muchas cosas son muy interesantes pero aún no están completamente exploradas. Así que, hoy me gustaría compartir con ustedes algunos de mis hallazgos y prácticas durante mis recientes exploraciones al respecto. Y de hecho, esta es, como, una charla de 30 minutos pero descubrí que solo tengo 20 minutos, así que necesito apresurarme y espero que no les importe.

Así que, 11 años desde que ESLink salió, en este momento, es fácilmente una de las herramientas más populares que básicamente usamos en cada proyecto. Y a pesar de haber estado alrededor por tanto tiempo, es una herramienta que sigue mejorando y evolucionando constantemente. Y hoy, me gustaría dar un tema ambicioso como ESLinks One for All Made Easy, y compartir con ustedes algunas de las nuevas perspectivas y los patrones de uso de ESLink con las últimas características que acaban de lanzar.

Así que, probablemente han oído, como, ESLink versión 9.0 se lanzó hace aproximadamente dos meses, y el principal destaque es que la versión principal está lanzando el nuevo sistema de configuración llamado Flat Config. Así que, antes de comenzar, me gustaría hacer una encuesta rápida aquí, como, ¿alguna vez han oído hablar de, como, ESLink Flat Config? ¿Podrían levantar la mano por mí? Bien. Eso es mucho. Bien. ¿Y cuántos de ustedes ya están usando o migrando a ESLink? Bien. Eso es unos pocos, como, ¿veintitantos? Bien. Bien. Gracias. Y así, para aquellos que aún no están en Flat Config, hoy estoy aquí para decirles por qué deberían.

Así que, en caso de que nunca hayan oído hablar de ello, permítanme hacer una rápida comparación entre la configuración heredada de ESLink RSA y la nueva Flat Config para ustedes. Y diferenciar entre esos dos formatos de configuración es bastante sencillo, y la configuración heredada se nombra con .ESLinkRC que soporta varias extensiones como podrías tener, como, .js, .jsum, o a veces también puedes leer la configuración desde tu package.jsum. Y en la Flat Config, por otro lado, solo se carga desde ESLink.config.ts, un archivo de configuración de JavaScript que es la única fuente de elección.

Y cuando se trata de reutilizar el... Espera. Oh. ¿Qué pasó? Y, spoiler, ¿demasiado? Bien. De nuevo. Está bien.

Probablemente mi tecla de choque comienza. Así que, cuando se trata de reutilizar la configuración compartida, el formato de configuración heredado utiliza implícitamente extensiones basadas en convenciones para cargar la configuración desde tus módulos locales de nodo. Y, por cierto, esto fue creado antes, como, teníamos módulos ESL o algo así. Así que, necesitarías aprender un poco sobre, como, cómo funciona esta convención y saber cómo se resuelve y cómo se mapea al paquete que tienes. Bueno, la Flat Config usará importaciones nativas de ESL donde es más explícito y también te da más control. Y para los plugins, toma un array de cadenas. Solía tomar un array de cadenas, lo cual nuevamente también está basado en convenciones y acoplado con el nombre del paquete del plugin. Y ahora, en la Flat Config, toma un objeto de nombre para los plugins. Y esto significa que ahora puedes renombrar este plugin fácilmente o cambiar a un fork sin verte obligado a cambiar las reglas de los arrays en tu configuración. Así que, también, la naturaleza inherente de las extensiones podría resultar en una estructura de árbol muy compleja porque la configuración compartida también puede tener anidaciones en extensión dentro. Así que, en la Flat Config, se simplifica mucho, donde importas explícitamente una configuración compartida como múltiples objetos o arrays y puedes componerlos en un solo array plano. Así que, por eso se llama Flat Config.

Entonces, para dar un poco más de contexto, aquí hay un gráfico que dibujé para demostrar la línea de tiempo. Aunque la Flat Config podría sonar nueva para algunos de ustedes, en realidad ha estado planificada durante cinco años ya. El RFC fue creado en enero de 2019 y la primera implementación está disponible en la versión 8.21 como experimental, que es hace dos años, y se volvió estable en 8.45 y ahora se convierte en predeterminada recientemente en V9. Y en el medio, ESLinux ha empujado mucho. También ha publicado múltiples entradas de blog para explicar la razón por la que quieren introducir el nuevo formato y compartir la hoja de ruta del plan de implementación. Y eso es mucho esfuerzo gastado a lo largo de estos cinco años de plan. Así que, un gran respeto al equipo de ESLinux. Y como mencionamos en una diapositiva anterior, el mayor beneficio de Flat Config ahora es en JavaScript donde tienes control total y también usas importaciones nativas para resolver los plugins y las configuraciones, haciendo que la herencia y la sobrescritura sean mucho más simples.

Y porque está completamente en JavaScript, la configuración compartida ahora puede ser una función de fábrica que toma las opciones del usuario. Y el usuario podría tener mucha capacidad para personalizar cómo se componen esas configuraciones para sus necesidades específicas. Así que, antes de hablar sobre cosas nuevas emocionantes, permítanme primero pasar rápidamente por las herramientas para migrar la configuración heredada a la nueva Flat Config, en caso de que las necesiten. Recientemente tenemos un COI llamado ESLink slash migration config que convierte automáticamente su código heredado a una Flat Config. Y algunas utilidades de tiempo de ejecución para compatibilidades fueron introducidas automáticamente en el camino. Así que, les recomendaría que revisen los documentos de ESLink para la guía de migración para obtener instrucciones más detalladas porque me estoy quedando sin tiempo.

Bien. Y ahora, hablemos de las nuevas herramientas interesantes y cómo habilitan las nuevas posibilidades con los nuevos formatos. Así que, la primera es la ESLink config inspect, una herramienta de desarrollo visualizada que permite inspeccionar y jugar con su configuración final resuelta. Y puedes ejecutarla ejecutando ESLink dash dash inspect config en tu COI que está bajo la ruta del proyecto donde tienes la Flat Config. Y abre una página del navegador con la interfaz de usuario como la que ves a la derecha. Y, sí.

Así que, lo primero que hace es renderizar cada elemento de configuración que tienes, y puedes ver toda la lista de configuraciones aquí porque es plana. Y es un, aquí tengo una configuración bastante compleja con muchos elementos de configuración. Pero con el nombre proporcionado por cada configuración, puedes ver y entender fácilmente el propósito de cada uno de ellos. Y también puedes expandir los elementos para ver cómo contribuyen a esta configuración final. Así que, aquí puedes ver estas reglas como he instalado estos plugins y algunas reglas. Y también, puedo hacer clic en el, aquí tengo una, como una breve descripción de las reglas. Y también, puedo hacer clic para ver que hay un enlace a los documentos. Bien. Puedes encontrar cómo esto está configurado. Y también, como puedes ver, así es como contribuye a los lenguajes y también, quiero decir, muchas cosas.

Y así, puedes ver que, está bien, este JSON también se aplica para los archivos para los JSONs. Y así, ya que en ESLint puedes tener diferentes, está bien, quiero decir saltando entre monitores. Está bien. Sí. Y también, como también puedes tener un probador de archivos aquí para decir que si me gustaría ver cómo mi archivo está siendo emparejado porque sabes que en ESLint puedes tener diferentes conjuntos de reglas aplicadas para diferentes tipos de archivo o más granularmente como cada ruta de archivo exacta o nombre de archivo según una elección con un objetivo. Así que, puedes ingresar, puedes ingresar el nombre del archivo aquí como para decir si quiero verificar para app.view. Así que, puedes ver cómo estas reglas están siendo emparejadas y esas son específicas para view y aquí está porque view también está en esto, también soporta TypeScript. Así que, las reglas de TypeScript están habilitadas para view también. Y también puedes tener como, también puedes como, aquí tienes un tipo completo, autocompletar. Y puedes tener un paquete de JSON como habilito reglas JSONC para ello. Así que, ahora puedes básicamente tener una mejor comprensión de cómo tus reglas están funcionando en tu proyecto. Y aquí también puedes tener otra pestaña llamada reglas que lista todos los plugins que instalaste y todas las reglas que tienes de esos plugins. Y aquí estoy viendo el uso pero puedes hacer clic en todo lo cual es como todas las reglas disponibles pero que no estás usando. Aquí como la correcta es la que estoy usando y aquí no, no estoy usando. Y también puedes filtrar con las recomendadas. Así que, puedes ver que puedo decir como recomendadas no usadas. Y esas son como las reglas que son recomendadas por el plugin también pero no las habilité. Y luego puedes pasar por para ver si deberías habilitarlas o como hay muchas cosas que puedes hacer también como aquí, puedes hacer clic y puedes ver todas las reglas obsoletas que probablemente necesites migrar también. Así que, esto solo te da una rápida como visión general de qué son estas cosas. Y aquí está el, aquí está los archivos de configuración que tengo por ejemplo. Y esto es en realidad un enlace en vivo al, al, al dev, al inspector. Sí. Y así aquí como, porque como la flat config puede ser como la config puede ser una función de factor que toma opciones de alto nivel. Así que, aquí tengo la config que se llama antfu es mi config y expone algunas opciones aquí. Así que, aquí podemos ver que tengo reglas de TypeScript habilitadas pero en realidad puedo, puedo simplemente cambiar a falso. Está bien. Y deshabilitarlo y verás que las reglas de TypeScript se han ido. Y también puedo hacer más. Es como, puedo hacer, hacer un objeto. Así que, si quiero tener como reglas conscientes de tipo, como puedo proporcionar TS link, TS config pass y está bien.

Así que, sí. Es difícil. Y cuando, cuando lo guardo, verás que aquí habilité los analizadores conscientes de tipo y también las reglas conscientes de tipo. Y esas son como las de alto nivel, por lo que los usuarios finales de esta configuración no necesitan preocuparse por cómo funciona internamente. Así que, intentaré, explicaré esto un poco más.

Está bien. Solo recuperaré mi ratón. Está bien. Entonces, para hacer la configuración, para hacer la personalización de la configuración más fácil, también hice una pequeña biblioteca llamada ESLink flat config utilities. Por ejemplo, aquí está la configuración plana que podríamos tener, depende de cómo se construya la configuración compartida. Algunos podrían ser un objeto de configuración planificada, algunos podrían ser un array, y algunos podrían ser un constructor que devuelve un objeto, un array, o incluso una promesa, donde necesitas resolverlos y aplanarlos en un solo array.

Entonces, en ese caso, eres responsable de unirlos. Y con las utilidades de configuración, hice una función de utilidad llamada compose que resolverá automáticamente diferentes tipos de configuración. Así que, también resuelve promesas y las fusiona juntas. Entonces, en ese caso, básicamente no necesitas preocuparte por cuál es el formato de la configuración. Y también proporciona una acción encadenable donde podemos insertar configuraciones adicionales en cualquier lugar que desees o sobrescribir alguna configuración sin necesidad de manejar la fusión manualmente. Y luego, gracias a la flexibilidad y al tener el contexto completo disponible en la configuración plana, también hace posible la generación de tipos.

Así que, simplemente envolviendo todo el array de configuración con tu exportación a la función de generación de tipos, que no te mostré aquí, pero lo hará generando un archivo DTS local basado en los plugins que has instalado. Y te proporcionará el autocompletado y la verificación de tipos para todas las reglas que estás usando. Y eso es como si no necesitaras tener los plugins de ESLint funcionando para TypeScript. Pero puedes, puedes hacerlo funcionar en tu, en tu espacio de usuario para cualquier plugin.

Y así aquí, me gustaría retomar el título Uno para Todos, que es maximizar la flexibilidad y la personalización, personalizabilidad. Y ahora es posible tener una única configuración compartida que cubra todos los diferentes tipos de proyectos. Así que, puedo hacer una comparación rápida aquí para mostrar lo que quiero decir. Y en una nueva configuración plana, una configuración compartida puede ser una función de fábrica que toma opciones de usuario que no podíamos hacer en la configuración laxa. Imagina si mi configuración, quiero que mi configuración funcione tanto en proyectos TypeScript como no TypeScript proyecto, un proyecto de vista y no vista, necesitaría hacer un monoreport para publicar esas diferentes configuraciones para diferentes combinaciones. Y como puedes ver, realmente no escala bien porque están duplicando y la cantidad de combinaciones para cada opción. Más tarde podría querer tener una versión React y TS React. Así que, la configuración plana te permite proporcionar una opción semántica para activar cada característica dinámicamente y hacer que una única configuración sea adoptable.

Así que, debido a eso, también podríamos tener abstracciones de alto nivel para absorber la complejidad subyacente y proporciona la interfaz de configuración mínima como prettier, que el usuario final no necesita preocuparse por los detalles subyacentes mientras todavía tenemos el control total como todavía tenemos el control total cuando el usuario realmente quiere hacerlo. Así que, digo que es como una configuración mínima como prettier pero todavía tan poderosa como personalizable como ESLint. Sí. Así que, la configuración plana también hizo posible que el meta framework proporcione un proyecto donde configurar. Por ejemplo, como en Nuxt, tenemos un enrutamiento basado en archivos, componentes de autoimportación, directorios de API del lado del servidor. Quiero decir, cada archivo bajo diferentes carpetas con diferentes nombres podría tener un propósito diferente o una restricción diferente. Así que, en Nuxt, teníamos el módulo ESLint de Nuxt, que está generando una subconfiguración basada en la configuración del proyecto del usuario donde el usuario puede extender y puede agregar sus propias reglas personalizadas encima de ella. Así que, esta es solo una dirección de posibilidades con la configuración plana que estamos explorando actualmente. Pero creemos que tendremos un enfoque más interesante proveniente de la comunidad dado que la configuración plana todavía es bastante nueva.

Y, bien, tengo unos minutos. Bien. Y el otro tema que quiero mencionar hoy es el hecho de que ESLint es realmente más que un linter. Para mí, veo ESLint como un kit de herramientas AST maduro y poderoso que tiene un gran ecosistema detrás porque tenemos toda la integración para diferentes IDEs, etcétera. Así que, lo primero es que ESLint puede ser un formateador. Y esto es más bien, ciertamente no es nuevo. Quiero decir, como muchos proyectos ya han estado usando ESLint desde el principio. Aunque este tema es un poco controvertido, podrías escuchar a personas diciendo que deberías usar un formateador dedicado como Prettier o Deep Print, para mí, todo se reduce a esas reglas estilísticas para ESLint que requieren mucho esfuerzo de mantenimiento. Así que, el año pasado, el equipo de ESLint y TypeScript ESLint decidió deprecar todas esas reglas estilísticas del núcleo. Y luego inicié los proyectos estilísticos de ESLint reuniendo todas esas reglas estilísticas para JSTS, JSX en estas organizaciones y tenemos una comunidad para seguir manteniéndolas. Y así, personalmente, seguiré usando ESLint como formateador ya que lo veo mucho más flexible y personalizable que Prettier debido a la naturaleza de ESLint. Así que, si estás usando como aquí tengo un atasco.

Bien, sí. Aquí tengo un pequeño consejo. Como si estás usando VS Code, puedes configurar la acción de código del editor al guardar para corregir automáticamente los errores de ESLint y luego puedes usar personalizaciones de reglas de ESLint para silenciar las reglas estilísticas en tu ID para que no acumules estas líneas de error para la regla estilística. Mientras que aún puedes obtener características de corrección automática de tu ID. Y principalmente estoy trabajando, principalmente uso VS Code, así que probablemente haya una opción similar para los otros editores de código.

Entonces, por qué las reglas de ESLint son esencialmente una función para, mientras que esa regla de ESLint es esencialmente una función que toma código y AST e informa errores e información de corrección opcional. Así que, realmente no tiene que ser linting. Lo que significa que ESLint también puede ser una buena herramienta para codemode. Como por ejemplo, hice el comando de plugin de ESLint que hace en demanda micro codemode. Así que, aquí puedo reproducir un video. Espero que todavía tenga tiempo.

Bien. Bien. Así que, como puedes ver aquí en el video, es como si pudiera poner un comentario mágico para decir que funcione encima de una función de error. Al guardar, se convierte automáticamente en una declaración de función sin que tenga que mover estas cosas manualmente. Necesitas eliminar los errores o algo. Y de manera similar, también puedes tener un mantener ordenado y encima de un objeto, para que siempre puedas mantenerlo ordenado. Bien. Puedes tener como un mantener único en un array para asegurarte de que elimine automáticamente todas las duplicaciones. Y aquí, también podemos tener como un regex elevado encima de regex. Le damos un nombre. Cuando lo guardas, elevará tu regex al nivel superior para una especie de mejora de rendimiento o algo así. Y también, puedes tenerlo. Puedes convertir un if else en un ternario. Lo guardas, por favor. Y luego puedes tener muchas cosas. Esos son solo algunos ejemplos. Y también esto puede ser muy personalizable y puedes proporcionar tu propio comando personalizado con solo como si supieras un poco sobre AST, no debería ser difícil para ti escribirlo como una de las reglas. Incluso para como migrar tu base de código porque también tienes el reportero y también porque ESLint tiene un reportero y puedes decidir cuándo guardas estos archivos y también puedes ignorarlo. Es como básicamente, tienes más controles y todo este kit de herramientas ya está para que hagas el modo de código.

Bien. De acuerdo. Regresa. Regresa. ¿Dónde está mi ratón? Bien. De acuerdo. Y finalmente, me gustaría mencionar que ESLint también puede ser un linter para muchos otros lenguajes además de JavaScript. Como probablemente sepas, ese TypeScript ESLint hace que ESLint entienda TypeScript y TypeScript no es JavaScript, por cierto. Y también tenemos como ESLint config view para componentes de archivo único de Vue, ESLint plugin para componentes de Svelte componentes, ESLint plugin Astro para Astro y también tenemos el ESLint plugin JSON files. Eso es lo cual es muy útil para mí decir que puedo ordenar ciertos campos en un cierto archivo JSON. Por ejemplo, mantengo mis dependencias listadas. Estoy usando esta regla para mantener mi lista de dependencias del package de JSON siempre ordenada. Y de manera similar, también tenemos soporte para YAML, TOM. Como puedes ver, hay muchas de esas herramientas que vienen de OTA, Meshi. Así que, él es realmente increíble y también tenemos un graph ESLint y HTML ESLint, ESLint MDX y también recientemente hice un ESLint plugin format que usa prettier o deeper para formatear archivos que CSS. Eso no tiene completamente la integración de ESLint pero puedes usarlo para formatear. Así que, esos son solo algunos que podría listar aquí y también puedes consultar el ESLint RFC número 99 en el que están tratando de hacer ESLint más agnóstico al lenguaje para soportar ESLint para más lenguajes más fácilmente.

Así que, para resumir el tema de hoy, me gustaría decir que ESLint hace posible ser uno para todos en dos aspectos. Como puedes ver, puedes tener una configuración para todos los proyectos y también como, pueden ser una herramienta para todo lo relacionado con la verificación de código y las modificaciones. Así que, si quieres aprender más, puedes consultar mi configuración personal de ESLint que uso todos los trucos que mencioné hoy. Estoy un poco halagado de ver que aunque no tenía la intención de que esta configuración fuera utilizada por otros, terminó siendo bastante popular para tener 3,000 estrellas en más de 30,000 proyectos en GitHub que lo están usando. Así que, no estaba tratando de venderte mi configuración pero espero que pueda darte una buena referencia para que construyas tu propia configuración compartida que pueda ser tanto poderosa como flexible. Así que, gracias. Y eso es todo por mi charla. Puedes encontrar mi presentación en NTFU. Bien. ¿Puedo verlo? Entonces, ¿cómo funciona la nueva configuración plana en un repositorio mono? ¿Podemos tener solo una configuración con ella o podemos tener múltiples configuraciones? Quiero decir, por ESLint en sí, generalmente toma una configuración de ESLint. Así que, hay como dos maneras de hacer eso es como si tuvieras múltiples configuraciones de ESLint y ejecutas ESLint en múltiples paquetes. Es como pero eso no es eficiente y lo que podrías hacer es como en mis utilidades de configuración plana, puedes tener extend que reescribirá todas las rutas que tienes para la configuración de ESLint. Así que, puedes tener múltiples configuraciones y extenderse entre sí para que se convierta automáticamente en la ruta de específica para ese proyecto.

Así que, aún es posible, puedes tener un solo archivo pero puedes extender desde múltiples con una ruta específica. Bien. Esto es muy útil porque es algo. Encontré que migrar a la configuración plana es difícil porque muchos plugins no soportan la configuración plana todavía. ¿Qué aconsejas que la gente debería hacer? Quiero decir, cuando ESLint salió por primera vez hace como dos meses, las herramientas estaban un poco atrasadas y recientemente anunciaron algunos paquetes compatibles como uno que está arreglando la API del plugin y otro que está convirtiendo automáticamente y también puedes usar la extensión anterior con algo como un flat config compact o algo así y puedes hacer eso. No lo mencioné en mi diapositiva pero definitivamente revisa la última documentación. Debería tener suficiente información para ti.

Bien. Entonces, hay nuevos documentos allí que te ayudarán con eso? Sí. De lo contrario, puedes enviar un issue allí. Quiero decir, están haciendo una herramienta de migración. Deberían, estamos listos para ayudar. Somos como desarrolladores que solo abren muchos issues y te molestan. Eso es open source y tienes... Muy bien.

Siguiente. ¿Cómo te mantienes al día con el desarrollo de herramientas cruzadas integrando con prettier, por ejemplo? Y supongo que tocaste esto con el... Como, ¿la nueva versión va a reemplazar prettier o porque tienes el estilo ESLint int? ¿O todavía vas a jugar bien con prettier en lo que respecta a ESLint? Sí. Definitivamente puedes usar ESLint con prettier si lo necesitas. Bien. Es como... Creo que es más como una elección personal. Puedes gustar usar diferentes formateadores para hacer el formateo. Y para mí, como... Sí, es como porque creo que ESLint tiene más flexibilidad de la que quiero porque prettier, ya sabes, es famoso por tener una configuración muy mínima, lo cual es genial. Pero cuando tienes más... Cuando quieres más controles, realmente no funciona para ti. Así que soy una persona muy opinada. Quiero todos los controles de todas las cosas. Así que ESLint es algo que me ha ayudado a lograr eso mejor. Así que quiero decir, está definitivamente bien si prefieres usar prettier. Todas las herramientas deberían estar funcionando. Solo necesitas deshabilitar los conflictos. Sí.

Genial. Así que hay una última pregunta que realmente quiero hacer porque también tenía curiosidad sobre esto. ¿Qué software de presentación estás usando? ¿Y cómo funciona esta integración del IDE? Porque qué presentación tan increíble.

Fue realmente genial de ver. Gracias. Sí, se llama SlideF, que está construido sobre Vite y Vue. Y puedes... Básicamente está basado en markdown. Así que básicamente, cuando estoy trabajando en diapositivas, estoy trabajando en un archivo markdown. Y estoy usando algo como un separador para separar mis diapositivas. Y luego puedo hacer lo que quiera con la web. Así que puedes incrustar una aplicación si quieres. Puedes usar componentes. Puedes hacer componentes interactivos. Y el IDE que tengo es Monanko. Y configuré TypeScript para ello. Y las diapositivas son en realidad un iframe, enlazando a otra página. Así es como funciona. Sí. Fantástico.

Muy bien. Creo que eso es todo el tiempo que tenemos para esta sesión. Un aplauso más, por favor, para Anthony. Gracias. Wow. Fantástico.