Introducir el nuevo formato de configuración plana de ESLint y ver cómo puede mejorar en gran medida nuestra experiencia tanto para los creadores de reglas como para los usuarios. Hacer la caja negra transparente y fácil de entender.
This talk has been presented at JSNation 2024, check out the latest edition of this JavaScript Conference.
Thank you, Anthony, for this presentation. My only regret is that it was so short and that you had to hurry. I hope I'll be able to see and hear you live sometime! Thank you once more <3
Great talk and thanks for the information. Within my team, devs (and myself) find it confusing to know when ESLint or Prettier is doing all the work. I'll try and test if Stylistic would do the necessary work for me (instead of Prettier) and might propose it to the team afterwards.
Video Summary and Transcription
ESLint es una herramienta popular y en constante mejora que ofrece control total y simplicidad en JavaScript con importaciones nativas. La nueva Configuración Plana simplifica la estructura de árbol compleja de las configuraciones compartidas y ha estado en desarrollo durante cinco años. Permite la personalización y generación de tipos, maximizando la flexibilidad. ESLint se puede utilizar como un formateador y una herramienta para el modo de código, proporcionando más opciones de control y personalización. También admite otros lenguajes y se puede integrar con prettier. Migrar a la Configuración Plana puede ser desafiante, pero existen paquetes y herramientas compatibles disponibles para ayudar con la transición.
¡Hola a todos! Gracias por estar aquí. Soy Anthony Fu, miembro colaborador de Vite, Vue y Knox. Estoy emocionado de compartir mis descubrimientos y prácticas con ESLink. ESLink es una herramienta popular y en constante mejora. Hoy hablaré sobre ESLink One for All Made Easy y las nuevas características en la versión 9.0, como Flat Config. Si no has oído hablar de ello, explicaré por qué deberías considerar usarlo.
Muy bien. ¿Cómo les va a 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 permítanme presentarme un poco. Bien, funcionó. Bien. Sí, mi nombre es Anthony Fu, y soy miembro colaborador 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 trabajo en Nuzlab en el equipo de framework y pueden encontrarme en los enlaces que están debajo. 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. Por ejemplo, como 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 code. De manera similar, cuando investigué ESLink y su ecosistema hace unos meses, descubrí que muchas cosas eran muy interesantes pero aún no se habían explorado completamente. Así que hoy me gustaría compartir con ustedes algunos de mis descubrimientos y prácticas durante mis exploraciones recientes en torno a ello. Y en realidad, esto es, como, una charla de 30 minutos pero veo que solo tengo 20 minutos, así que tengo que apurarme y espero que no les importe. Así que, 11 años desde que salió ESLink, en este momento, es fácilmente una de las herramientas más populares que básicamente usamos en todos los proyectos. Y a pesar de haber estado presente durante tanto tiempo, es una herramienta que sigue mejorando y evolucionando constantemente. Y hoy me gustaría abordar un tema ambicioso como ESLink One for All Made Easy, y compartir con ustedes algunas de las nuevas perspectivas y los patterns de uso de ESLink con las últimas características que acaban de lanzar. Probablemente hayan escuchado, como, ESLink versión 9.0 que se lanzó hace aproximadamente dos meses, y el punto destacado principal es que la versión principal está implementando 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 ESLink Flat Config? ¿Podrían levantar la mano por favor? Vale, eso es mucho. Vale. Y cuántos de ustedes ya están usando o han migrado a ESLink? Vale, eso son unos pocos, como, ¿20 y algo? Vale. Bien. Gracias. Y para aquellos que aún no han utilizado Flat Config, hoy estoy aquí
2. Comparación de la configuración heredada de ESLink y la configuración plana
Short description:
Vamos a comparar la configuración heredada de ESLink RSA con la nueva configuración plana. La configuración heredada utiliza .ESLinkRC y extensiones basadas en convenciones, mientras que la configuración plana utiliza ESLink.config.ts e importaciones nativas. Con la configuración plana, puedes cambiar fácilmente el nombre o cambiar de plugins sin modificar las reglas del array. Simplifica la estructura de árbol compleja de las configuraciones compartidas y ha estado en desarrollo durante cinco años. ESLinux ha puesto mucho esfuerzo, publicando entradas de blog y compartiendo la hoja de ruta. El mayor beneficio de la configuración plana es el control total y la simplicidad que ofrece en JavaScript con importaciones nativas.
para decirte por qué deberías hacerlo. Entonces, en caso de que nunca hayas oído hablar de ello y aquí, permíteme hacer una rápida comparación entre la configuración heredada de ESLink RSA y la nueva configuración plana para ti. Y diferenciar entre esos dos formatos de configuración es bastante sencillo, y la configuración heredada se llama .ESLinkRC y admite varias extensiones basadas en convenciones, como .js, .jsum, o a veces también puedes leer la configuración desde tu package.jsum. Y en la configuración plana, por otro lado, solo se carga desde ESLink.config.ts, un archivo de configuración JavaScript que es la única fuente de elección. Y cuando se trata de reutilizar... Espera. Oh. ¿Qué pasó? Y, spoiler, ¿demasiado? De acuerdo. De nuevo. Bien. De acuerdo. Probablemente mi tecla de choque comienza. Entonces, cuando se trata de reutilizar la configuración compartida, el formato de configuración heredada 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, tenemos módulos ESL o algo así. Entonces, necesitarías aprender un poco sobre, como, cómo funciona esta convención y saber cómo se resuelve y cómo se asigna al paquete que tienes. Bueno, la configuración plana utilizará importaciones nativas de ESL, donde es más explícito y también te brinda más control. Y para los plugins, toma una matriz de cadenas. Solía tomar una matriz de cadenas, que nuevamente también está basada en convenciones y está acoplada al nombre del paquete del plugin. Y ahora, en la configuración plana, toma un objeto de nombre para los plugins. Y esto significa que ahora puedes cambiar fácilmente el nombre de este plugin o cambiar a una bifurcación sin tener que cambiar las reglas del array en tu configuración.
Además, la naturaleza inherente de las extensiones puede resultar en una estructura de árbol muy compleja porque la configuración compartida también puede tener extensiones dentro de ella. Entonces, en la configuración plana, se simplifica mucho, donde importas explícitamente una configuración compartida como múltiples objetos o matrices y puedes componerlos en una sola matriz plana. Por eso se llama configuración plana.
3. Nuevas Posibilidades con la Configuración Plana y las Herramientas
Short description:
La Configuración Plana ha estado en desarrollo durante cinco años y recientemente se convirtió en la configuración predeterminada en la versión 9. Ofrece control total y simplicidad en JavaScript con importaciones nativas. Ahora, la configuración compartida puede ser una función de fábrica, lo que permite a los usuarios personalizar sus configuraciones. Una herramienta de migración, ESLink/migration config, convierte automáticamente el código heredado a la Configuración Plana. La herramienta de inspección de configuración de ESLink visualiza la configuración final resuelta, lo que permite una fácil inspección y comprensión de cada elemento de configuración.
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 Configuración Plana puede sonar nueva para algunos de ustedes, en realidad ha estado planeada 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, lo cual fue hace dos años, y se volvió estable en la 8.45 y ahora se convierte en la predeterminada recientemente en la V9. Y en el proceso, ESLinux ha hecho mucho esfuerzo. También han 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 invertido en estos cinco años de planificación. Así que, un gran respeto al equipo de ESLinux. Y como mencionamos en una diapositiva anterior, el mayor beneficio de la Configuración Plana ahora está en JavaScript, donde tienes control total y también puedes usar importaciones nativas para resolver los plugins y las configuraciones, lo que hace que la herencia y la anulación sean mucho más simples. Y debido a que está completamente en JavaScript, la configuración compartida ahora puede ser una función de fábrica que toma las opciones de los usuarios. Y el usuario tiene mucha capacidad para personalizar cómo se componen esas configuraciones para satisfacer sus necesidades específicas. Entonces, antes de hablar sobre cosas nuevas emocionantes, permítanme primero repasar rápidamente las herramientas para migrar la configuración heredada a la nueva Configuración Plana, en caso de que las necesiten. Recientemente hemos creado una CLI llamada ESLink/migration config que convierte automáticamente su código heredado a una Configuración Plana. Y se han introducido automáticamente algunas utilidades en tiempo de ejecución para garantizar la compatibilidad. Así que les recomendaría que consulten la documentación de ESLink para obtener una guía de migración con instrucciones más detalladas porque se me está acabando el tiempo. Bien. Y ahora, hablemos de las interesantes nuevas herramientas y cómo habilitan las nuevas posibilidades con los nuevos formatos. La primera es la herramienta de inspección de configuración de ESLink, una herramienta de desarrollo visualizada que permite inspeccionar y jugar con su configuración final resuelta. Puede ejecutarla ejecutando ESLink dash dash inspect config en su CLI que se encuentra en la ruta del proyecto donde tiene la Configuración Plana. Y se abrirá una página del navegador con la UI como la que se muestra a la derecha. Y, sí. Lo primero que hace es mostrar cada elemento de configuración que tienes, y puedes ver todos los elementos de configuración enumerados aquí porque es plano. Y 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 comprender fácilmente el propósito de cada uno de ellos. También puedes expandir los elementos para ver cómo contribuyen a esta configuración final. Aquí puedes ver reglas como los plugins que he instalado y algunas reglas. Y también puedo hacer clic en, aquí tengo una breve descripción de las reglas. Y también puedo hacer clic para ver que hay un enlace a la documentación. De acuerdo. Puedes encontrar así cómo se establece. Y también, como puedes ver, así es como contribuye a los lenguajes y también, yo
4. Inspección y Personalización de la Configuración de ESLink
Short description:
ESLint permite aplicar diferentes conjuntos de reglas para diferentes tipos de archivos o rutas. La herramienta de inspección de configuración de ESLink visualiza la configuración final resuelta y enumera todos los plugins y reglas instalados. Puedes filtrar las reglas por recomendadas o no utilizadas, y verificar las reglas obsoletas. Los archivos de configuración pueden ser una función de fábrica con opciones de alto nivel, lo que permite la personalización. Las reglas de TypeScript se pueden habilitar/deshabilitar, y se pueden proporcionar reglas conscientes del tipo con rutas de TS link y TS config.
Quiero decir, muchas cosas. Y así, puedes ver que, bueno, este JSON también se aplica a los archivos para los JSON. Y así, ya que en ESLint puedes tener diferentes, bueno, quiero decir, saltando a monitores. De acuerdo. Sí. Y también, como puedes ver, también puedes tener un probador de archivos aquí para ver cómo se está emparejando mi archivo porque sabes que en ESLint puedes tener diferentes conjuntos de reglas aplicados para diferentes tipos de archivo o de forma más granular, como cada ruta de archivo exacta o nombre de archivo según la elección con un objetivo. Entonces, puedes ingresar, puedes ingresar el nombre de archivo aquí para decir si quiero verificar app.view. Así puedes ver cómo se emparejan estas reglas y son específicas para view y aquí está porque view también está en esto, también admite TypeScript. Entonces, las reglas de TypeScript también están habilitadas para view. Y también puedes tener, aquí tienes un autocompletado de tipo. Y puedes tener un paquete de JSON donde habilito reglas JSONC para él. Ahora puedes tener una mejor comprensión de cómo funcionan tus reglas en tu proyecto. Y aquí también puedes tener otra pestaña llamada reglas que enumera todos los plugins que has instalado y todas las reglas que tienes de esos plugins. Y aquí estoy viendo las que uso, pero puedes hacer clic en todas, que son todas las reglas disponibles pero que no estás usando. Aquí a la derecha está la que estoy usando y aquí no la estoy usando. También puedes filtrar por las recomendadas. Así puedes ver que puedo decir no utilizadas recomendadas. Y esas son las reglas que son recomendadas por el plugin pero que no he habilitado. Luego puedes revisar para ver si deberías habilitarlas o si hay muchas cosas que también puedes hacer aquí, puedes hacer clic y ver todas las reglas obsoletas que probablemente también necesites migrar. Entonces, esto te da una visión general rápida de qué son estas cosas. Y aquí están los archivos de configuración que tengo, por ejemplo. Y esto es en realidad un enlace en vivo al, al, al inspector. Sí. Y aquí, como la configuración plana puede ser una función de fábrica que toma opciones de alto nivel. Aquí tengo la configuración que se llama antfu es mi configuración y expone algunas opciones aquí. Así que aquí podemos ver que tengo las reglas de TypeScript habilitadas, pero en realidad puedo cambiarlo a falso. De acuerdo. Y deshabilitarlo y verás que las reglas de TypeScript desaparecen. Y también puedo hacer más. Por ejemplo, puedo hacer un objeto. Entonces, si quiero tener reglas conscientes del tipo, puedo proporcionar un enlace de TS,
5. Personalización de la Configuración y Generación de Tipos
Short description:
La biblioteca de utilidades de configuración de ESLink proporciona una función de composición que resuelve automáticamente diferentes tipos de configuración, incluyendo promesas. También permite insertar configuración adicional y anulaciones, facilitando la personalización. Con el contexto completo disponible en la configuración plana, se vuelve posible la generación de tipos.
TS config pasar y bien. Entonces, sí. Es difícil. Y cuando, cuando lo guarde, verás que aquí habilité los analizadores conscientes del tipo y también las reglas conscientes del tipo. Y esas son como las alturas, por lo que los usuarios finales de esta configuración no necesitan preocuparse por cómo funciona internamente. Entonces, intentaré, explicaré esto un poco más adelante. De acuerdo. Solo recuperaré mi ratón. De acuerdo. Entonces, para facilitar la personalización de la configuración, también hice una pequeña biblioteca llamada Utilidades de Configuración Plana de ESLink. Por ejemplo, aquí está la configuración plana que podríamos tener, dependiendo de cómo se construya la configuración compartida. Algunos pueden ser un objeto de configuración plana, otros pueden ser un array, y algunos pueden ser un constructor que devuelve un objeto, un array o incluso una promesa, donde necesitas resolverlos y aplanarlos en un solo array. En ese caso, eres responsable de unirlos. Y con las utilidades de configuración, hice una función de utilidad llamada `compose` que resuelve automáticamente diferentes tipos de configuración. También resuelve promesas y los fusiona juntos. En ese caso, básicamente no necesitas preocuparte por el formato de la configuración. Y también proporciona una acción canalizable donde podemos insertar configuración adicional en cualquier lugar que desees o anular 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,
6. Maximizando la Flexibilidad con la Configuración Plana
Short description:
Al envolver todo el array de configuración con la función de generación de tipos, puedes generar un archivo DTS local para autocompletar y verificar tipos. Uno para todos: una única configuración que cubre todos los tipos de proyectos. La configuración plana permite alternar dinámicamente las opciones semánticas. Proporciona una interfaz de configuración mínima como prettier, al tiempo que ofrece un control total cuando sea necesario. También permite a los meta frameworks como Nuxt generar sub-configuraciones basadas en la configuración del proyecto del usuario.
también hace posible la generación de tipos. Entonces, 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 generará un archivo DTS local basado en los plugins que hayas instalado. Y te proporcionará autocompletado y verificación de tipos para todas las reglas que estés utilizando. Y eso es como si no necesitaras tener los plugins de ESLint funcionando para TypeScript. Pero puedes hacer que funcionen en tu propio código para cualquier plugin. Y aquí, me gustaría retomar el título Uno para todos, que maximiza la flexibilidad y la personalización. Y ahora es posible tener una única configuración compartida que cubra todos los diferentes tipos de proyectos. Entonces, puedo hacer una rápida comparación 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 tome opciones del usuario, lo cual no podíamos hacer en la configuración laxa. Imagina si quiero que mi configuración funcione tanto para proyectos TypeScript como no TypeScript, un proyecto con vista y otro sin vista, tendría que hacer una publicación monorrepo para publicar esas diferentes configuraciones para diferentes combinaciones. Y como puedes ver, no escala realmente bien porque se duplican las combinaciones para cada opción. Más adelante podría querer tener una versión de React y TS React. Entonces, la configuración plana te permite proporcionar una opción semántica para alternar cada característica dinámicamente y hacer que una única configuración sea adoptable. Debido a eso, también podríamos tener abstracciones de alto nivel para absorber la complejidad subyacente y proporcionar una interfaz de configuración mínima como prettier, donde el usuario final no necesita preocuparse por los detalles subyacentes, al tiempo que mantenemos el control total cuando el usuario realmente lo desea. Entonces, digo que es como una configuración mínima como prettier pero aún tan potente y personalizable como ESLint. Sí. Entonces, la configuración plana también hizo posible que los meta frameworks proporcionen una configuración de proyecto. Por ejemplo, en Nuxt, tenemos enrutamiento basado en archivos, importación automática de componentes, directorios de API del servidor. Quiero decir, cada archivo en diferentes carpetas con diferentes nombres puede tener un propósito o una restricción diferente. Entonces, en Nuxt, teníamos el módulo ESLint de Nuxt, que genera una sub-configuración basada en la configuración del proyecto del usuario, desde la cual el usuario puede extender y agregar sus propias reglas personalizadas. Entonces, esta es solo una dirección de las posibilidades con la configuración plana que estamos explorando actualmente. Pero creemos que tendremos un enfoque más interesante proveniente de la community dada la configuración plana.
7. ESLint como Formateador
Short description:
ESLint es más que un linter. También se puede utilizar como formateador. A pesar de la controversia, utilizar ESLint como formateador ofrece flexibilidad y personalización. El año pasado, las reglas de estilo fueron eliminadas del núcleo y se inició un proyecto comunitario para mantenerlas. Personalmente, encuentro que ESLint es más flexible y personalizable que prettier.
la configuración es aún bastante nueva. Y, bueno, tengo unos minutos. Vale. Y el otro tema que quiero mencionar hoy es el hecho de que ESLint en realidad es más que un linter. Para mí, veo ESLint como un conjunto de herramientas AST maduro y potente que cuenta con un gran ecosistema a sus espaldas debido a todas las integraciones para diferentes IDE, etc. Entonces, lo primero es que ESLint puede ser un formateador. Y esto no es algo nuevo. Quiero decir, muchos proyectos ya han estado utilizando ESLint desde el principio. Aunque este tema es un poco controvertido, es posible que escuches a personas decir que deberías usar un formateador dedicado como prettier o deep print, pero para mí, todo se reduce a esas reglas de estilo para ESLint que requieren mucho esfuerzo de mantenimiento. Así que, el año pasado, ESLint y el equipo de ESLint para TypeScript decidieron eliminar todas esas reglas de estilo del núcleo. Y luego inicié el proyecto de estilo de ESLint, reuniendo todas esas reglas de estilo para JSTS, JSX en esta organización y tenemos una comunidad que se encarga de mantenerlas. Y personalmente, seguiré utilizando ESLint como formateador porque veo que es mucho más flexible y personalizable que prettier debido a la naturaleza de ESLint. Así que, si estás utilizando como
8. ESLint como Herramienta para el Modo de Código
Short description:
Si estás utilizando VS Code, puedes configurar la acción de código del editor para corregir automáticamente los errores de ESLint y utilizar personalizaciones para silenciar las reglas de estilo. ESLint también se puede utilizar para el modo de código con la ayuda de los comandos del complemento de ESLint. Los comentarios mágicos pueden convertir automáticamente el código al guardar, y se pueden lograr otras funciones como ordenar, eliminar duplicados y elevar expresiones regulares. Esta herramienta proporciona más control y opciones de personalización para el modo de código.
aquí tengo un consejo. Sí, aquí tengo un pequeño consejo. Si estás utilizando VS Code, puedes configurar la acción de código del editor para corregir automáticamente los errores de ESLint y luego puedes utilizar personalizaciones de reglas de ESLint para silenciar las reglas de estilo en tu IDE para que no aparezcan estas líneas de error por reglas de estilo. Aun así, puedes aprovechar las funciones de corrección automática de tu IDE. Principalmente, trabajo y utilizo principalmente VS Code, por lo que probablemente haya una opción similar para otros editores de code. Entonces, las reglas de ESLint son esencialmente una función que, mientras que la regla de ESLint es esencialmente una función que toma el code y el AST y reporta errores e información opcional de corrección. Así que no tiene que ser solo un linter. Lo que significa es que ESLint también puede ser una buena herramienta para el modo de código. Por ejemplo, hice el comando del complemento de ESLint que hace el modo de código en micro. Aquí puedo reproducir un video. Espero tener tiempo. Vale. Vale. Entonces, como puedes ver aquí en el video, puedo poner un comentario mágico para decir que esta función está encima de una función de error. Al guardar, se convierte automáticamente en una declaración de función sin tener que mover manualmente estas cosas. No necesitas eliminar los errores ni nada. Y de manera similar, también puedes mantener ordenado un objeto, para que siempre esté ordenado. Vale. También puedes tener un keep unique en un array para asegurarte de que se eliminen automáticamente todas las duplicaciones. Y aquí, también podemos tener una expresión regular elevada encima de una expresión regular. Le damos un nombre. Cuando lo guardas, elevará tu expresión regular al nivel superior para mejorar el rendimiento o algo así. Y también puedes convertir un if else en un operador ternario. Lo guardas, por favor. Y puedes tener muchas cosas. Estos son solo algunos ejemplos. Y también esto puede ser muy personalizable y puedes proporcionar tu propio comando personalizado si sabes un poco sobre AST, no debería ser difícil para ti escribir una de las reglas. Incluso para migrar tu base de code porque también tienes el informe y también porque ESLint tiene un informe y puedes decidir cuándo guardar estos archivos y también puedes ignorarlos. Básicamente, tienes más
QnA
ESLint para Otros Lenguajes y Configuraciones de Mono Repo
Short description:
ESLint se puede utilizar como un linter para otros lenguajes además de JavaScript, como TypeScript, Vue, Svelte, Astro y JSON. También tiene soporte para YAML, TOM, gráficos, HTML y MDX. Los complementos adicionales, como el complemento de formato de ESLint, proporcionan capacidades de formato. Consulta el RFC número 99 de ESLint para obtener más soporte independiente del lenguaje. Con ESLint, puedes tener una configuración para todos los proyectos y utilizarlo como una herramienta para verificar y modificar el código. Para obtener más detalles, consulta la configuración personal de ESLint del orador. ¡Gracias por asistir a la charla!
controles y todas estas herramientas ya están disponibles para que puedas hacer el modo de code. Muy bien. De acuerdo. Vamos atrás. Vamos atrás. ¿Dónde está mi ratón? De acuerdo. Muy bien. Y por último, me gustaría mencionar que ESLint también puede ser un linter para muchos otros lenguajes además de JavaScript. Como probablemente sabes, eso es porque TypeScript ESLint hace que ESLint entienda TypeScript y TypeScript no es un JavaScript, por cierto. Y también tenemos, por ejemplo, ESLint config view para los componentes de archivo único de Vue, el complemento de ESLint para los componentes de Svelte, el complemento de ESLint para Astro y también tenemos el complemento de ESLint para archivos JSON. Eso es muy útil para mí, ya que puedo ordenar ciertos campos en un archivo JSON específico. Por ejemplo, mantengo mis dependencias listadas y utilizo esta regla para mantener siempre ordenada la lista de dependencias de mi archivo package.json. Y de manera similar, también tenemos soporte para YAML y TOM. Como puedes ver, hay muchas de esas herramientas que provienen de OTA, Meshi. Él es realmente increíble y también tenemos un ESLint para gráficos y ESLint para HTML, ESLint para MDX y también recientemente hice un complemento de ESLint para el formato que utiliza prettier o algo más profundo para formatear archivos de CSS. Aunque no tiene una integración completa con ESLint, puedes usarlo para el formato. Estos son solo algunos ejemplos que puedo mencionar aquí y también puedes consultar el RFC número 99 de ESLint en el que están tratando de hacer que ESLint sea más independiente del lenguaje para admitir más fácilmente ESLint para otros lenguajes. En resumen, el tema de hoy es que ESLint hace posible tener una configuración para todos los proyectos y también puede ser una herramienta única para todo lo relacionado con la verificación y las modificaciones del código. Si quieres obtener más información, puedes consultar mi configuración personal de ESLint en la que utilizo todos los trucos que mencioné hoy. Me siento halagado de ver que, aunque no tenía la intención de que esta configuración fuera utilizada por otros, ha terminado siendo bastante popular, con más de 3,000 estrellas en más de 30,000 proyectos en GitHub que la utilizan. Así que no estaba tratando de venderte mi configuración, pero espero que pueda servirte como una buena referencia para que puedas construir tu propia configuración compartida que sea potente y flexible. Así que, gracias. Y eso es todo por mi charla. Puedes encontrar mis diapositivas en NTFU. Muy bien. ¿Puedo verlo? Entonces, ¿cómo funciona la nueva configuración plana en un repositorio de mono repo? ¿Podemos tener solo una configuración con ella o podemos tener múltiples configuraciones? Quiero decir, por lo general, ESLint toma una configuración de ESLint. Así que hay dos formas de hacerlo que es tener múltiples configuraciones de ESLint y ejecutar ESLint en múltiples paquetes. Pero eso no es eficiente y lo que puedes hacer es, en mis utilidades de configuración plana, puedes tener una extensión en la que reescribirás todas las rutas que tienes para la configuración de ESLint. Así que puedes tener múltiples configuraciones y extenderlas entre sí para que se conviertan automáticamente en la ruta de
Migrando a la Configuración Plana
Short description:
Migrar a la configuración plana puede ser desafiante debido a la falta de soporte de complementos. El último anuncio de ESLint incluye paquetes y herramientas compatibles para ayudar con la migración. Consulta la documentación más reciente para obtener más información.
específica para ese proyecto. Por lo tanto, aún es posible tener un solo archivo, pero puedes extender desde varios archivos con una ruta específica. Genial. Esto es muy útil porque es algo que encontré difícil al migrar a la configuración plana debido a que muchos complementos aún no admiten la configuración plana. ¿Qué aconsejas que hagan las personas? Quiero decir, cuando ESLint se lanzó por primera vez hace dos meses, las tooling estaban un poco atrasadas y recientemente anunciaron algunos paquetes compatibles, como uno que soluciona la API de complementos y otro que realiza la conversión automáticamente. También puedes usar la extensión anterior con una configuración plana compacta o algo así y puedes hacer eso. Olvidé mencionarlo en mis diapositivas, pero definitivamente consulta la última docs. Debería tener suficiente información para ti.
Integración de ESLint y Prettier
Short description:
ESLint se puede utilizar junto con prettier, ofreciendo más flexibilidad y control. Las herramientas pueden trabajar juntas siempre y cuando se desactiven los conflictos. Finalmente, se le pregunta al orador sobre el software de presentación y la incorporación del IDE, que son elogiados.
De acuerdo. Entonces, hay nuevas docs que te ayudarán con eso? Sí. De lo contrario, puedes enviar un problema allí. Quiero decir, están haciendo una herramienta de migración. Deberían, estamos listos para ayudar. Somos como desarrolladores que solo abren muchos problemas y te molestan. Eso es de código abierto y tienes... Muy bien. Siguiente. ¿Cómo te estás manteniendo al día con el desarrollo de herramientas cruzadas integrando con prettier, por ejemplo? Y supongo que mencionaste esto con el... Como, ¿la nueva versión va a reemplazar a prettier o porque tienes el estilo int de ESLint? ¿O seguirás llevándote bien con prettier en lo que respecta a ESLint? Sí. Definitivamente puedes usar ESLint con prettier si lo necesitas. De acuerdo. Es como... creo que es más una elección personal. Puedes usar diferentes formateadores para 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 ser una configuración muy mínima, lo cual es genial. Pero cuando quieres más controles, realmente no funciona para ti. Así que soy una persona muy opinada. Quiero tener el control de todas las cosas. Por lo tanto, ESLint es algo que me ha ayudado a lograrlo mejor. Así que quiero decir, está bien si prefieres usar prettier. Todas las herramientas deberían funcionar. Solo necesitas desactivar los conflictos. Sí.
Genial. Así que hay una última pregunta que realmente quiero hacer porque también estaba curioso acerca de esto. ¿Qué software de presentación estás usando? ¿Y cómo funciona esta incorporación del IDE?
Software de Presentación e Incorporación del IDE
Short description:
El software de presentación utilizado es SlideF, construido sobre Vite y Vue, con diapositivas basadas en markdown. Permite la incorporación de aplicaciones, el uso de componentes y la creación de componentes interactivos. El IDE utilizado es Monanko con configuración de TypeScript. Las diapositivas se muestran a través de un iframe, enlazando a otra página.
Porque qué presentación 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 las 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 incorporar 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 los derechos 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. ♪♪♪
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Alex introduces tRPC, a toolkit for making end-to-end type-safe APIs easily, with auto-completion of API endpoints and inferred data from backend to frontend. tRPC works the same way in React Native and can be adopted incrementally. The example showcases backend communication with a database using queries and validators, with types inferred to the frontend and data retrieval done using Prisma ORM.
React Query is not a data fetching library, but an Asian state manager. It helps keep data up to date and manage agent life cycles efficiently. React Query provides fine-grained subscriptions and allows for adjusting stale time to control data fetching behavior. Defining stale time and managing dependencies are important aspects of working with React Query. Using the URL as a state manager and Zustand for managing filters in React Query can be powerful.
Today's Talk introduces React Snots, a new way of composition for design systems. The configuration way provides flexibility but can lead to uncontrolled use cases and wrong patterns. React Slots RFC was created to address the limitations of React's support for web components and slots. It introduces createHost and createSlot APIs to enable component composition and solve previous problems. React Slots RFC allows for flexible component styling and the creation of complex structures without rendering them to the browser.
This Talk covers advanced patterns for API management in large-scale React applications. It introduces the concept of an API layer to manage API requests in a more organized and maintainable way. The benefits of using an API layer include improved maintainability, scalability, flexibility, and code reusability. The Talk also explores how to handle API states and statuses in React, and provides examples of canceling requests with Axios and React Query. Additionally, it explains how to use the API layer with React Query for simplified API management.
This Talk introduces 7 essential TypeScript patterns for React development, including children, spreading props, either-or, generic components, and context. The speaker demonstrates various implementations and provides examples using a fictional dog grooming salon application. Other interesting ideas include using omit and make required types, creating components with either-or interfaces, and using generics, memorization, and context in React. The speaker also introduces the Recontextual library for context management.
Durante esta masterclass, los participantes revisarán los patrones esenciales de JavaScript que todo desarrollador debería conocer. A través de ejercicios prácticos, ejemplos del mundo real y discusiones interactivas, los asistentes profundizarán su comprensión de las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables. Al final de la masterclass, los participantes ganarán una nueva confianza en su capacidad para escribir código JavaScript de alta calidad que resista el paso del tiempo. Puntos Cubiertos: 1. Introducción a los Patrones de JavaScript2. Patrones Fundamentales3. Patrones de Creación de Objetos4. Patrones de Comportamiento5. Patrones Arquitectónicos6. Ejercicios Prácticos y Estudios de Caso Cómo Ayudará a los Desarrolladores: - Obtener una comprensión profunda de los patrones de JavaScript y sus aplicaciones en escenarios del mundo real- Aprender las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables- Mejorar las habilidades de resolución de problemas y la legibilidad del código- Mejorar la colaboración y la comunicación dentro de los equipos de desarrollo- Acelerar el crecimiento de la carrera y las oportunidades de avance en la industria del software
Con el surgimiento de frameworks, como React, Vue o Angular, la forma en que se construyen los sitios web ha cambiado a lo largo de los años. Las aplicaciones modernas pueden ser muy dinámicas y realizar múltiples solicitudes de API para poblar un sitio web con contenido actualizado o enviar nuevos datos a un servidor. Sin embargo, este cambio de paradigma ha introducido nuevos problemas con los que los desarrolladores deben lidiar. Cuando una solicitud de API está pendiente, tiene éxito o falla, el usuario debe recibir una retroalimentación significativa. Otros problemas pueden incluir el almacenamiento en caché de datos de API o la sincronización del estado del cliente con el servidor. Todos estos problemas requieren soluciones que deben ser codificadas, pero pueden volverse rápidamente inmanejables y dar como resultado una base de código difícil de ampliar y mantener. En este masterclass, cubriremos cómo manejar las solicitudes de API, los estados de API y la cancelación de solicitudes mediante la implementación de una Capa de API y combinándola con React-Query. Prerrequisitos: Para aprovechar al máximo este masterclass, debes estar familiarizado con React y Hooks, como useState, useEffect, etc. Si deseas codificar junto con nosotros, asegúrate de tener Git, un editor de código, Node y npm instalados en tu máquina.
React Summit 2022
React Advanced 2021
JSNation 2024
Comments