One toolchain for your web project

Format code like Prettier, save time

Biome is a fast formatter for JavaScript, TypeScript, JSX, and JSON that scores 97% compatibility with Prettier, saving CI and developer time.

Biome can even format malformed code as you write it in your favorite editor.

CODE

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

OUTPUT

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

Faster than Prettier when formatting 171,127 lines of code in 2,104 files with an Intel Core i7 1270P.

Try the Biome formatter on the playground or directly on your project:

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

Fix problems, learn best practice

Biome is a performant linter for JavaScript, TypeScript, and JSX that features more than 200 rules from ESLint, typescript-eslint, and other sources.

Biome outputs detailed and contextualized diagnostics that help you to improve your code and become a better programmer!

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 │   

Try the Biome linter on the playground or directly on your project:

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

Everything all at once

Not only can you format and lint your code separately, you can do it all at once with a single command!

Every tool integrates seamlessly with others to create a cohesive toolchain for web projects.

Run all tools with the check command:

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

Fast

Built with Rust and an innovative architecture inspired by rust-analyzer.

Simple

Zero configuration needed to get started. Extensive options available for when you need them.

Scalable

Designed to handle codebases of any size. Focus on growing product instead of your tools.

Optimized

With tight internal integration we are able to reuse previous work and any improvement to one tool improves them all.

Actionable & Informative

Avoid obscure error messages, when we tell you something is wrong, we tell you exactly where the problem is and how to fix it.

Batteries Included

Out of the box support for all the language features you use today. First class support for TypeScript and JSX.

Try Biome

Install Biome using your preferred package manager AND integrate it in your editor.

Install with package manager

Integrate Biome in your editor

Community

Powered by our open-source contributors

Discord

GitHub

Twitter

Mastodon

Sponsors