Substituindo ESLint e Prettier: Biome simplifica linting e formatação em um só lugar!

Nos meus novos projetos, tenho substituído o ESLint e Prettier pelo Biome.

Um dos grandes destaques do Biome é que ele já inclui muitas regras de plugins normalmente utilizados no ESLint, como typescript-eslint, eslint-plugin-react, eslint-plugin-react-hooks e muitos outros, removendo a necessidade de adicionar centenas de pacotes ao package.

Outro destaque é o seu linter, que retorna diagnósticos detalhados, fornecendo não apenas onde está o erro, mas também dicas de como você pode escrever aquele trecho utilizando métodos mais modernos e removendo código desnecessário quando possível.

Por ser um linter e um formatter, Biome substitui a necessidade de utilizar duas ferramentas como acontece com ESLint e Prettier, centralizando tudo em apenas uma.

A instalação e configuração do Biome é super simples e tem integração com o VSCode.

Instalando e Configurando o Biome

Para instalar o Biome em seu projeto, utilize o npm ou yarn conforme indicado abaixo:

npm install biome --save-dev

yarn add biome --dev

Depois de instalado, você pode criar um arquivo de configuração chamado .biomerc.json na raiz do seu projeto:

[
  {
    "extends": "biome:recommended"
  }
] 

Isso é tudo o que você precisa para começar a usar o Biome em seu projeto. Ele já vem configurado para seguir as melhores práticas em Javascript e Typescript.

Integração com VSCode

O Biome possui uma excelente integração com o VSCode. Para configurá-lo, você precisará instalar a extensão Biome for VSCode.

Depois de instalar a extensão, basta adicionar a seguinte configuração em seu arquivo settings.json do VSCode:

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

Isso garantirá que todas as correções sugeridas pelo Biome sejam automaticamente aplicadas ao salvar o arquivo.

Comparação entre Biome, ESLint e Prettier

Um dos pontos fortes do Biome é a sua capacidade de centralizar a análise estática e formatação de código em uma única ferramenta. Veja a seguir uma comparação direta entre Biome, ESLint e Prettier:

Como você pode ver, o Biome oferece uma solução simplificada e eficiente para manter a qualidade do código em seus projetos, unificando as tarefas de linting e formatação em uma única ferramenta.

Você já conhecia essa ferramenta? Já utilizou ela em seus projetos? Compartilhe sua experiência nos comentários!