Biome 2.0 - Ferramenta de Alta Velocidade que Substitui ESLint/Prettier

O que é o Biome

O Biome é um linter e formatador de alta velocidade feito em Rust. Como alternativa ao ESLint e Prettier, permite gerenciar qualidade de código e formatação com uma única ferramenta.

Novos Recursos do Biome 2.0

Desempenho Impressionante

Formatação de 1000 arquivos:
- Prettier: 15 segundos
- Biome: 0,5 segundos (30x mais rápido)

Execução de lint:
- ESLint: 45 segundos
- Biome: 1,5 segundos (30x mais rápido)

Suporte a CSS/SCSS

/* Biome formata e faz lint */
.container {
  display: flex;
  flex-direction: column;
}

/* Aviso: seletor não utilizado */
.unused-class {
  color: red;
}

Suporte a GraphQL

# Biome formata e faz lint
query GetUser($id: ID!) {
  user(id: $id) {
    name
    email
  }
}

Instalação e Configuração

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
  }
}

Migração do ESLint/Prettier

Conversão de Configuração

# Converter configuração do ESLint para Biome
npx biome migrate eslint

# Converter configuração do Prettier para Biome
npx biome migrate prettier

Correspondência das Principais Regras

Comandos CLI

# Formatar
biome format --write ./src

# Lint
biome lint ./src

# Executar ambos
biome check ./src

# Auto correção
biome check --apply ./src

# Modo CI (código de saída 1 se houver erros)
biome ci ./src

Integração com IDE

VS Code

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

Novas Regras de Lint

Segurança

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

// Aviso: innerHTML perigoso
element.innerHTML = userInput;

Desempenho

// Aviso: uso desnecessário de Array.prototype.reduce()
const sum = arr.reduce((a, b) => a + b, 0);

// Recomendado: loop for simples
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 da regra personalizada
      }
    }
  }
};

Comparação com Prettier/ESLint

Resumo

O Biome 2.0 integra ESLint e Prettier em uma única ferramenta e executa com velocidade avassaladora. É especialmente eficaz para reduzir tempo de build em projetos de grande escala e ambientes de CI. O ecossistema de plugins ainda está em desenvolvimento, mas as regras básicas são bem cobertas.