Biome (Alternativa a ESLint + Prettier)

Usa Biome como una única herramienta rápida para linting, formateo y organización de imports - reemplazando ESLint y Prettier.

Recipe

Tarjeta de referencia rápida - lista para copiar y pegar.

# Instala Biome
npm install --save-dev @biomejs/biome
 
# Inicializa la configuración
npx biome init
 
# Formatea archivos
npx biome format --write .
 
# Realiza lint en archivos
npx biome lint .
 
# Lint + formateo + organiza imports en un comando
npx biome check --write .

Cuándo usarlo: Cuando quieres una única herramienta que sea significativamente más rápida que ESLint + Prettier combinados, con mínima configuración.

Working Example

// biome.json
{
  "$schema": "https://biomejs.dev/schemas/1.9.0/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80,
    "lineEnding": "lf"
  },
  "javascript": {
    "formatter": {
      "semicolons": "always",
      "quoteStyle": "double",
      "trailingCommas": "all",
      "arrowParentheses": "always"
    }
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "correctness": {
        "useExhaustiveDependencies": "warn",
        "noUnusedVariables": "error",
        "noUnusedImports": "error"
      },
      "suspicious": {
        "noExplicitAny": "warn"
      },
      "style": {
        "useConst": "error",
        "noNonNullAssertion": "warn"
      },
      "a11y": {
        "useAltText": "error",
        "useAnchorContent": "warn"
      }
    }
  },
  "files": {
    "ignore": [
      "node_modules/",
      ".next/",
      "out/",
      "coverage/",
      "*.min.js"
    ]
  }
}

// package.json scripts
{
  "scripts": {
    "lint": "biome lint .",
    "format": "biome format --write .",
    "check": "biome check --write .",
    "check:ci": "biome check ."
  }
}

Lo que esto demuestra:

• Un único biome.json reemplaza tanto .eslintrc como .prettierrc
• Las opciones del formateador reflejan la configuración familiar de Prettier
• Las reglas del linter cubren React hooks, variables no utilizadas, accesibilidad y patrones de TypeScript
• biome check ejecuta lint + formateo + organización de imports en un solo paso

Deep Dive

Cómo funciona

• Biome está escrito en Rust, lo que lo hace de 10 a 100 veces más rápido que ESLint + Prettier
• Usa un único parse de AST para linting, formateo y organización de imports (sin herramientas separadas)
• Las reglas se agrupan por categoría: correctness, suspicious, style, a11y, complexity, performance, security
• El preset recommended habilita valores por defecto sensatos similares a eslint:recommended + react/recommended
• Sin sistema de plugins - todas las reglas están integradas

Variations

Migrando desde ESLint + Prettier:

# Biome puede migrar tu configuración de ESLint
npx biome migrate eslint --write
 
# Migra la configuración de Prettier
npx biome migrate prettier --write

Comparación de rendimiento:

Integración con IDE:

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

// .vscode/extensions.json
{
  "recommendations": ["biomejs.biome"]
}

Sobrescrituras selectivas por directorio:

{
  "overrides": [
    {
      "include": ["tests/**"],
      "linter": {
        "rules": {
          "suspicious": {
            "noExplicitAny": "off"
          }
        }
      }
    }
  ]
}

TypeScript Notes

// Biome entiende TypeScript de forma nativa - no necesita plugin de parser.
// Detecta:
 
// Imports no utilizados
import type { User } from "@/types"; // Eliminado si no se usa
 
// Variables no utilizadas
const unused = "hello"; // Error: noUnusedVariables
 
// Any explícito
const data: any = fetch("/api"); // Warn: noExplicitAny
 
// Aserciones non-null
const name = user!.name; // Warn: noNonNullAssertion

Gotchas

Cosas que pueden atraparte. Cada gotcha incluye qué sale mal, por qué sucede y la solución.

• Sin ecosistema de plugins - Biome no soporta plugins de terceros. No hay equivalente de eslint-plugin-tailwindcss o eslint-plugin-testing-library. Solución: Si necesitas ordenar clases de Tailwind, usa prettier-plugin-tailwindcss junto a Biome (Biome para linting, Prettier solo para ordenar clases de Tailwind), o acepta la limitación.

• Sin reglas específicas de Next.js - Biome no incluye reglas de eslint-plugin-next (no-img-element, no-head-element, etc.). Solución: Ejecuta next lint junto a Biome para verificaciones específicas de Next.js, o acepta la brecha.

• Nombres de reglas diferentes - Los nombres de reglas difieren de ESLint (p. ej., noUnusedVariables vs no-unused-vars). Solución: Usa npx biome migrate eslint para convertir tu configuración automáticamente.

• Diferencias de formateo respecto a Prettier - Biome busca ser compatible con Prettier pero no es 100% idéntico. Algunos casos extremos en formateo de JSX y TypeScript difieren. Solución: Ejecuta npx biome format en tu base de código una vez y revisa el diff. La mayoría de las diferencias son menores.

Alternatives

Otras formas de resolver el mismo problema - y cuándo cada una es la mejor opción.

FAQs

npx biome migrate eslint --write
npx biome migrate prettier --write

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

{
  "overrides": [
    {
      "include": ["tests/**"],
      "linter": {
        "rules": {
          "suspicious": { "noExplicitAny": "off" }
        }
      }
    }
  ]
}

Related

• ESLint Setup for Next.js - traditional ESLint setup
• Prettier Setup - traditional formatting setup
• ESLint + Prettier Integration - making the traditional tools coexist
• Linting in CI/CD - running Biome in CI