Análise estática de JavaScript com ESLint e Biome

Se você já trabalha com JavaScript há algum tempo, provavelmente conhece o ESLint, a ferramenta preferida para análise estática de código JavaScript. Mas já ouviu falar do Biome? Esse novo concorrente do Prettier para formatação de código está ganhando espaço no ecossistema JavaScript. Além de formatar o código, Biome também analisa sua qualidade, tornando-se uma alternativa ao ESLint.

Vamos começar com uma introdução simples à formatação e à qualidade do código, ferramentas e preocupações importantes para quem desenvolve em JavaScript. Como você já deve imaginar, manter a qualidade do código e seguir as convenções adequadas de formatação contribui para o sucesso de qualquer projeto de software, especialmente quando você trabalha em equipe.

A qualidade do código está relacionada ao seu comportamento durante a execução. Um código de alta qualidade é eficiente, fácil de entender e livre de bugs. Já a formatação, que faz parte do estilo de código, diz respeito à organização visual, que facilita a leitura e a compreensão.

// Convention of preferred code formatting and quality
function add(a, b){
  return a + b;
}

// An example for what would be considered as
// poor code formatting, making it hard to read
// and error-prone
function add(c,d){return c+d;}

No ecossistema JavaScript, várias ferramentas ajudam a manter a formatação e a qualidade do código. Entre elas, ESLint e Biome se tornaram opções populares para desenvolvedores que querem simplificar a manutenção da base de código.

Introdução ao Biome e ao ESLint

ESLint é uma ferramenta open source de análise estática de JavaScript que ajuda desenvolvedores a produzir código de alta qualidade. Com ela, é possível identificar padrões problemáticos ou código que não segue determinadas diretrizes de estilo. A ferramenta é altamente personalizável e pode ser configurada para aplicar diversos padrões de programação.

ESLint é muito popular e extensível: você pode adicionar regras personalizadas para aplicar seus padrões de programação. Por exemplo, é possível exigir o uso de ponto e vírgula no fim de cada instrução ou aspas simples em vez de aspas duplas para strings.

Se você já explorou um projeto JavaScript, talvez tenha visto um arquivo .eslintrc.js parecido com este:

// .eslintrc.js
module.exports = {
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
};

Biome, por outro lado, é uma ferramenta relativamente nova no ecossistema JavaScript, voltada à formatação e à análise da qualidade do código. Talvez você já tenha ouvido falar do Prettier ou até o tenha usado. É aí que entra o Biome. Escrito em Rust, ele foi projetado para ser mais rápido. Biome segue opiniões próprias na maioria das decisões, mas oferece algumas opções configuráveis. Veja um exemplo de arquivo biome.json:

{
  "javascript": {
    "formatter": {
      "indentWidth": 2,
      "lineWidth": 100,
      "trailingComma": "none",
      "semicolons": "always",
    }
  }
}

Atualmente, Biome é compatível com arquivos JavaScript, TypeScript, JSX e JSON.

A migração do Prettier para o Biome e o foco do ESLint na qualidade do código

Tradicionalmente, muitos desenvolvedores JavaScript usam o Prettier para formatar código. Com o surgimento do Biome, porém, esse cenário está mudando. O principal objetivo do Biome é oferecer velocidade e desempenho. Escrito em Rust, ele pode ser até 35 vezes mais rápido que o Prettier ao formatar mais de 170 mil linhas de código distribuídas em 2 mil arquivos. Em uma base de código grande, essa velocidade pode fazer uma diferença significativa no processo de desenvolvimento.

Isso não significa que o ESLint esteja sendo deixado de lado. Pelo contrário: ele continua sendo uma ferramenta poderosa para manter a qualidade do código. Enquanto o Biome se concentra na aparência do código, o ESLint analisa seu comportamento. As ferramentas se complementam: o Biome cuida da formatação, e o ESLint verifica se o código segue as boas práticas e está livre de erros comuns.

Biome e ESLint são ferramentas úteis no conjunto de recursos de quem desenvolve em JavaScript. Cada uma tem um papel importante na manutenção da qualidade e da formatação do código, contribuindo para uma base de código mais confiável e fácil de manter.

Usando Biome em um projeto JavaScript

