Um conjunto de ferramentas para seu projeto web

Formata código como o Prettier e economiza tempo

Biome é um formatador rápido para JavaScript, TypeScript, JSX, JSON, CSS e GraphQL que atinge 97% de compatibilidade com o Prettier, economizando tempo para o desenvolvedor e para o CI.

O Biome pode até formatar código malformado enquanto você programa no seu editor favorito.

CÓDIGO

function HelloWorld({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,}) {

  if(!greeting){return null};

      // TODO: Don't use random in render
  let num = Math.floor (Math.random() * 1E+7).toString().replace(/.d+/ig, "")

  return <div className='HelloWorld' title={`You are visitor number ${ num }`} onMouseOver={onMouseOver}>

    <strong>{ greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }</strong>
    {greeting.endsWith(",") ? " " : <span style={{color: 'grey'}}>", "</span> }
    <em>
  { greeted }
    </em>
    { (silent)
      ? "."
      : "!"}

    </div>;
}

SAÍDA

function HelloWorld({
  greeting = "hello",
  greeted = '"World"',
  silent = false,
  onMouseOver,
}) {
  if (!greeting) {
    return null;
  }

  // TODO: Don't use random in render
  let num = Math.floor(Math.random() * 1E+7)
    .toString()
    .replace(/.d+/gi, "");

  return (
    <div
      className="HelloWorld"
      title={`You are visitor number ${num}`}
      onMouseOver={onMouseOver}
    >
      <strong>
        {greeting.slice(0, 1).toUpperCase() + greeting.slice(1).toLowerCase()}
      </strong>
      {greeting.endsWith(",") ? (
        " "
      ) : (
        <span style={{ color: "grey" }}>", "</span>
      )}
      <em>{greeted}</em>
      {silent ? "." : "!"}
    </div>
  );
}

PERFORMANCE

Biome

0.00s

Prettier

0.00s

~35x

Mais rápido que o Prettier quando formata 171,217 linhas de código em 2,104 arquivos com um Intel Core i7 1270P.

Teste o formatador do Biome no playground ou diretamente no seu projeto:

npm i -D --save-exact @biomejs/biome
npx @biomejs/biome format --write ./src

Corrija problemas e aprenda boas práticas

O Biome é um linter performático para JavaScript, TypeScript, JSX, CSS e GraphQL que possui mais de 200 regras do ESLint, typescript-eslint, e de outras fontes.

O Biome retorna diagnósticos detalhados e contextualizados que ajuda a melhorar seu código e ajuda você a se tornar um programador melhor!

complexity/useFlatMap.js:2:1 lint/complexity/useFlatMap  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The call chain .map().flat() can be replaced with a single .flatMap() call.

    1 │ const array = ["split", "the text", "into words"];
  > 2 │ array.map(sentence => sentence.split(' ')).flat();
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 │ 

  ℹ Safe fix: Replace the chain with .flatMap().

    1 1 │   const array = ["split", "the text", "into words"];
    2   │ - array.map(sentence·=>·sentence.split('·')).flat();
      2 │ + array.flatMap(sentence·=>·sentence.split('·'));
    3 3 │   

Teste o linter do Biome no playground ou diretamente no seu projeto:

npm i -D --save-exact @biomejs/biome
npx @biomejs/biome lint --write ./src

Tudo de uma vez

Não só como você pode formatar e analisar erros no seu código separadamente, você pode fazer tudo isso com um comando!

Cada ferramenta integra suavemente com as outras para criar um conjunto de ferramentas coesivo para projetos web.

Rode todas as ferramentas com o comando check

npm i -D --save-exact @biomejs/biome
npx @biomejs/biome check --write ./src

Rápido

Construído com Rust e uma arquitetura inovadora inspirado pelo rust-analyzer.

Simples

Nenhuma configuração necessária para começar. Opções extensivas disponíveis quando você precisar delas.

Escalável

Projetado para suportar codebases de qualquer tamanho. Focado no crescimento do projeto, em vez de suas ferramentas.

Otimizado

Com uma integração interna eficiente, conseguimos reutilizar trabalhos anteriores, e qualquer melhoria em uma ferramenta beneficia todas elas.

Prático e informativo

Evite mensagens de erro obscuras; quando dizemos que algo está errado, informamos exatamente onde o problema está e como corrigi-lo.

Pacote completo

Suporte pronto para todas as funcionalidades de linguagem que você utiliza atualmente. Suporte de primeira classe para TypeScript e JSX.

Experimente o Biome

Instale o Biome utilizando o seu gerenciador de pacotes favorito e integre ele no seu editor.

Instale com um gerenciador de pacotes

Integre o Biome no seu editor

Comunidade

Desenvolvido pela nossa incrível comunidade

Discord

GitHub

Twitter

Mastodon

Patrocinadores