ESLint Uno para Todos Hecho Fácil

Rate this content
Bookmark

Introducción al nuevo formato de configuración plana de ESLint y vea cómo puede traer nuevas posibilidades y mejoras a su flujo de trabajo y experiencia de desarrollo.

This talk has been presented at React Day Berlin 2024, check out the latest edition of this React Conference.

Anthony Fu
Anthony Fu
21 min
16 Dec, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
¡Hola a todos! Soy Anthony Fu, un miembro de coaching de Vit, Vue y Nuxt. Hoy, compartiré mis hallazgos y prácticas en la exploración de ESLink y su ecosistema. ESLink v9.0 se lanzó hace 7 meses con el nuevo FlatConfig, que simplifica la configuración de complementos y proporciona control total y personalización en JavaScript. Migre la configuración heredada a FlatConfig con eslink-migrate-config CLI y use eslink-config-inspector para la herramienta de paso visualizado. Las utilidades de configuración de banderas facilitan la personalización de la configuración y permiten configuraciones conscientes del proyecto. ESLink es un potente kit de herramientas AST y se puede usar como formateador. Use ESLink para mantener reglas estilísticas y personalícelo para adaptarse a las necesidades de su proyecto.
Available in English: ESLint One for All Made Easy

1. Introduction to ESLink and its Ecosystem

Short description:

¡Hola a todos! Soy Anthony Fu, un miembro de coaching de Vit, Vue y Nuxt. Me apasiona el código abierto, construir herramientas y encontrar soluciones a problemas. Hoy, compartiré mis hallazgos y prácticas al explorar ESLink y su ecosistema.

Hola a todos, muchas gracias por invitarme y espero que estén disfrutando de la conferencia hasta ahora. Es una pena que no haya podido ir a Berlín en persona esta vez, pero espero que encuentren interesante mi tema de hoy.

Así que primero, permítanme presentarme un poco. Mi nombre es Anthony Fu y soy el miembro de coaching de Vit, Vue y Nuxt. También creo algunos proyectos de código abierto como Vitest, Lightdiv, Unocetus, etcétera. También mantengo algunos proyectos como ESLink, StyleAsync, Shiki, 2slash, y así sucesivamente. Actualmente estoy trabajando en Nuxt Lab en el equipo de framework.

Así que, como pueden ver, estoy bastante entusiasmado con el código abierto, lo que me ha llevado a trabajar en muchos proyectos. Me encanta construir herramientas y encontrar soluciones a los problemas que encuentro. Por ejemplo, la diapositiva que están viendo está impulsada por Slidev, una herramienta de presentación basada en markdown que está construida sobre tecnologías web. Nació cuando encontré que las herramientas existentes no eran lo suficientemente flexibles para presentar mi código. De manera similar, cuando miré ESLink y su ecosistema hace unos meses, encontré muchas cosas bastante interesantes con mucho potencial, pero que aún no se habían explorado completamente. Así que hoy me gustaría compartir con ustedes algunos de mis hallazgos y prácticas durante mis recientes exploraciones al respecto.

2. ESLink's Evolution and the FlatConfig

Short description:

ESLink, uno para todos, hecho fácil. ESLinked v9.0 lanzado hace 7 meses con el nuevo FlatConfig. La configuración heredada .eslinked-rc comparada con el nuevo eslinked.config.js FlatConfig. FlatConfig utiliza importaciones nativas, simplifica la configuración de plugins y elimina estructuras de árbol complejas en la configuración compartida. Planeado durante 5 años, el FlatConfig proporciona control total y personalización en JavaScript.

Así que, 11 años desde que ESLink salió, en este momento, es fácilmente una de las herramientas más populares en el ecosistema de JavaScript que casi todos los proyectos utilizan. A pesar de que ha estado presente durante tanto tiempo, es una herramienta que sigue mejorando y evolucionando constantemente.

Hoy, me gustaría darles un tema aburrido y ambicioso, ESLinked, uno para todos, hecho fácil. Para compartir con ustedes algunas de las nuevas perspectivas y patrones de uso de ESLinked con las últimas características que acaban de lanzar.

Así que probablemente ya saben que ESLinked v9.0 fue lanzado hace unos 7 meses. El principal destaque de esta versión importante es el lanzamiento del nuevo sistema de configuración para ESLinked, llamado FlatConfig. En caso de que nunca hayan oído hablar de él o no hayan profundizado en la documentación aún, aquí les hago una rápida comparación entre la configuración heredada ESLinked-RC y el nuevo FlatConfig para ustedes.

Diferenciar entre esos dos formatos de configuración es bastante sencillo. La configuración heredada se llama .eslinked-rc, que soporta varias extensiones, que también podría leerlo desde su package.json. El FlatConfig, por otro lado, solo se cargaría desde eslinked.config.js, un archivo de configuración de JavaScript como una única fuente de verdad.

Y cuando se trata de reutilizar la configuración compartida, los formatos de configuración heredados utilizan implícitamente propiedades de extensión basadas en convenciones para cargar la configuración desde sus módulos locales de node. Necesitarían aprender un poco la convención para saber cómo se resuelve. Mientras que el FlatConfig usará importaciones nativas, donde es más explícito y les da mucho más control.

