Hosted onseed.hyper.mediavia theHypermedia Protocol

Develop Seed Hypermedia

Develop Seed Hypermedia

>Notes>Prettier to Biome: Migration Research
Prettier to Biome: Migration Research

horacio

4 February 2026, 10:56
3

Current Setup

Config: single .prettierrc in frontend/ with semi: false, singleQuote: true, trailingComma: "all", bracketSpacing: false, TailwindCSS plugin.

Scripts: pnpm -r run format:check / format:write across all workspaces.

What Biome Replaces

Biome is a single Rust binary that replaces both Prettier and ESLint:

  • Formatter: 97%+ compatible with Prettier output

  • Linter: 434 rules, covers equivalents of eslint-plugin-react-hooks, eslint-plugin-react-refresh, typescript-eslint, and more

  • Import organizer: handles sorting, deduplication, blank-line-separated groups

Benefits

Performance

  • Written in Rust, orders of magnitude faster than Prettier + ESLint

  • No Node.js runtime needed for the core binary

  • Parallel file processing out of the box

Single Tool

  • Replaces Prettier + ESLint + import sorting with one dependency

  • One config file (biome.json) instead of .prettierrc + eslint.config.js + .prettierignore

  • Single CLI: biome check --fix handles formatting + linting + import sorting

Monorepo Support (v2)

  • Nested config files with "root": false or "extends": "//"

  • Eliminates complex relative path configs across workspaces

Type-Aware Linting (v2)

  • Type-aware rules without requiring the TypeScript compiler

  • Multi-file analysis with opt-in performance controls

  • noFloatingPromises detects ~75% of cases vs typescript-eslint at a fraction of the cost

Better Error Handling

  • Stricter parser rejects invalid syntax (duplicate modifiers, assignment to optional chains, etc.)

  • Prettier silently formats invalid code; Biome surfaces errors

CI/DX

  • Faster CI runs (formatting + linting in one pass)

  • Better editor integration (single LSP server)

  • biome migrate prettier and biome migrate eslint automate config conversion

Risks & Blockers

Tailwind CSS Class Sorting (BLOCKER)

The project uses prettier-plugin-tailwindcss. Biome's equivalent (useSortedClasses) is experimental/unstable (nursery group) with significant limitations:

This is the single biggest blocker. If the project relies on custom Tailwind config or screen variant sorting, Biome cannot match Prettier's plugin today.

Formatting Differences

Minor intentional divergences from Prettier:

  1. Object property unquoting: Biome unquotes ES2015+ identifiers, Prettier only ES5

  2. Arrow function type params: <T = unknown>() vs <T = unknown,>()

  3. Assignment in computed keys: Biome is more consistent with parentheses

  4. Parenthesized non-null assertions: Biome normalizes differently

These are cosmetic and would cause a one-time diff across the codebase but aren't functionally concerning.

Language Support Gaps

If Prettier is used for Markdown or YAML files, Biome can't replace it for those.

Plugin Ecosystem

Biome v2 has initial plugin support but the ecosystem is much smaller than Prettier/ESLint. If other Prettier plugins are needed in the future, this could be limiting.

Migration Effort

Automated Steps

# Install biome
pnpm add -D @biomejs/biome

# Auto-convert prettier config
npx @biomejs/biome migrate prettier

# Auto-convert eslint config
npx @biomejs/biome migrate eslint

# Format entire codebase (one-time diff)
npx @biomejs/biome check --fix

Manual Steps

  1. Create biome.json (or review auto-generated one)

  2. Update all package.json scripts (format:check / format:write -> biome check / biome check --fix)

  3. Remove Prettier and ESLint dependencies

  4. Update CI pipelines

  5. Update editor configs (.vscode/settings.json, etc.)

  6. Handle Tailwind class sorting gap (keep prettier-plugin-tailwindcss as secondary tool or accept Biome's limitations)

  7. One-time commit with formatting diff across codebase

Recommendation

Wait, but prepare.

The Tailwind CSS class sorting gap is the primary reason to wait. The useSortedClasses rule is still in nursery/experimental status and lacks custom config support, screen variant sorting, and safe auto-fix. Since this project actively uses prettier-plugin-tailwindcss, switching now would mean either:

  1. Losing Tailwind class sorting entirely

  2. Running both Biome (formatting) + Prettier (only for Tailwind sorting) -- defeating the "single tool" benefit

  3. Using the experimental rule and accepting its limitations

When to switch: Once useSortedClasses reaches stable status with Tailwind config file support, Biome becomes a clear upgrade. Track biomejs/biome#1274.

What to do now:

  • Pin this research for re-evaluation when Biome's Tailwind support matures

  • If the project's Tailwind usage is simple (no custom config, no screen variants), a trial migration could work today

  • Consider adopting Biome's linter alongside Prettier as an intermediate step -- replace ESLint with biome lint while keeping Prettier for formatting

Sources

Do you like what you are reading? Subscribe to receive updates.

Unsubscribe anytime

Powered by Seed Hypermedia