Una herramienta para tu proyecto web

Formatear el código como Prettier y ahorra tiempo

Biome es un formateador rápido para JavaScript, TypeScript, JSX, TSX, JSON, CSS y GraphQL que marca 97% compatibilidad con Prettier, ahorrando tiempo para desarrolladores y para el CI.

Biome puede incluso formatear código malformado mientras lo escribes en tu 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>;
}

SALIDA

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>
  );
}

RENDIMIENTO

Biome

0.00s

Prettier

0.00s

~35x

Más rápido que Prettier al formatear 171,127 líneas de código en 2,104 archivos con un Intel Core i7 1270P.

Prueba el formateador de Biome en playground o directanmente en tu proyecto:

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

Corrije problemas y aprende las mejores prácticas

Biome es un linter de alto rendimiento para JavaScript, TypeScript, JSX, CSS y GraphQL que cuenta con 293 reglas de ESLint, TypeScript ESLint, y otras fuentes.

Biome produce diagnósticos detallados y contextualizados que te ayudaran a mejorar tu código y a convertirte en un mejor programador!

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 │   

Prueba el Biome linter en el playground o directamente en tu proyecto:

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

Todo a la vez

No sólo puedes formatear y analizar tu codigo por separado, sino que puedes hacerlo todo a la vez con un solo comando!

Cada herramienta se integra perfectamente con las demás para crear una cadena de herramientas cohesionada para proyectos web.

Ejecuta todas las herramientas con el comando check:

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

Rápido

Construido con Rust y una arquitectura innovadora inspirada en rust-analyzer.

Sencillo

No es necesario realizar ninguna configuración para empezar. Hay muchas opciones disponibles para cuando las necesites.

Escalable

Diseñado para gestionar bases de código de cualquier tamaño. Enfocate en el crecimiento de tu proyecto, y no de tus herramientas.

Práctico e Informativo

Evita los mensajes de error oscuros, cuando te decimos que algo va mal, te decimos exactamente dónde está el problema y cómo solucionarlo.

Pilas Incluidas

Compatibilidad inmediata con todas las funciones lingüísticas que se utilizan hoy en día. Compatibilidad de primera clase para TypeScript y JSX.

Apoyo Empresarial

Ofrecemos asistencia comercial para organizaciones que lo necesitan a través de nuestra comunidad de colaboradores.

Prueba Biome

Instala Biome utilizando tú gestor de paquetes preferido E integralo en tú editor.

Instala con un gestor de paquetes

Integra Biome en tú editor

Comunidad

Impulsado por nuestros colaboradores de código abierto

Discord

GitHub

BlueSky

Mastodon

Patrocinadores