Biome (Alternativa ao ESLint + Prettier)

Use o Biome como uma ferramenta única e rápida para linting, formatação e organização de imports - substituindo tanto o ESLint quanto o Prettier.

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

# Instalar Biome
npm install --save-dev @biomejs/biome
 
# Inicializar configuração
npx biome init
 
# Formatar arquivos
npx biome format --write .
 
# Executar lint em arquivos
npx biome lint .
 
# Executar lint + format + organizar imports em um único comando
npx biome check --write .

Quando usar isso: Quando você deseja uma única ferramenta que seja significativamente mais rápida que ESLint + Prettier combinados, com configuração mínima.

Exemplo de Trabalho

// 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"
    ]
  }
}

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

O que isso demonstra:

• Um único biome.json substitui tanto .eslintrc quanto .prettierrc
• Opções do formatador espelham as configurações familiares do Prettier
• Regras do linter cobrem hooks do React, variáveis não utilizadas, acessibilidade e padrões TypeScript
• biome check executa lint + format + organização de imports em uma única passagem

Mergulho Profundo

Como Funciona

• Biome é escrito em Rust, o que o torna 10 a 100 vezes mais rápido que ESLint + Prettier
• Ele usa um único parse de AST para linting, formatação e organização de imports (sem ferramentas separadas)
• As regras são agrupadas por categoria: correctness, suspicious, style, a11y, complexity, performance, security
• O preset recommended habilita padrões sensatos semelhantes a eslint:recommended + react/recommended
• Sem sistema de plugins - todas as regras são integradas

Variações

Migrando de ESLint + Prettier:

# Biome pode migrar sua configuração do ESLint
npx biome migrate eslint --write
 
# Migrar configuração do Prettier
npx biome migrate prettier --write

Comparação de performance:

Integração com 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"]
}

Substituições seletivas por diretório:

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

Notas sobre TypeScript

// Biome entende TypeScript nativamente - nenhum plugin de parser é necessário.
// Ele detecta:
 
// Imports não utilizados
import type { User } from "@/types"; // Removido se não utilizado
 
// Variáveis não utilizadas
const unused = "hello"; // Erro: noUnusedVariables
 
// Any explícito
const data: any = fetch("/api"); // Aviso: noExplicitAny
 
// Asserções non-null
const name = user!.name; // Aviso: noNonNullAssertion

Armadilhas

Coisas que vão te pegar. Cada armadilha inclui o que dá errado, por que acontece e a correção.

• Sem ecossistema de plugins - Biome não suporta plugins de terceiros. Não há equivalente para eslint-plugin-tailwindcss ou eslint-plugin-testing-library. Correção: Se você precisa de ordenação de classes Tailwind, use prettier-plugin-tailwindcss junto com o Biome (Biome para linting, Prettier apenas para ordenação de classes Tailwind), ou aceite a limitação.

• Sem regras específicas para Next.js - Biome não inclui regras do eslint-plugin-next (no-img-element, no-head-element, etc.). Correção: Execute next lint junto com o Biome para verificações específicas do Next.js, ou aceite a lacuna.

• Nomes de regras diferentes - Os nomes das regras diferem do ESLint (por exemplo, noUnusedVariables vs no-unused-vars). Correção: Use npx biome migrate eslint para converter sua configuração automaticamente.

• Diferenças de formatação em relação ao Prettier - Biome visa a compatibilidade com o Prettier, mas não é 100% idêntico. Alguns casos extremos na formatação JSX e TypeScript diferem. Correção: Execute npx biome format em sua base de código uma vez e revise as diferenças. A maioria das diferenças são menores.

Alternativas

Outras maneiras de resolver o mesmo problema - e quando cada uma é a melhor escolha.

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

Relacionados

• Configuração do ESLint para Next.js - configuração tradicional do ESLint
• Configuração do Prettier - configuração tradicional de formatação
• Integração ESLint + Prettier - fazendo as ferramentas tradicionais coexistirem
• Linting em CI/CD - executando Biome em CI