Como configurar o Biome para Front-end e Back-end de forma eficiente
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
Projetos de front-end e back-end ficam caóticos sem padrões claros. O Biome resolve esse problema com rapidez, automatizando ajustes cruciais e trazendo regras que se adaptam ao que o time e o projeto realmente precisam. Instalar e configurar bem um linter e formatador moderno é o passo mais estratégico para economizar tempo, evitar bugs, manter o código legível e facilitar revisões — não importa se você trabalha sozinho ou em equipe.
Biome: O Atalho para Código Limpo em Qualquer Stack
Escrever código limpo é difícil quando cada pessoa usa um estilo diferente. Com o Biome, você controla regras de indentação, largura de linha e até o uso de pontos e vírgulas. Isso elimina debates, acelera revisão e simplifica manutenção do código, seja em Node, React ou qualquer projeto JavaScript moderno.
Como Instalar o Biome
Para começar, instale o Biome no seu projeto back-end. Execute no terminal: npm install -D @biomejs/biome. Depois, libere a inicialização usando o comando npx biome init para criar a configuração padrão.
⚠️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
Você pode aceitar a configuração padrão do Biome, mas para mais clareza e um estilo uniforme entre arquivos, ajuste as preferências principais:
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.
Próximos Passos: Automatize o Lint e o Format
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.
Resumo Visual: Minhas Configurações Favoritas de Biome
- 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.
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