Biome: la navaja suiza de los toolchain para JavaScript y TypeScript

Biome es un toolchain relativamente nuevo para JavaScript y TypeScript que promete ser más rápido y eficiente que las herramientas tradicionales como ESLint, Prettier, etc. En este artículo, exploraremos qué es Biome, sus características principales y cómo puede mejorar tu flujo de trabajo de desarrollo.

¿Qué es Biome?

Biome es un proyecto de código abierto que busca unificar varias herramientas de desarrollo en una sola. En lugar de tener que configurar y mantener múltiples herramientas para tareas como linting, formateo, etc., Biome ofrece una solución integral que puede manejar todas estas tareas de manera eficiente.

Está diseñado para ser rápido, fácil de usar y altamente configurable, lo que lo convierte en una excelente opción para desarrolladores que buscan simplificar su flujo de trabajo.

Características principales de Biome

1. Linting integrado: Biome incluye un linter que puede detectar errores y problemas de estilo en el código, ayudando a mantener un código de calidad.
2. Formateo automático: Con Biome, puedes formatear tu código automáticamente, asegurándote de que siga un estilo consistente sin tener que preocuparte por las configuraciones manuales.
3. Configuración sencilla: Biome ofrece una configuración sencilla y flexible, lo que facilita su integración en cualquier proyecto sin complicaciones.

¿Por qué elegir Biome?

Elegir Biome puede ser una excelente decisión para los desarrolladores que buscan una solución todo en uno para sus necesidades. Al unificar varias herramientas en una sola, Biome puede reducir la complejidad de la configuración y el mantenimiento, lo que a su vez puede mejorar la productividad y la eficiencia.

Ejemplo de uso de Biome

Instalación

Para comenzar a usar Biome, puedes instalarlo a través de tu gestor de paquetes favorito:

# npm
npm install -D -E @biomejs/biome

# pnpm
pnpm add -D -E @biomejs/biome

# yarn
yarn add -D -E @biomejs/biome

# bun
bun add -D -E @biomejs/biome

Configuración

Una vez instalado, puedes configurar Biome creando un archivo de configuración en la raíz de tu proyecto. Utiliza el siguiente comando para generar un archivo de configuración predeterminado:

# npm
npx @biomejs/biome init

# pnpm
pnpx @biomejs/biome init

# yarn
yarn exec biome init

# bun
bunx --bun @biomejs/biome init

Esto creará un archivo de configuración biome.json en la raíz de tu proyecto, donde podrás personalizar las opciones según tus necesidades. Las opciones que genera de forma predeterminada son:

{
	"$schema": "https://biomejs.dev/schemas/2.4.6/schema.json",
	"vcs": {
		"enabled": true,
		"clientKind": "git",
		"useIgnoreFile": true
	},
	"files": {
		"ignoreUnknown": false
	},
	"formatter": {
		"enabled": true,
		"indentStyle": "tab"
	},
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": true
		}
	},
	"javascript": {
		"formatter": {
			"quoteStyle": "double"
		}
	},
	"assist": {
		"enabled": true,
		"actions": {
			"source": {
				"organizeImports": "on"
			}
		}
	}
}

A continuación te muestro el desglose de cada opción con su descripción, respetando la jerarquía del JSON:

• $schema — Referencia al JSON Schema oficial de Biome (para este ejemplo la versión 2.4.6). Permite que tu editor ofrezca autocompletado, validación en tiempo real y documentación inline mientras editas el archivo.

• vcs — Configuración de integración con sistema de control de versiones.

  • enabled — Activa la integración VCS. Cuando está en true se habilitan las opciones de integración VCS que se configuran a continuación.
  • clientKind — Especifica el cliente VCS a usar. Con "git", Biome interactúa con Git para conocer qué archivos están rastreados, modificados, etc.
  • useIgnoreFile — Le indica a Biome que respete el .gitignore. Los archivos/carpetas ignorados por Git también serán ignorados por Biome (linting, formatting, etc.).

• files — Configuración del manejo de archivos del proyecto.

  • ignoreUnknown — Con false, Biome lanzará un error o advertencia cuando encuentre un tipo de archivo que no sabe procesar. Si estuviera en true, simplemente lo saltaría en silencio.

• formatter — Configuración global del formateador.

  • enabled — Activa o desactiva el formateador de Biome a nivel global.
  • indentStyle — Define el carácter usado para indentar. "tab" usa tabs reales (\t); la alternativa es "space" para usar espacios.

• linter — Configuración global del linter.

  • enabled — Activa o desactiva el linter de Biome.
  • rules — Define qué reglas de linting aplicar.
    • recommended — Con true, activa el conjunto de reglas recomendadas por Biome. Cubre buenas prácticas de JS/TS, accesibilidad básica, posibles bugs, etc. Es el equivalente al "eslint:recommended" de ESLint.

