Como configurar Biome no front e no back-end
Um guia prático para instalar, ajustar e aproveitar o Biome na padronização de código em toda a stack. Programe rápido, limpo e seguro desde o primeiro commit.
Por que isso é importante
Como configurar Biome no front e no back: instale @biomejs/biome, rode npx biome init, ajuste biome.json (lint+format) e use biome check --write no CI. Substitui ESLint+Prettier na maioria dos projetos; mantenha ESLint só se depender de plugins sem equivalente.
Leitura relacionada: ESLint vs Biome · TypeScript + React na prática · curso de Next.js · Next.js 16: o que mudou · tutorial completo de Shadcn UI.
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.
Atenção
É bom instalar o Biome separado no back-end e front-end: isso evita conflitos e respeita as particularidades de cada ambiente do projeto.
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.
Dica Técnica
Defina indentStyle como “space” e indentWidth igual a 2 para manter visual limpo e fácil de navegar.
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.
Cuidado
Ignorar o limite de linha dificulta leitura, versionamento e revisão — principalmente online. Adote o padrão!
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.
Atenção
Remover todos os pontos e vírgulas manualmente pode quebrar trechos de código. Deixe a lógica para o Biome: ele sabe exatamente quando são obrigatórios.
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.
Sucesso
Com essa separação, fica fácil adaptar regras diferentes quando for necessário (por exemplo, React vs. Node) sem interferência e queda de produtividade.
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.
Dica de Produtividade
Integre o Biome ao seu editor preferido (VSCode, WebStorm, etc.) para feedback instantâneo e salvamento automático já formatando código.
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)
Atenção
Padrão sólido e bem comunicado reduz atrito no onboarding de novos devs.
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):
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)
Migrar core para Biome
Format + lint “core” numa ferramenta só
Prós
- Menos tooling no CI
- Formatter+linter alinhados
Contras
- Plugins ESLint específicos podem faltar
Manter ESLint pontual
Quando ainda depende de regras que o Biome não cobre
Prós
- Não perde plugins críticos
- Migração gradual
Contras
- Dois mundos no workspace
- Risco de configs conflitantes
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: <a href="https://www.youtube.com/@DevDoido">https://www.youtube.com/@DevDoido</a>
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.
<a href="https://biomejs.dev/">Biome</a>. <a href="https://biomejs.dev/guides/getting-started/">Biome — Getting Started</a>. <a href="https://biomejs.dev/reference/configuration/">Biome configuration</a>.
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.