Biome

**Biome is a [fast formatter](https://github.com/biomejs/biome/tree/main/benchmark#formatting)** for _JavaScript_,
_TypeScript_, _JSX_, _TSX_, _JSON_, _HTML_, _CSS_ and _GraphQL_ that scores **[97% compatibility with
_Prettier_](https://console.algora.io/challenges/prettier)**, **saving CI and developer time**.

Biome can even **format malformed code** as you write it in [your favorite editor](/guides/editors/first-party-extensions/).

<div class="linter format">
    <div class="inp">
        <span>CODE</span>
        <Inputf/>
    </div>
    <div class="out">
        <span>OUTPUT</span>
        <Outputf/>
    </div>
    <div class="perf-out">
        <span>PERFORMANCE</span>
        <div class="bench-comp">
            <div class="bench">
                <div>
                    <ProgressBarContainer
                        client:visible
                        data={[
                            {duration: 0.41, label: "Biome", color: "MediumSeaGreen"},
                            {duration: 14.35, label: "Prettier", color: "IndianRed"}
                        ]}
                    />
                </div>
            </div>
            <div class="perf-comp">
                <div class="comp">~35x</div>
                <div class="comp-des">
                    Faster than Prettier when formatting 171,127 lines of code in 2,104 files with an Intel Core i7
                    1270P.
                </div>
            </div>
        </div>
    </div>
</div>

Try the Biome formatter on the [playground](/playground/) or directly on your project:

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

**Biome is a [performant linter](https://github.com/biomejs/biome/tree/main/benchmark#linting)** for _JavaScript_,
_TypeScript_, _JSX_, _CSS_ and _GraphQL_ that features **[<NumberOfRules/> rules](/linter/)** from ESLint,
TypeScript ESLint, and [other sources](/linter/rules-sources/).

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

<LinterExample/>

Try the Biome linter on the [playground](/playground/) or directly on your project:

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

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:

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

<CardGrid>
    <Card title="Fast" icon="rocket">
        Built with Rust and an innovative architecture inspired by rust-analyzer.
    </Card>
    <Card title="Simple" icon="pencil">
        Zero configuration needed to get started. Extensive options available for
        when you need them.
    </Card>
    <Card title="Scalable" icon="random">
        Designed to handle codebases of any size. Focus on growing product instead
        of your tools.
    </Card>
    <Card title="Actionable & Informative" icon="information">
        Avoid obscure error messages, when we tell you something is wrong, we tell
        you exactly where the problem is and how to fix it.
    </Card>
    <Card title="Batteries Included" icon="add-document">
        Out of the box support for all the language features you use today. First
        class support for TypeScript and JSX.
    </Card>
    <Card title="Enterprise Support" icon="phone">
        We offer <a href="/enterprise/">commercial support</a> to organizations that
        need it through our community of contributors.
    </Card>
</CardGrid>

    <div class="extension-img"></div>

</div>