Hosted onhyperacademia.hyper.mediavia theHypermedia Protocol

    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:

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

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

          Assignment in computed keys: Biome is more consistent with parentheses

          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

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

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

        Remove Prettier and ESLint dependencies

        Update CI pipelines

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

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

        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:

          Losing Tailwind class sorting entirely

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

          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