One toolchain for your web project

Format code like Prettier, save time

Biome is a fast formatter for JavaScript, TypeScript, JSX, TSX, JSON, HTML, CSS and GraphQL that scores 97% compatibility with Prettier (see known limitations), saving CI and developer time.

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

1
functionHelloWorld({greeting="hello",greeted='"World"',silent=false,onMouseOver,}) {
2
3
if(!greeting){returnnull};
4
5
// TODO: Don't use random in render
6
let num = Math.floor(Math.random() * 1E+7).toString().replace(/.d+/ig,"")
7
8
return<divclassName='HelloWorld'title={`You are visitor number ${num}`}onMouseOver={onMouseOver}>
9
10
<strong>{greeting.slice( 0,1 ).toUpperCase() +greeting.slice(1).toLowerCase() }</strong>
11
{greeting.endsWith(",") ?"":<spanstyle={{color: 'grey'}}>", "</span>}
12
<em>
13
{greeted}
14
</em>
15
{ (silent)
16
?"."
17
:"!"}
18
19
</div>;
20
}

1
functionHelloWorld({
2
greeting="hello",
3
greeted='"World"',
4
silent=false,
5
onMouseOver,
6
}) {
7
if (!greeting) {
8
returnnull;
9
}
10
11
// TODO: Don't use random in render
12
let num = Math.floor(Math.random() * 1E+7)
13
.toString()
14
.replace(/.d+/gi,"");
15
16
return (
17
<div
18
className="HelloWorld"
19
title={`You are visitor number ${num}`}
20
onMouseOver={onMouseOver}
21
>
22
<strong>
23
{greeting.slice(0,1).toUpperCase() +greeting.slice(1).toLowerCase()}
24
</strong>
25
{greeting.endsWith(",") ? (
26
""
27
) : (
28
<spanstyle={{ color: "grey" }}>", "</span>
29
)}
30
<em>{greeted}</em>
31
{silent?".":"!"}
32
</div>
33
);
34
}

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

1
npmi-D--save-exact@biomejs/biome
2
npx@biomejs/biomeformat--write./src

Fix problems, learn best practice

Biome is a performant linter for JavaScript, TypeScript, JSX, CSS and GraphQL that features 514 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().11 │  const array = ["split", "the text", "into words"];
2 │ -array.map(sentence·=>·sentence.split('·')).flat();2 │ +array.flatMap(sentence·=>·sentence.split('·'));33 │ 

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

1
npmi-D--save-exact@biomejs/biome
2
npx@biomejs/biomelint--write./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:

1
npmi-D--save-exact@biomejs/biome
2
npx@biomejs/biomecheck--write./src