Biome es una herramienta para formatear código JavaScript, TypeScript, JSX, TSX, JSON, CSS y GraphQL compatible con Prettier (al 97%) y ultra rápido.
Si buscamos una herramienta que de formato al código seguramente Prettier nos suene. Y si queremos analizar el código estáticamente en busca de errores quizá también pensemos en ESLint. Ambas son muy populares, son robustas y están probadas en muchísimos casos de uso. Pero ha aparecido una nueva herramienta llamada Biome, que aunque todavía no cubre todas las casuísticas de las herramientas anteriores (sobre todo de ESLint) destaca por querer unificar tanto el formato como el análisis estático de código para encontrar y arreglar errores. Además, es ultra rápida.
En este artículo veremos cómo instalarlo y aprenderemos a usarlo.
Lo primero será instalar la dependencia en nuestro proyecto:
npm install --save-dev --save-exact @biomejs/biome
Una vez instalada, ejecutaremos el siguiente comando:
npx @biomejs/biome init
Se generará un archivo llamado biome.json
que contendrá las reglas por defecto:
{ "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json", "vcs": { "enabled": false, "clientKind": "git", "useIgnoreFile": false }, "files": { "ignoreUnknown": false, "ignore": [] }, "formatter": { "enabled": true, "indentStyle": "tab" }, "organizeImports": { "enabled": true }, "linter": { "enabled": true, "rules": { "recommended": true } }, "javascript": { "formatter": { "quoteStyle": "double" } }}
Podemos modificarlo como queramos, en mi caso me gusta que JavaScript use comillas simples '
, que no use punto y coma si no es necesario ;
y que no use parentesis en las funciones de un solo parámetro:
"javascript": { "formatter": { "quoteStyle": "single", "semicolons": "asNeeded", "arrowParentheses": "asNeeded" } }
Hay más opciones de formato en la documentación oficial.
En el apartado de rules también podemos añadir reglas igual que haríamos en ESLint.
Si queremos ejecutar Biome JS para que analize el código, podemos ejecutar este comando (por ejemplo en la carpeta src
del directorio actual):
npx @biomejs/biome format --write ./src
Obtendremos un resultado similar a este, con todos los archivos con errores arreglados según las reglas especificadas en el apartado anterior.
Formatted 41 files in 15ms. Fixed 33 files.
El comando anterior va muy bien para ejecutarlo en integración contínua, por ejemplo en GitHub Actions, o antes de hacer un commit en Git, pero si queremos que se arregle en el mismo editor al guardar, podemos instalar la extensión oficial de Biome para VS Code.
Si en VS Code pulsamos Ctrl + P
(Windows) o Command ⌘ + P
(macOS) y ejecutamos el siguiente comando, instalaremos la extensión de Biome JS:
ext install biomejs.biome
Ahora ya se aplicarán las reglas en el código que modifiquemos, podemos probarlo abriendo un archivo de nuestro proyecto.
Si tenemos nuestros archivos de configuración de ESLint y Prettier podemos ejecutar estos comandos para migrar a Biome JS.
biome migrate eslint --writebiome migrate prettier --write
En la documentación oficial nos explican detalladamente cómo funciona https://biomejs.dev/guides/migrate-eslint-prettier/