Sustituyendo ESLint y Prettier por Biome: Velocidad frente a la regla de Hooks que aún necesitas
Tiempos de ejecución de Lab para Biome frente a ESLint y Prettier, la brecha entre react-hooks y exhaustive-deps, y cuándo ejecutar dos plugins de ESLint al mismo tiempo representa la migración más adecuada.
Los artículos de marketing promocionan un binario de Rust, una única configuración y ganancias de 20 a 50 veces. Posteriormente se midió el tiempo en un laboratorio con cuatro rutas, y luego se contaron los diagnósticos que Biome no podía realizar.
Un solo binario frente a montones de plugins. El tiempo total disminuyó, pero la cobertura para una regla importante no lo hizo.
Inspeccione package.json.
Cuente las dependencias relacionadas con linting. Los proyectos que siguen incluyendo eslint, prettier, eslint-config-prettier, eslint-plugin-react-hooks, además de un plugin de análisis, pagan un costo oculto en cada actualización. Biome se promociona como un único ejecutable para formateo, linting y ordenación de importaciones.
Se añadió Biome junto a la cadena de herramientas ESLint existente en ese laboratorio. Se midió el tiempo de ejecución de ambos procesos. Luego se eliminó ESLint. Un diagnóstico que dependía de él no contaba con un equivalente seguro en Biome. El proceso finalizó sin errores, y la clase de error que ese diagnóstico utilizaba para bloquear volvió a aparecer en una rama de características.
La rama volvía a conectar un WebSocket cuando se cambiaba de tema: un caso típico de dependencia de efectos. Biome permaneció en silencio.
La frase que realmente publica Biome
Oficialmente, Biome formatea el código con un 97% de concordancia con Prettier y realiza análisis de estilo con un amplio conjunto de reglas inspiradas en ESLint y typescript-eslint. Las configuraciones se encuentran en biome.json. La ejecución diaria se realiza con la orden pnpm exec biome check --write.
Lo que omiten los artículos más llamativos: es posible que sigan faltando plugins poco conocidos y reglas internas. O bien se mantiene ESLint para cubrir esas carencias o bien se traslada la lógica correspondiente.
La velocidad es fácil de apreciar. La falta de cobertura es como el alquiler.
Los tiempos realmente registrados
El laboratorio combinó TypeScript, React y unos pocos módulos del servidor: aproximadamente sesenta archivos que no pertenecían a node_modules. Instant Navigations se mantuvo desactivado, por lo que solo se midió el verificador.
pnpm exec eslint . --max-warnings=0
pnpm exec prettier --check .
pnpm exec biome check .
Tres pruebas por cada método; valores medios:
- ESLint solo: 4.1s
- Prettier
--check: 1.6s - ESLint seguido de Prettier: 5.7s
- Biome
check: 0.22s
Ni de cerca 50 veces más rápido. En comparación con el par secuencial, es aproximadamente 26 veces más rápido en un árbol pequeño. Los análisis de blogs suelen referirse a unos 10 mil archivos. Este reloj utilizó la aplicación que se despliega realmente. La tendencia coincide; el multiplicador exagerado, no.
Un proceso de verificación fresco y Prettier no estuvieron de acuerdo en dos archivos: un largo envoltorio de propiedades JSX dentro de InvoiceRow. Se mantuvo el envoltorio de Biome. La cifra del 97% es precisa; el 3% restante solo genera controversia si un equipo analiza cada archivo por separado.
Cómo verlo en su máquina
pnpm add -D --save-exact @biomejs/biome
pnpm exec biome init
Aparecerá un biome.json. Ejecute Biome una vez mientras ESLint aún esté presente. No elimine nada hasta que haya un inventario escrito de los errores de ESLint que Biome no reporta.
pnpm exec eslint . -f unix > /tmp/eslint.txt
pnpm exec biome check --reporter=json > /tmp/biome.json
La comparación manual mostró que la mayor parte de los elementos recommended coincidían. La diferencia problemática es:
react-hooks/exhaustive-deps
Biome incluye verificaciones relacionadas con los hooks. Estas no coincidían con la advertencia exacta que anteriormente se relacionaba con un efecto de socket. Después de que CI eliminó esa regla, se pasó por alto un problema relacionado con la reconexión al cambiar de tema.
ESLint devolvió resultados para un único plugin:
{
"scripts": {
"lint": "biome check . && eslint app --plugin react-hooks --rule 'react-hooks/exhaustive-deps:error'"
}
}
Ineficiente. Transparente. Utilizar dos herramientas es un compromiso razonable en la actualidad cuando la regla faltante tiene nombre. Mantener todo el árbol de ESLint “por si acaso” suele ser un desperdicio.
Valide la historia del editor esa misma tarde. El servidor de lenguaje de Biome reemplazó un par de extensiones. De repente, la advertencia relacionada con los hooks solo aparecía en CI; empeoraba localmente a menos que la extensión de ESLint se mantuviera para esa regla en particular. Es mejor verla en /settings que descubrirla durante la compilación matutina.
¿Qué es realmente más rápido?
Biome recorre el árbol como un único proceso nativo. ESLint consiste en Node más plugins, a menudo seguidos de Prettier. Con sesenta archivos, la carga de plugins consume gran parte de los 4.1 segundos necesarios. Con miles de archivos, el recorrido del árbol domina y aparecen ratios propios a escalas comerciales.
Biome 2 ofrece una verificación de tipos básica, pero no cubre todas las funcionalidades de typescript-eslint. Si la integración continua sigue permitiendo parserOptions.project, mida ese proceso por separado, ya que se trata del modo de ESLint más costoso. Se esperan diferencias en comparación con las opciones antiguas no-unsafe-*.
Desactivar el análisis basado en proyectos, observar cómo el tiempo de integración continua pasa de unos 90 segundos a unos 8 segundos, y atribuir ese mejoramiento a Biome es engañoso, ya que simplemente se eliminó la fase de verificación de tipos. Dígalo en voz alta cuando esto ocurra.
El desglose de costos
Tiempo del pipeline: de 5.7 segundos a 0.22 segundos aquí. Los monorepos son los que más notan la mejora. Las aplicaciones pequeñas obtienen principalmente una ejecución más rápida en el ordenador portátil.
Reglas: desapareció una comprobación de dependencias; ESLint permaneció para ese caso.
Conflictos de formato: dos envolturas JSX; se pueden resolver.
Editor: dos extensiones se fusionaron en una, y luego otra regresó; más o menos equilibrado, con una comprobación por línea de comandos más rápida.
Atención: una ejecución con Biome en modo verde no equivale a un árbol de hooks en color verde. Las solicitudes de integración deben indicar qué ejecutor marcó el archivo.
Manténganlo activo o detengan el turno nocturno
Los repositorios de tipo Greenfield pueden adoptar Biome esta noche para el formato y las verificaciones básicas, omitiendo por completo a Prettier.
Los árboles heredados deben ejecutarse de forma dual durante aproximadamente una semana. Mantengan solo ESLint para los plugins con nombre específico. Eliminen la configuración no utilizada, y no solo el paso de CI.
Permanezcan con ESLint cuando las reglas personalizadas *son* el producto final — y anoten esas reglas. “Tal vez necesitemos plugins” no constituye un inventario.
Nunca descarten exhaustive-deps solo porque Biome es rápido. Un cambio de tema demostrará por qué esa regla existía.
Precauciones que vale la pena mencionar claramente
0.22 segundos frente a 5.7 segundos se refiere a sesenta archivos en una laptop, no a un corpus de 10 mil archivos, ni a una afirmación de 56 veces mayor.
La distancia entre los ganchos depende de la configuración y de la estructura del bioma esa noche. Ejecute nuevamente biome rage e inspeccione los diagnósticos actuales de los ganchos antes de considerar el agujero como permanente; los identificadores cambian entre versiones.
Los inventarios de plugins difieren. Si el orden de importación mediante eslint-plugin-import es el único problema, pruebe la función organize-imports de Biome durante una semana.
Sincronice ambos herramientas. Enumere los hallazgos de ESLint que permanecen después de que Biome haya limpiado todo.
Esa enumeración es el trabajo de migración. Los elementos sobrevivientes se alimentan a un script de linting dual con una asignación clara de responsabilidades.
Cuando CI pasó a verde y se restableció la conexión del socket
ESLint más Prettier dieron paso a Biome. Tiempo de verificación de sesenta archivos: 0,22 s frente a 5,7 s. Se fusionó una rama. Al cambiar de tema se volvió a conectar un WebSocket de totales. react-hooks/exhaustive-deps bloqueaba anteriormente ese patrón; Biome no generó el equivalente ajustado.
Respuesta deficiente. Guardar el socket hasta que “se complete la migración”. Los clientes pierden la figura en tiempo real.
Respuesta mejorada. Biome controla el formato y las reglas básicas de limpieza. ESLint permanece para un plugin dentro de app.
{
"scripts": {
"lint": "biome check . && eslint app --plugin react-hooks --rule 'react-hooks/exhaustive-deps:error'"
}
}
Hay dos enfoques honestos cuando se nombra la regla ausente. Hay dos enfoques inútiles cuando toda la configuración de ESLint se mantiene. Deltas de formato: dos envolturas JSX; se conserva la versión de Biome.
Mida en su propio entorno. Catalogue las reglas exclusivas de ESLint después de que Biome esté limpio. Catalogue primero; use el cronómetro después.
Comandos y resultados de la sesión de laboratorio
Versiones anteriores al inicio: Node 24, TypeScript 7, Next 16.3. Guárdelas en una nota de laboratorio para que la próxima sesión no sea una suposición.
node -v
pnpm exec tsc -v
pnpm exec next --version
Ponga esas tres líneas en la parte superior de la nota. Si hay una discrepancia importante con la guía seguida, deténgase: los comandos posteriores podrían engañar de forma silenciosa.
Caminata por la ruta siguiente:
pnpm exec next dev
Ingresa /, /invoices, /invoices/1, /settings, y luego vuelve a ingresar /invoices. Deja activada la opción “preserve-log” en DevTools. Captura la interfaz del filtro y la URL; esa combinación es útil en experimentos relacionados.
Verificación de tipos:
pnpm exec tsc --noEmit --pretty false
echo $?
Un código de salida cero no corresponde a un producto listo para su uso. Solo elimina la necesidad de realizar verificaciones en tiempo de ejecución.
Luego, vuelve a ejecutar los comandos de detección indicados en “Cómo verlo en tu máquina”. No los omites solo porque aparezcan números arriba. Otra máquina, el calor ambiental o pestañas de Chrome ocupadas pueden afectar la memoria, la duración de las verificaciones y hacer que se interrumpan antes de lo esperado, más que un parche del framework.
Guarda una entrada de una línea con la solución fallida: “Probé X, pero aún se observó Y”. Las versiones, el comando, la salida y esa frase constituyen información útil para seguir trabajando en ello. Las capturas de pantalla para marketing no sirven para eso.
Diario de fallos
Al eliminar ESLint el mismo día en que llegó Biome, se reactivó el problema con los sockets. Al restaurar un plugin, se recuperó la cobertura de pruebas.
Al intentar replicar el comportamiento de typescript-eslint sensible al proyecto en Biome 2, se encontró una superposición parcial. El grupo anterior no-unsafe-* no coincidía. Pretender lo contrario hizo que dejara de funcionar.
Un largo conflicto de formato en las propiedades JSX finalizó al aceptar Biome.
Dentro del editor, las extensiones LSP de Biome reemplazaron a las de Prettier y ESLint. Las advertencias relacionadas con hooks solo aparecían en CI, por lo que la extensión de ESLint se mantuvo para esa regla. Dos extensiones siguen siendo mejores que cinco.
Lista de verificación antes de eliminar ESLint
- [ ]
biome checktermina sin errores - [ ] Se anotan las reglas propias de ESLint
- [ ] Los plugins con nombre se mantienen o se abandonan intencionalmente
- [ ]
exhaustive-depscuenta con un equivalente confiable, o ESLint se mantiene para ello
0.22s frente a 5.7s es una diferencia de sesenta archivos. Vuelva a medir localmente. Verifique nuevamente los diagnósticos de los ganchos en el Biome instalado antes de considerar esa diferencia como permanente.
Nota de producción desde la aplicación de facturas
CI registró los segundos reales. Durante una demostración, cambiar de tema provocó que se restableciera la reconexión del WebSocket porque la cobertura de los ganchos había desaparecido. Los segundos no son el resultado final; lo importante es el valor agregado en tiempo real.
Preferir un lint más lento que detecte las reconexiones es mejor que uno muy rápido que no las identifique. Combinar Biome con 0.22s y un solo plugin de ESLint también es una opción válida. Los repositorios nuevos pueden comenzar usando solo Biome y agregar ESLint una vez que se nombre una regla. Los repositorios antiguos no ganan nada con prácticas innecesariamente complejas.
Comandos
pnpm exec eslint . --max-warnings=0
pnpm exec prettier --check .
pnpm exec biome check .
Calienta tres veces; toma las medias. Registra ESLint, Prettier y Biome. Descarga la salida de ESLint en formato Unix y mapea los hallazgos que Biome nunca emitió. Coloca el mapa en la solicitud de pull; trata el registro de tiempos como una nota al pie.
El delta significativo es la regla que no tiene un par idéntico.
Ejercicio para el lector con un árbol real
Elige un repositorio listo para uso, no uno de entorno aislado. Registra los tiempos de ejecución para eslint ., prettier --check . y biome check .: tres ejecuciones cada uno. Tabula las medias junto con el conteo de archivos.
Crea manualmente la diferencia entre las reglas durante un rato; los renombramientos automáticos suelen engañar. Lista todos los hallazgos de ESLint que permanecen después de que Biome haya limpiado todo. Lista vacía → ESLint puede eliminarse. Lista que contenga react-hooks/exhaustive-deps o un plugin personalizado crítico para el producto → mantén esa parte.
Abra una rama con un gancho cuya dependencia faltante se sabe que existe realmente. Vea qué herramienta emite una advertencia. Esa rama es la razón por la cual la comparación no es simplemente una carrera.
Guarde la tabla y la lista de reglas. Evite solicitudes de pull request tipo “cambiado a Biome” que solo eliminen paquetes. La eliminación es el paso final, no el primer movimiento.
Lecturas relacionadas
- React 19 Server Actions con Zod: Menos código genérico para FormData — Utilice React 19 Server Actions junto con Zod, cuando React Hook Form sigue siendo la mejor opción, y cómo un pequeño complemento elimina la necesidad de analizar repetidamente los datos de FormData.