---
title: "Biome"
description: "Biome is a fast formatter and linter that replaces ESLint and Prettier with a single fast and unified tool."
date: "2025-10-02"
lastUpdated: "2026-03-28"
tags: ["biome","eslint","prettier","frontend"]
canonical: "/learn/guides/project/biome"
---

import { Code } from '@astrojs/starlight/components'
import Source from './biome.json?raw'
import { Aside } from '@astrojs/starlight/components'
import PackageManagers from '~/components/PackageManagers.astro'

Biome is a replacement for ESLint and Prettier that is designed to be more
flexible and easier to configure.

## Installation

<PackageManagers pkg="@biomejs/biome" dev />

## Biome Configuration

Here is a basic configuration for Biome:

<Code code={Source} lang="json" title="biome.json" wrap />

Along with VS Code configuration:

```json
{
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.fixAll.biome": "explicit",
    "source.addMissingImports.ts": "explicit",
    "source.organizeImports.biome": "explicit"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[css]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.stylelint": "explicit"
    }
  }
}
```

<Aside type="caution">
  **NOTE**: At this time (`2025-10-03`), Biome (`v2.2.5`) does not support
  formatting HTML. In order to format HTML, you should still use Prettier.
</Aside>