Y para los plugins, en la configuración heredada, toma un array de cadenas, que nuevamente es basado en convenciones y acoplado con el nombre del paquete del plugin. Ahora en el FlatConfig, toma un objeto nombrado para los plugins. Esto significa que ahora pueden renombrar plugins fácilmente o cambiar a un fork sin verse obligados a cambiar cada regla en su configuración.

Además, debido a la naturaleza inherente de las extensiones, podría resultar en una estructura de árbol muy compleja en la configuración compartida, porque la configuración compartida también puede tener extensiones anidadas dentro. En el FlatConfig, se vuelve mucho más simple. Cuando importan explícitamente la configuración compartida como múltiples objetos o arrays, y pueden componerlos en uno solo plano, y por eso también se llama FlatConfig.

Y para un poco más de contexto, aquí hay un gráfico que dibujé para demostrar la línea de tiempo. Aunque el FlatConfig podría sonar nuevo para algunos de ustedes, en realidad ha sido planeado durante 5 años ya. El RFC fue creado en enero de 2019. La primera imputación está disponible en la versión 8.21, como experimental, que fue hace dos años. Se vuelve estable en la versión 8.45, y luego se convierte en el predeterminado en la versión reciente 9. Entre tanto, el equipo de ESLink ha publicado múltiples publicaciones en el blog para explicar la razón por la que quieren introducir un nuevo formato, y compartir la hoja de ruta del lanzamiento. Es mucho esfuerzo invertido en este plan de cinco años. Así que un gran respeto al equipo de ESLink.

Como mencionamos en las diapositivas anteriores, el mayor beneficio de FlatConfig es que ahora está en JavaScript, donde tienen el control total. Utiliza importación nativa para resolver los plugins y las configuraciones, haciendo la herencia y la sobrescritura mucho más simples. Porque está completamente en JavaScript, la configuración compartida puede ser una función de fábrica que toma las opciones del usuario, y el usuario puede tener mucha más capacidad para hacer personalizaciones a sus necesidades específicas.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
Un Año en Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
Un Año en Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilizando Rust desde Vue con WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilizando Rust desde Vue con WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Vue.js London Live 2021Vue.js London Live 2021
24 min
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

Workshops on related topic

Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Featured WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM
Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Vue.js London Live 2021Vue.js London Live 2021
117 min
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Top Content
Workshop
Daniel Roe
Daniel Roe
Construiremos un proyecto Nuxt juntos desde cero usando Nitro, el nuevo motor de renderizado de Nuxt, y Nuxt Bridge. Exploraremos algunas de las formas en que puedes usar y desplegar Nitro, mientras construimos una aplicación juntos con algunas de las restricciones del mundo real que enfrentarías al desplegar una aplicación para tu empresa. En el camino, dispara tus preguntas hacia mí y haré lo mejor para responderlas.
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Vue.js London 2023Vue.js London 2023
137 min
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Workshop
Alvaro Saburido
Alvaro Saburido
- Introducción a 3D- Introducción a WebGL- ThreeJS- Por qué TresJS- Instalación o configuración de Stackblitz- Conceptos básicos- Configuración del lienzo- Escena- Cámara- Agregar un objeto- Geometrías- Argumentos- Props- Slots- El bucle- Composable UseRenderLoop- Callbacks antes y después de la renderización- Animaciones básicas- Materiales- Material básico- Material normal- Material Toon- Material Lambert- Material estándar y físico- Metalness, roughness- Luces- Luz ambiental- Luz direccional- Luces puntuales- Sombras- Texturas- Cargar texturas con useTextures- Consejos y trucos- Misceláneo- Controles de órbita- Cargar modelos con Cientos- Depuración de tu escena- Rendimiento
Construyendo formularios Vue con VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Construyendo formularios Vue con VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
En este masterclass, aprenderás cómo usar vee-validate para manejar la validación de formularios, gestionar los valores de los formularios y manejar las presentaciones de manera efectiva. Comenzaremos desde lo básico con un formulario de inicio de sesión simple hasta el uso de la API de composición y la construcción de formularios repetibles y de múltiples pasos.

Tabla de contenidos:
- Introducción a vee-validate
- Construcción de un formulario básico con componentes vee-validate
- Manejo de validación y presentaciones de formularios
- Construcción de componentes de entrada validables con la API de composición
- Arrays de campos e inputs repetibles
- Construcción de un formulario de múltiples pasos
Prerrequisitos:
Configuración de VSCode y un proyecto Vite + Vue vacío.
Construyendo Pinia desde cero
Vue.js Live 2024Vue.js Live 2024
70 min
Construyendo Pinia desde cero
Workshop
Eduardo San Martin Morote
Eduardo San Martin Morote
Sumergámonos en cómo funciona Pinia bajo el capó construyendo nuestro propio `defineStore()`. Durante este masterclass cubriremos algunos conceptos avanzados de Vue como la inyección de dependencias y los scopes de efectos. Esto te dará una mejor comprensión de la API de Composición de Vue.js y Pinia. Requisitos: experiencia en la construcción de aplicaciones con Vue y su API de Composición.