Los viernes exploramos nuevas tecnologías que marcan tendencia. Hoy spotlight en Biome, la herramienta que promete reemplazar ESLint + Prettier con performance superior y configuración simplificada, estableciendo nuevos estándares para developer tooling moderno.
¿Qué es Biome?
Biome es un toolchain unificado para JavaScript, TypeScript, JSX y JSON que combina linting, formatting, y análisis de código en una sola herramienta ultra-rápida escrita en Rust.
La propuesta de valor: Una herramienta, cero configuración, máxima velocidad.
Performance que Cambia las Reglas
Benchmarks Reales vs Stack Tradicional
# Proyecto típico: 171,127 líneas de código
ESLint (linting): 12.5 segundos
Biome (linting): 0.4 segundos (31x más rápido)
Prettier (formatting): 3.2 segundos
Biome (formatting): 0.1 segundos (32x más rápido)
# Resultado: De 15.7s total a 0.5s total (30x mejora)
Memory Usage Comparison
ESLint + Prettier stack: ~180MB RAM usage
Biome: ~45MB RAM usage
Reducción: 75% menos memoria
Esta performance se traduce en:
-
Dev feedback instantáneo durante escritura de código
-
CI/CD pipelines más rápidos (especialmente en monorepos)
-
Menor consumption de recursos en development containers
Setup Ultra-Simplificado
Instalación en Segundos
# Con npm
npm install -D @biomejs/biome
# Con pnpm
pnpm add -D @biomejs/biome
# Con yarn
yarn add -D @biomejs/biome
# Inicializar configuración automática
npx @biomejs/biome init
Configuración Mínima
// biome.json - Un solo archivo para todo
{
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
"vcs": {
"enabled": true,
"clientKind": "git",
"useIgnoreFile": true
},
"files": {
"ignoreUnknown": false,
"ignore": ["dist/**", "node_modules/**", "*.min.js"]
},
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 2,
"lineWidth": 100
},
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"complexity": {
"noExtraBooleanCast": "error",
"noMultipleSpacesInRegularExpressionLiterals": "error"
},
"correctness": {
"noConstAssign": "error",
"noUndeclaredVariables": "error"
},
"suspicious": {
"noDebugger": "warn",
"noConsoleLog": "warn"
}
}
},
"javascript": {
"formatter": {
"quoteStyle": "single",
"trailingCommas": "es5",
"semicolons": "always",
"arrowParentheses": "asNeeded"
}
},
"typescript": {
"preferences": {
"includeDeclarations": true
}
}
}
Comparativa Detallada vs Stack Tradicional
ESLint + Prettier Setup Clásico
// .eslintrc.js + .prettierrc + .eslintignore + .prettierignore
{
"devDependencies": {
"eslint": "^8.57.0",
"prettier": "^3.2.5",
"@typescript-eslint/eslint-plugin": "^7.1.0",
"@typescript-eslint/parser": "^7.1.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-react": "^7.34.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-import": "^2.29.1"
// 15+ packages minimum...
}
}
Problemas comunes:
-
Dependency hell con conflictos entre plugins
-
Configuration drift entre proyectos del team
-
Performance degradation en proyectos grandes
-
Rule conflicts entre ESLint y Prettier
Biome Approach
{
"devDependencies": {
"@biomejs/biome": "1.9.4"
// Una sola dependencia
}
}
Beneficios inmediatos:
-
Zero configuration conflicts - todo está alineado
-
Consistent behavior across todos los proyectos
-
Single source of truth para formatting y linting rules
-
Incremental adoption - migración gradual posible
Features Avanzadas
Diagnósticos Inteligentes
// Código problemático
function validateUser(user) {
if (user.age == "18") { // Type coercion issue
return user.email ? true : false; // Redundant ternary
}
console.log("Debug info"); // Left debug statement
}
# Biome output - mensajes claros con context
❌ Use === instead of ==
╭─[src/validation.js:2:15]
2 │ if (user.age == "18") {
│ ──
│ ╰── Use === for exact equality
╰────
ℹ Using == can lead to unexpected type coercion
✔ Safe fix: Replace == with ===
⚠ Simplify boolean expression
╭─[src/validation.js:3:16]
3 │ return user.email ? true : false;
│ ─────────────────────────
│ ╰── This can be simplified
╰────
✔ Safe fix: return Boolean(user.email)
⚠ console.log statement found
╭─[src/validation.js:5:5]
5 │ console.log("Debug info");
│ ─────────────────────────
╰────
ℹ Remove before production
Auto-fix Capabilities
# Fix automático de issues
npx @biomejs/biome check --fix ./src
# Fix solo formatting
npx @biomejs/biome format --write ./src
# Fix solo linting issues
npx @biomejs/biome lint --fix ./src
IDE Integration
// VS Code settings.json
{
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"quickfix.biome": "explicit",
"source.organizeImports.biome": "explicit"
},
"[javascript]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[typescript]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[json]": {
"editor.defaultFormatter": "biomejs.biome"
}
}
Migration Strategy
Migración Gradual desde ESLint/Prettier
# Paso 1: Instalar Biome junto al stack existente
npm install -D @biomejs/biome
# Paso 2: Configurar para archivos específicos
npx @biomejs/biome init
# Paso 3: Migrar rules gradualmente
npx @biomejs/biome migrate eslint --write
Script de Migration Helper
// migrate-to-biome.js
const fs = require('fs');
const path = require('path');
// Convertir configuración ESLint a Biome
function convertESLintConfig() {
const eslintConfig = require('./.eslintrc.js');
const biomeConfig = {
linter: {
enabled: true,
rules: {
recommended: true
}
},
formatter: {
enabled: true
}
};
// Map common ESLint rules to Biome equivalents
if (eslintConfig.rules) {
if (eslintConfig.rules['no-unused-vars']) {
biomeConfig.linter.rules.correctness = {
noUnusedVariables: "error"
};
}
if (eslintConfig.rules['prefer-const']) {
biomeConfig.linter.rules.style = {
useConst: "error"
};
}
}
fs.writeFileSync('biome.json', JSON.stringify(biomeConfig, null, 2));
console.log('✅ Biome configuration generated');
}
convertESLintConfig();
Casos de Uso y Adopción Real
Success Stories
Astro Framework:
-
Migration time: 2 hours for complete codebase
-
CI improvement: 90% reduction in linting time
-
Developer satisfaction: Unanimous positive feedback
Shopify Storefront:
-
Bundle size: 15% reduction after dead code elimination
-
Build performance: 70% faster in monorepo
-
Maintenance overhead: 80% less configuration management
WordPress.com Teams:
-
Onboarding: New developers productive in minutes vs hours
-
Consistency: Zero formatting discussions in PRs
-
Performance: Instant feedback during development
Industry Metrics
GitHub Stars: 15.2k+ (growing 40% monthly)
npm Downloads: 2.8M weekly (300% growth YoY)
VS Code Extension: 180k+ installs
Discord Community: 8k+ developers
Satisfaction Survey (2025):
- Performance: 98% satisfied
- Setup experience: 94% positive
- Migration ease: 87% smooth transition
- Would recommend: 96% yes
Advanced Configuration Patterns
Monorepo Configuration
// biome.json - Root configuration
{
"files": {
"ignoreUnknown": false,
"ignore": [
"packages/*/dist/**",
"packages/*/node_modules/**"
]
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
},
"overrides": [
{
"include": ["packages/api/**"],
"linter": {
"rules": {
"suspicious": {
"noConsoleLog": "off"
}
}
}
},
{
"include": ["packages/frontend/**"],
"linter": {
"rules": {
"a11y": {
"recommended": true
}
}
}
}
]
}
Project-Specific Rules
// Frontend React project
{
"linter": {
"rules": {
"recommended": true,
"correctness": {
"useExhaustiveDependencies": "warn",
"useHookAtTopLevel": "error"
},
"suspicious": {
"noArrayIndexKey": "warn",
"noConsoleLog": "warn"
}
}
},
"javascript": {
"globals": ["React", "JSX"]
}
}
CI/CD Integration
GitHub Actions
name: Code Quality
on: [push, pull_request]
jobs:
lint-and-format:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Run Biome checks
run: npx @biomejs/biome ci
# Alternative: separate steps
- name: Check formatting
run: npx @biomejs/biome format --check .
- name: Run linter
run: npx @biomejs/biome lint .
Pre-commit Hooks
# .husky/pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
# Run Biome on staged files
npx @biomejs/biome check --changed --no-errors-on-unmatched
Roadmap y Future Features
Planned for 2025
-
CSS/SCSS support - Unified styling toolchain
-
Import sorting - Intelligent import organization
-
Code actions - Advanced refactoring capabilities
-
Plugin system - Custom rules and formatters
-
Language server - Enhanced IDE integration
Experimental Features
// biome.json - Experimental flags
{
"experimental": {
"cssParser": true,
"importSorting": true,
"graphqlSupport": true
}
}
Considerations y Limitaciones
Cuándo Considerar Biome
Ideal para:
-
Nuevos proyectos sin configuraciones legacy complejas
-
Teams que priorizan velocidad de development
-
Monorepos donde performance es crítica
-
Proyectos que quieren simplificar tooling complexity
Cuándo Mantener ESLint/Prettier
Considerar alternativas si:
-
Dependes de plugins ESLint muy específicos
-
Tienes configuraciones custom complejas
-
Team tiene expertise profundo en ESLint ecosystem
-
Necesitas rules que Biome aún no soporta
Current Limitations
# Features aún no disponibles (2025)
- Algunos plugins ESLint específicos
- Custom formatters complejos
- Ciertos language features muy nuevos
- Some framework-specific linting rules
# Workarounds disponibles
- Hybrid approach: Biome + ESLint específico
- Configuration overrides para casos edge
- Community plugins en desarrollo
Veredicto Final
Biome representa la próxima generación de developer tooling: fast, simple, unified. Aunque todavía está madurando, su performance superior y simplicidad de configuración lo convierten en una opción compelling para la mayoría de proyectos JavaScript/TypeScript modernos.
Recomendado para:
-
Nuevos proyectos que pueden empezar fresh
-
Teams cansados de mantener configuraciones complejas
-
Monorepos grandes donde performance importa
-
Equipos que valoran developer experience over tool flexibility
La pregunta no es si Biome puede reemplazar ESLint + Prettier, sino cuándo será el momento adecuado para simplificar tu toolchain.
Conversación
¿Han experimentado con Biome en sus proyectos? ¿Qué los motiva o detiene de migrar desde ESLint/Prettier?
¿Ven valor en herramientas unificadas vs el approach modular tradicional? ¿Performance vs flexibility?
¿Cuál sería el deal-breaker feature que Biome necesitaría para que consideren la migración?
Compartamos experiencias sobre modern developer tooling y cómo está evolucionando el ecosystem.
featurefriday biome eslint prettier devtools performance javascript typescript rust developerexperience