• javascript — Configuración específica para archivos JS/TS/JSX/TSX.

  • formatter — Opciones del formateador aplicados solo a archivos JavaScript/TypeScript.
    • quoteStyle — Define el tipo de comillas para strings. "double" usa "comillas dobles"; la alternativa es "single" para 'comillas simples'.

• assist — Configuración del módulo Assist, una capa de acciones de código asistidas que va más allá del linting puro (similar a los code actions de ESLint con --fix, pero más declarativa).

  • enabled — Activa el módulo Assist.
  • actions — Define las acciones disponibles.
    • source — Acciones que operan sobre el archivo fuente completo (no sobre un nodo específico del Árbol de Sintaxis Abstracta AST).
      • organizeImports — Con "on", Biome reorganiza automáticamente los import statements: los agrupa y ordena. Es el equivalente al organizeImports de TypeScript o al plugin eslint-plugin-import.

Cómo utilizarlo

Las 2 funcionalidades principales de Biome son el formateo y el linting.

Formatear tu código tiene como objetivo mantener un estilo consistente en todo el proyecto; esto con el fin de mejorar la legibilidad y facilitar la colaboración entre desarrolladores. Para formatear tu código con Biome, puedes usar el siguiente comando:

# npm
npx @biomejs/biome format --write <archivos>

# pnpm
pnpx @biomejs/biome format --write <archivos>

# yarn
yarn exec biome format --write <archivos>

# bun
bunx --bun @biomejs/biome format --write <archivos>

El parámetro <archivos> puede ser un archivo específico, una carpeta o un patrón glob para seleccionar los archivos que deseas formatear. Por ejemplo, si quieres formatear todos los archivos .js y .ts en la carpeta src, puedes usar src/**/*.{js,ts}. Si lo omites, Biome intentará formatear todos los archivos que pueda encontrar en el proyecto, lo que puede ser útil para asegurarte de que todo el código sigue un estilo consistente.

El linting te permite detectar errores y problemas de estilo en tu código; esto lo logra analizando tu código y comparándolo con un conjunto de reglas predefinidas o personalizadas que permiten identificar problemas potenciales, malas prácticas o inconsistencias. Para realizar linting en tu código, puedes usar el siguiente comando:

# npm
npx @biomejs/biome lint --write <archivos>

# pnpm
pnpx @biomejs/biome lint --write <archivos>

# yarn
yarn exec biome lint --write <archivos>

# bun
bunx --bun @biomejs/biome lint --write <archivos>

Si deseas tomar un atajo para formatear, hacer linting y ejecutar las acciones del módulo assist al mismo tiempo, puedes usar el comando check:

# npm
npx @biomejs/biome check --write <archivos>

# pnpm
pnpx @biomejs/biome check --write <archivos>

# yarn
yarn exec biome check --write <archivos>

# bun
bunx --bun @biomejs/biome check --write <archivos>

Para facilitar su uso, puedes agregar estos comandos a los scripts de tu package.json:

{
    "scripts": {
        "format": "biome format --write",
        "lint": "biome lint --write",
        "check": "biome check --write"
    }
}

Y luego ejecutarlos desde la terminal, por ejemplo:

# npm
npm run check

# pnpm
pnpm run check

# yarn
yarn run check

# bun
bun run check

Sigue los siguientes links para obtener más información acerca de:

• Formateo
• Linting
• Assist

Integración con editores

Biome también se integra con editores de código como Visual Studio Code, lo que te permite obtener retroalimentación en tiempo real mientras escribes código. Para configurar Biome en Visual Studio Code, puedes instalar la extensión oficial de Biome desde el marketplace de VS Code. Una vez instalada, la extensión detectará automáticamente tu configuración de Biome y aplicará las reglas de linting y formateo mientras editas tus archivos. A continuación te muestro un ejemplo de cómo se ve Biome en acción en Visual Studio Code:

Para instalarlo en otros editores, puedes consultar la documentación oficial de Biome para obtener instrucciones específicas sobre cómo integrarlo con tu IDE preferido.

Conclusión

Biome es una herramienta prometedora que busca simplificar el flujo de trabajo de desarrollo para JavaScript y TypeScript al unificar varias funcionalidades en una sola herramienta. Con su enfoque en la velocidad, la eficiencia y la facilidad de uso, Biome tiene el potencial de convertirse en una opción popular entre los desarrolladores que buscan una solución todo en uno para sus necesidades. Si estás interesado en probar Biome, te animo a que lo instales y experimentes con sus características para ver cómo puede mejorar tu flujo de trabajo, ya que solo con instalarlo y utilizar las opciones predeterminadas ya puedes obtener mejoras significativas en tu proceso de desarrollo. Puedes encontrar el código relacionado a este artículo en el siguiente repositorio de GitHub.