Biome: a blazing-fast formatter with high Prettier compatibility

Sina Ghadimi — Mon, 07 Sep 2026 10:18:39 +0000

Biome (officially @biomejs/biome) is a high-performance toolchain for web projects. Built in Rust, it combines a blazing-fast formatter with high Prettier compatibility and a powerful linter with 500+ lint rules drawn from ESLint, typescript-eslint, and more—all in a single toolchain and CLI. It supports JavaScript, TypeScript, JSX/TSX, JSON/JSONC, CSS, GraphQL, HTML, Vue, Svelte, Astro, and more.

Key advantages:

Extremely fast (thanks to its Rust-based implementation)
Single tool for formatting + linting + import organization
Excellent error recovery and detailed diagnostics
First-class Language Server Protocol (LSP) support
Type-aware linting in v2+ without requiring the TypeScript compiler
Zero-config defaults that work out of the box, with extensive configuration options when needed

Quick Project Setup

First, install Biome as a development dependency in your project. using commands below:
i am using pnpm you can use npm or yarn or bun or deno

pnpm add -D -E @biomejs/biome

Initialize a config file:

pnpx @biomejs/biome init

Usage:

you can use it either by command line interfaces or extensions in your favorite Code Editor or IDE:

Command-line Interfaces

# Format all files
pnpx @biomejs/biome format --write

# Format specific files
pnpx @biomejs/biome format --write <files>

# Lint and apply safe fixes to all files
pnpx @biomejs/biome lint --write

# Lint files and apply safe fixes to specific files
pnpx @biomejs/biome lint --write <files>

# Format, lint, and organize imports of all files
pnpx @biomejs/biome check --write

# Format, lint, and organize imports of specific files
pnpx @biomejs/biome check --write <files>

VS Code Setup

1- Install the official extension

Search for “Biome” by biomejs in the Extensions view, or install from the Visual Studio Marketplace (or Open VSX for VSCodium/Cursor).

2- Set Biome as the default formatter

Open a supported file → Command Palette (Ctrl/Cmd + Shift + P) → “Format Document With…” → “Configure Default Formatter…” → choose Biome.Or add to your settings.json

{
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[css]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

3- Enable format on save + safe fixes + import organization

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

4- Useful extension settings (optional)

biome.requireConfiguration: true → only activate when a biome.json exists
biome.configurationPath: path to a custom config
biome.lsp.bin: override the Biome binary path
biome.inlineConfig: override rules locally without changing the project config

The extension automatically discovers the local @biomejs/biome installation from node_modules.

Zed Editor Setup

Zed has excellent first-party Biome support (requires Zed ≥ 0.131.0).

1- Install the extension

Open the command palette → zed: extensions → search for Biome and install it.

2- Configure formatting and code actions

Add to your user settings (~/.config/zed/settings.json) or project settings (.zed/settings.json):

{
  "languages": {
    "JavaScript": {
      "formatter": { "language_server": { "name": "biome" } },
      "code_actions_on_format": {
        "source.fixAll.biome": true,
        "source.organizeImports.biome": true
      }
    },
    "TypeScript": {
      "formatter": { "language_server": { "name": "biome" } },
      "code_actions_on_format": {
        "source.fixAll.biome": true,
        "source.organizeImports.biome": true
      }
    },
    "TSX": {
      "formatter": { "language_server": { "name": "biome" } },
      "code_actions_on_format": {
        "source.fixAll.biome": true,
        "source.organizeImports.biome": true
      }
    },
    "JSX": {
      "formatter": { "language_server": { "name": "biome" } },
      "code_actions_on_format": {
        "source.fixAll.biome": true,
        "source.organizeImports.biome": true
      }
    },
    "JSON": {
      "formatter": { "language_server": { "name": "biome" } }
    },
    "JSONC": {
      "formatter": { "language_server": { "name": "biome" } }
    },
    "CSS": {
      "formatter": { "language_server": { "name": "biome" } }
    },
    "GraphQL": {
      "formatter": { "language_server": { "name": "biome" } }
    },
    "HTML": {
      "formatter": { "language_server": { "name": "biome" } }
    },
    "Vue.js": {
      "formatter": { "language_server": { "name": "biome" } }
    },
    "Svelte": {
      "formatter": { "language_server": { "name": "biome" } }
    },
    "Astro": {
      "formatter": { "language_server": { "name": "biome" } }
    }
  }
}

The Biome extension supports using a project-local Biome installation and configuring a custom Biome binary when needed.

Tips for a Smooth Experience

Prefer a project-local biome.json so the whole team shares the same rules.
In CI, run biome ci (it fails on issues instead of writing fixes).
Disable conflicting formatters/linters (Prettier, ESLint) to avoid fights.
Biome works great in monorepos and supports nested configuration files (with "root": false on nested ones).

Conclusion

Biome replaces the classic Prettier + ESLint combination with a single, extremely fast, well-integrated tool. With official first-party extensions for both VS Code and Zed, you get format-on-save, quick fixes, import organization, and rich diagnostics with almost zero friction.
Give it a try on your next project — most teams never look back.

Useful links
Official site: https://biomejs.dev
Getting Started: https://biomejs.dev/guides/getting-started/
VS Code docs: https://biomejs.dev/reference/vscode
Zed docs: https://biomejs.dev/reference/zed