Biome oferece seus recursos por meio de uma ferramenta de linha de comando que realiza análise estática de código. Uma de suas principais vantagens é a possibilidade de personalização: você pode definir suas próprias regras ou usar um conjunto de regras padrão. Essa flexibilidade ajuda a aplicar padrões de programação e boas práticas em qualquer projeto JavaScript.

Veja um exemplo de como usar Biome com JavaScript:

# Install Biome as a development dependency
npm install --save-dev @biomejs/biome

Após a instalação, Biome precisará executar um script de instalação para baixar os binários necessários para sua plataforma. Em seguida, continue:

# Initialize a new Biome configuration file
npx @biomejs/biome init

Isso cria um arquivo de configuração biome.json na raiz do projeto. Depois, você pode personalizar esse arquivo para definir as regras e configurações do projeto. As configurações padrão são:

{
	"$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
	"organizeImports": {
		"enabled": true
	},
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": true
		}
	}
}

Como você pode ver, a configuração padrão não inclui regras de formatação, o que pode gerar incompatibilidades com a configuração do Prettier do seu projeto. No meu caso, o arquivo .prettierrc.js é assim:

module.exports = {
  printWidth: 100,
  tabWidth: 2,
  singleQuote: true,
  semi: false,
  trailingComma: 'none',
  useTabs: false,
  bracketSpacing: false
}

Para deixar Biome o mais compatível possível com as regras de formatação de código do Prettier acima, você pode adicionar o seguinte ao arquivo biome.json:

{
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100,
    "quoteStyle": "single",
    "trailingComma": "none",
    "semicolons": "asNeeded",
    "bracketSpacing": true,
    "arrowParentheses": "asNeeded"
  }
}

Agora podemos executar o formatador do Biome na nossa base de código:

npx @biomejs/biome format ./src

Isso resulta em apenas uma regra de formatação própria do Biome, que não pode ser configurada e diz respeito ao espaçamento entre funções:

