Docs · Tooling

Biome

One tool for linting, formatting and import sorting.

Biome 2.4 replaces ESLint and Prettier: one fast tool that lints, formats and sorts imports for TypeScript, JSX, JSON and CSS.

Install

Pick Biome as the linter in create-next-app, or add it by hand. Pin the exact version so everyone formats the same way:

$pnpm add -D -E @biomejs/biome

Configuration

biome.json

{  "$schema": "https://biomejs.dev/schemas/2.4.2/schema.json",  "vcs": {    "enabled": true,    "clientKind": "git",    "useIgnoreFile": true  },  "files": {    "ignoreUnknown": true,    "includes": ["**", "!node_modules", "!.next", "!dist", "!build"]  },  "formatter": {    "enabled": true,    "indentStyle": "space",    "indentWidth": 2  },  "css": {    "parser": {      "tailwindDirectives": true    }  },  "linter": {    "enabled": true,    "rules": {      "recommended": true    },    "domains": {      "next": "recommended",      "react": "recommended"    }  },  "assist": {    "actions": {      "source": {        "organizeImports": "on"      }    }  }}

vcs.useIgnoreFile skips everything in .gitignore.
The next and react domains add rules for Next.js and hooks.
css.parser.tailwindDirectives lets Biome read Tailwind's @theme and @utility.
organizeImports sorts imports when you format.

Commands

Script	Runs	Does
`lint`	`biome check`	Lint, format check and import order. Fails on problems.
`format`	`biome format --write`	Formats files in place.
—	`biome check --write`	Applies every safe fix and formats.

$pnpm lint

Silencing a rule

When a rule is wrong for one line, suppress it right there and say why. A suppression without a reason, or one that no longer matches anything, is itself reported.

layout.tsx

{/* biome-ignore lint/security/noDangerouslySetInnerHtml: static script, no user input. */}<script dangerouslySetInnerHTML={{ __html: HEAD_SCRIPT }} />

Editor

Install the Biome extension for VS Code or your editor and set it as the default formatter, with format on save. See biomejs.dev.