Biome JS

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.

biome-js

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.

Instalar Biome JS

Lo primero será instalar la dependencia en nuestro proyecto:

Terminal
npm install --save-dev --save-exact @biomejs/biome

Una vez instalada, ejecutaremos el siguiente comando:

Terminal
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.

Ejecutar Biome JS

Si queremos ejecutar Biome JS para que analize el código, podemos ejecutar este comando (por ejemplo en la carpeta src del directorio actual):

Terminal
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.

Extensión de Visual Studio Code para Biome JS

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.

Migrar de Eslint y Prettier a Biome JS

Si tenemos nuestros archivos de configuración de ESLint y Prettier podemos ejecutar estos comandos para migrar a Biome JS.

Terminal
biome migrate eslint --write
biome migrate prettier --write

En la documentación oficial nos explican detalladamente cómo funciona https://biomejs.dev/guides/migrate-eslint-prettier/