Biome 2.0 - Herramienta rápida que reemplaza ESLint/Prettier

¿Qué es Biome?

Biome es un linter y formateador ultra rápido escrito en Rust. Como alternativa a ESLint y Prettier, puedes gestionar la calidad y formato del código con una sola herramienta.

Nuevas funciones de Biome 2.0

Rendimiento asombroso

Formateo de 1000 archivos:
- Prettier: 15 segundos
- Biome: 0.5 segundos (30 veces más rápido)

Ejecución de lint:
- ESLint: 45 segundos
- Biome: 1.5 segundos (30 veces más rápido)

Soporte CSS/SCSS

/* Biome formatea y hace lint */
.container {
  display: flex;
  flex-direction: column;
}

/* Advertencia: selector no utilizado */
.unused-class {
  color: red;
}

Soporte GraphQL

# Biome formatea y hace lint
query GetUser($id: ID!) {
  user(id: $id) {
    name
    email
  }
}

Instalación y configuración

npm install --save-dev @biomejs/biome
npx biome init

// biome.json
{
  "$schema": "https://biomejs.dev/schemas/1.0.0/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "suspicious": {
        "noExplicitAny": "error"
      },
      "style": {
        "useConst": "warn"
      }
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2
  }
}

Migración desde ESLint/Prettier

Conversión de configuración

# Convertir configuración de ESLint a Biome
npx biome migrate eslint

# Convertir configuración de Prettier a Biome
npx biome migrate prettier

Correspondencia de reglas principales

Comandos CLI

# Formatear
biome format --write ./src

# Lint
biome lint ./src

# Ejecutar ambos
biome check ./src

# Auto-corrección
biome check --apply ./src

# Modo CI (código de salida 1 si hay errores)
biome ci ./src

Integración con IDE

VS Code

// settings.json
{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

Nuevas reglas de lint

Seguridad

// Advertencia: uso de eval()
eval("console.log('hello')");

// Advertencia: innerHTML peligroso
element.innerHTML = userInput;

Rendimiento

// Advertencia: uso innecesario de Array.prototype.reduce()
const sum = arr.reduce((a, b) => a + b, 0);

// Recomendado: bucle for simple
let sum = 0;
for (const num of arr) sum += num;

Sistema de plugins (experimental)

// biome-plugin-custom.js
export default {
  rules: {
    'no-custom-pattern': {
      meta: { /* ... */ },
      create(context) {
        // Lógica de regla personalizada
      }
    }
  }
};

Comparación con Prettier/ESLint

Resumen

Biome 2.0 integra ESLint y Prettier en una sola herramienta, ejecutándose a velocidades abrumadoras. Especialmente efectivo para reducir tiempos de compilación en proyectos grandes y entornos CI. El ecosistema de plugins está en desarrollo, pero las reglas básicas están suficientemente cubiertas.