./src/Utils.js format ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Formatter would have printed the following content:

     2  2 │
     3  3 │   module.exports = {
     4    │ - ··parseUrl:·function(urlToScan)·{
        4 │ + ··parseUrl:·function·(urlToScan)·{
     5  5 │       if (urlToScan === undefined) return urlToScan
     6  6 │
    ····· │
    12 12 │       return urlToScan
    13 13 │     },
    14    │ - ··trimUtmParams:·function(urlToTrim)·{
       14 │ + ··trimUtmParams:·function·(urlToTrim)·{

Outra opção é abandonar completamente a configuração do Prettier e usar as regras de formatação do Biome.

Combinando formatação e análise estática com Biome

Biome também oferece um analisador estático que pode ser usado para aplicar regras de qualidade de código e considerado uma alternativa ao ESLint. Ele pode ser configurado para aplicar um conjunto de regras padrão ou regras personalizadas definidas no arquivo de configuração biome.json.

Para executar o analisador do Biome, usaremos o comando biome check para verificar se há violações das regras definidas no conjunto recomendado padrão de regras do arquivo biome.json.

# Run Biome on your code
npx @biomejs/biome check ./src

No meu repositório de código, ao tentar executar Biome, obtive o seguinte resultado:

./src/Audit.js:30:7 lint/complexity/useOptionalChain  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Change to an optional chain.

    29 │     if (
  > 30 │       vulnerableAudit.details &&
       │       ^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 31 │       vulnerableAudit.details.items &&
       │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    32 │       vulnerableAudit.details.items.length > 0
    33 │     ) {

  ℹ Unsafe fix: Change to an optional chain.

     28  28 │
     29  29 │       if (
     30     │ - ······vulnerableAudit.details·&&
     31     │ - ······vulnerableAudit.details.items·&&
         30 │ + ······vulnerableAudit.details?.items·&&
     32  31 │         vulnerableAudit.details.items.length > 0
     33  32 │       ) {

./src/RenderJson.js:27:7 lint/complexity/noForEach ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Prefer for...of instead of forEach.

    25 │       vulnerabilitiesResults.details.items.length > 0
    26 │     ) {
  > 27 │       vulnerabilitiesResults.details.items.forEach(vulnItem => {
       │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 28 │         vulnerabilitiesCount += vulnItem.vulnCount
  > 29 │         const vulnInfo = this.formatVulnerability(vulnItem)
  > 30 │         vulnerabilities.push(vulnInfo)
  > 31 │       })
       │       ^^
    32 │     }
    33 │

  ℹ forEach may lead to performance issues when working with large arrays. When combined with functions like filter or map, this causes multiple iterations over the same type.

The number of diagnostics exceeds the number allowed by Biome.
Diagnostics not shown: 15.
Checked 4 file(s) in 3ms
Found 35 error(s)
check ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Some errors were emitted while running checks.

Como você pode ver, há vários desvios em relação às configurações do ESLint e do Prettier que já uso. Você terá que decidir se prefere usar o analisador e as regras de formatação opinativas do Biome ou adaptar ao máximo a configuração existente com o conjunto de regras e opções da ferramenta.

Os comandos biome ci e biome explain

O comando biome ci é útil em um ambiente de integração contínua (CI). Quando executado, ele verifica se há violações das regras definidas no arquivo de configuração biome.json. Se encontrar alguma violação, retorna um código de status diferente de zero, indicando uma falha.

Veja um exemplo de uso do comando biome ci:

# Check your code using biome ci
npx @biomejs/biome ci ./src

Já o comando biome explain fornece informações detalhadas sobre uma regra específica. Ele explica por que a regra é importante e como as violações podem afetar a qualidade do código. Também exibe um trecho de código para mostrar a regra em ação.

Por exemplo, para entender a regra 'useArrowFunction', você executaria o seguinte comando:

# Understand a specific rule
npx @biomejs/biome explain useArrowFunction

O comando exibe no console um documento Markdown que explica a regra em detalhes.

# useArrowFunction

Fix is Safe.

This rule is recommended.

# Description
Use arrow functions over function expressions.

An arrow function expression is a compact alternative to a regular function expression,
with an important distinction:

this is not bound to the arrow function. It inherits this from its parent scope.

This rule proposes turning all function expressions that are not generators (function) and don't use this into arrow functions.

## Examples

### Invalid

const z = function() {
return 0;
}

const delegatedFetch = async function(url) {
return await fetch(url);
}

const f = function() {
return this.prop;
}

Named function expressions are ignored:

const z = function z() {
return 0;
}

Function expressions that declare the type of `this` are  also ignored:

const z = function(this: A): number {
return 0;
}

Usando Biome no VS Code

Para quem usa o Visual Studio Code (VS Code), Biome oferece uma extensão dedicada que leva todos os recursos da ferramenta diretamente ao seu IDE. A extensão oferece análise estática em tempo real, formatação automática e muito mais.

Para usar Biome no VS Code, siga estas etapas:

1. Instale a extensão Biome pelo marketplace do VS Code.

2. Abra a Paleta de Comandos (Exibir ou Ctrl/⌘+⇧+P), selecione Format Document With, depois Configure Default Formatter e, por fim, Biome.

Biome e o projeto Node.js

Uma novidade recente e significativa na base de código do projeto Node.js é o pull request aberto por Yagiz Nizipli, que propõe adotar Biome como formatador de código padrão.

Integrar Biome à base de código do projeto Node.js é um grande passo para garantir a consistência da formatação. Em uma base de código tão grande quanto a do Node.js, o desempenho em tempo de execução do formatador e do analisador de qualidade do código é essencial para dar aos colaboradores um ciclo rápido de feedback.

Conclusão

Isso significa que ESLint e Prettier vão desaparecer? De jeito nenhum. ESLint continua sendo uma ferramenta poderosa para manter a qualidade do código: é fácil estendê-lo com regras personalizadas e ele é muito usado em projetos de todo o ecossistema. Prettier também continua sendo uma opção popular para formatação de código. Ainda assim, Biome vem se firmando como uma alternativa mais rápida ao Prettier e um analisador de qualidade do código que pode substituir o ESLint.

Adote práticas de programação segura

Não deixe de conferir os recursos do Snyk Learn para ajudar você a escrever código seguro e de alta qualidade.

Se você valoriza a análise estática de código para formatação e verificação, a extensão do Snyk para VS Code pode ser muito útil para oferecer feedback em tempo real sobre vulnerabilidades de segurança no código e em componentes open source. Para aprofundar seus conhecimentos e aprimorar suas práticas de programação segura, inscreva-se na Snyk. A plataforma é dedicada à segurança com foco em desenvolvedores e oferece muitos recursos para ajudar você a escrever código seguro e de alta qualidade.