Como configurar Biome no front e no back-end

Por que Biome no lugar de ESLint + Prettier

Biome unifica lint e format num só toolchain: menos atrito que ESLint+Prettier separados, com check --write no CI. Troque o stack clássico quando as regras recommended cobrirem o time; se faltarem plugins críticos, mantenha ESLint pontual.

Como Instalar o Biome

Instale com npm install -D @biomejs/biome e rode npx biome init para gerar biome.json. Depois use biome check (e check --write) no front e no back — o mesmo fluxo nos dois lados.

Personalizando a Configuração do Biome

Aceite recommended no início e ajuste só o essencial: indentStyle, lineWidth e overrides por pasta (web vs api). Personalização big-bang antes do CI estável só gera ruído no time.

Indentação

Prefira “space” e não “tab” como indentação base. Códigos com espaços são mais legíveis, especialmente quando abertos em diferentes editores.

Largura das Linhas

Limite suas linhas a 80 caracteres usando a opção lineWidth: 80 . Assim, o código se adapta a várias telas e previne quebras ruins em modo split.

Pontos e Vírgulas

Escolha semicolons: asNeeded . O Biome só insere ponto e vírgula quando realmente precisa. Isso deixa o código mais limpo e, ao mesmo tempo, garante consistência, sem risco de bugs graves.

Aplicando no Front-end

Depois de configurar o Biome no back-end, repita a instalação no front. Garanta que cada repositório ou subdiretório do seu projeto tenha sua própria configuração Biome, de acordo com os padrões discutidos acima.

CI e scripts: biome check --write

Programe scripts no seu package.json para rodar o Biome automaticamente ao commitar código. Assim, ninguém esquece de rodar o linter ou formatador — qualidade se torna o padrão da equipe.

Receita prática: biome.json opinado (CS)

- indentStyle: "space" (não use tab) - indentWidth: 2 - lineWidth: 80 - semicolons: asNeeded (sem excesso de ponto e vírgula)

Monorepo front + back: um biome.json com globs

Em apps/web e apps/api (ou packages/*), use files.includes / overrides por workspace. Um Biome por pacote com extends do root também funciona — o ponto é não misturar configs conflitantes no mesmo root sem includes claros. Exemplo opinado CS (ajuste lineWidth ao time):

{
  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
  "files": {
    "includes": ["apps/**/*.ts", "apps/**/*.tsx", "packages/**/*.ts"]
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80
  },
  "linter": {
    "enabled": true,
    "rules": { "recommended": true }
  },
  "overrides": [
    {
      "includes": ["apps/api/**"],
      "linter": { "rules": { "style": { "noNonNullAssertion": "off" } } }
    }
  ]
}

Scripts CI: "lint": "biome check ." e "format": "biome check --write .". Confira a versão do schema na doc Biome do dia.

Quando manter ESLint (e quando migrar 100% para o Biome)

VS Code: defina Biome como default formatter no workspace e rode check no CI. Um Biome por pacote com extends do root também funciona — o ponto é não misturar configs conflitantes no mesmo root sem includes claros.

Assista um tutorial prático

Quer uma explicação ainda mais detalhada? No canal Dev Doido no YouTube, você encontra vídeos extremos e práticos de como instalar, ajustar e resolver qualquer dúvida sobre o Biome e muitas outras tecnologias modernas para devs. Confira em: https://www.youtube.com/@DevDoido

Fontes

Revisão em agosto de 2026. Biome evolui rápido (rules, formatter, monorepo) — confira a doc oficial antes de migrar 100% de ESLint/Prettier. Tutorial de configuração, não auditoria de todo o ecossistema de plugins.

Biome. Biome — Getting Started. Biome configuration.

Perguntas frequentes

Como configurar o Biome no lugar de ESLint e Prettier?

Instale @biomejs/biome, rode biome init e use biome check --write no CI. Um biome.json cobre lint e format; ajuste regras do time depois da base recommended.

Biome substitui 100% o ESLint?

Para a maioria dos projetos JS/TS, sim no lint+format. Se você depende de plugins ESLint sem equivalente, mantenha ESLint só nesses pontos ou aceite o trade-off.

Dá para usar Biome no front e no back no mesmo monorepo?

Sim. Use um biome.json com globs por app/pacote (web + api) ou configs por package para evitar conflito de indent/rules.

Como migrar sem quebrar o time?

Rode format/check em PRs pequenos, corrija aos poucos e defina o Biome como default formatter no editor. Migração big-bang só aumenta ruído.

Continue explorando