[M0] Biome Migration: Replace ESLint+Prettier

[miccy]

Goal

Adopce Biome jako jediného nástroje pro linting a formatting.

Tasks

• Vytvořit biome.json
• Upravit package.json skripty (lint, format -> biome check)
• Remove ESLint/Prettier dependencies a config file
• Run biome check --write (one-time format)

Acceptance Criteria

• pnpm lint volá Biome
• pnpm format volá Biome
• Žádné ESLint/Prettier soubory v repu
• CI pipeline používá Biome

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

✅ Successfully generated implementation plan.

💡 Use @coderabbitai <feedback> to replan

Examples

• Example 1
• Example 2

---

🔗 Similar Issues

Related Issues

• [M1] Bun-first workflow adoption #11

👤 Suggested Assignees

• miccy

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord or schedule a call!

[coderabbitai]

Coding Plan

Approach

Replace ESLint and Prettier with Biome as the single linting and formatting tool across the monorepo, updating all scripts, removing obsolete configurations, and integrating Biome into the CI pipeline.

Observations

This is a pnpm monorepo using workspaces across apps/, packages/, and examples/* directories. The root package.json currently maintains three separate linting/formatting tools (ESLint, Prettier, and Biome) coordinated through a verify script. biome.json already exists with linter enabled and formatter disabled, excluding apps/web and examples from checks. No turbo.json pipeline tasks exist for lint/format. Individual workspace packages have minimal lint/format scripts, and the CI pipeline (.github/workflows/ci.yaml) currently has no linting/formatting steps.

Assumptions

Assumption 1: Examples directory linting approach

Options Considered:

• Keep all example-specific linting tools and configurations unchanged
• Remove all ESLint configurations from examples to align with the monorepo-wide Biome adoption
• Remove only standalone ESLint setups while preserving framework-specific wrappers (expo lint, next lint)

Chosen Option: Remove only standalone ESLint setups while preserving framework-specific wrappers (expo lint, next lint)

Rationale: Preserve framework-specific linting tools (expo lint, next lint) as they're integral framework features that developers expect, but remove standalone ESLint configurations and dependencies from examples since they fall outside Biome's scope. This balances consistency with practical framework requirements.

Assumption 2: Handling ignore patterns

Options Considered:

• Migrate all patterns to biome.json files.ignore
• Review and selectively migrate only relevant patterns
• Let Biome's default ignores handle everything

Chosen Option: Migrate all patterns to biome.json files.ignore

Rationale: Migrate all .prettierignore patterns to biome.json's files.ignore field, as these patterns reflect important project-specific exclusions for generated documentation and special files that should be preserved regardless of the tool used.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Configure Biome and Update Root-Level Tooling

Update the root-level configuration to make Biome the single linting and formatting tool, removing all ESLint and Prettier references.

Task 1: Enhance biome.json Configuration

Complete the Biome configuration to replace both ESLint and Prettier functionality.

• Enable formatter in biome.json (currently disabled) with appropriate JavaScript/TypeScript formatting rules
• Add files.ignore array with the 7 patterns from .prettierignore (pnpm-lock.yaml, generated API docs paths, and PublicKysely.ts)
• Review and merge any necessary ignore patterns from eslint.config.mjs (e.g., .next/, .svelte-kit/, .turbo/, dist/) into files.ignore
• Verify linter rules align with the project's code quality standards previously enforced by ESLint

Task 2: Update Root package.json Scripts

Replace ESLint and Prettier invocations with Biome commands.

• Change lint script from eslint to biome check (or biome lint if check covers more than needed)
• Change format script from prettier --write "**/*.{ts,tsx,js,mjs,md,mdx}" to biome format --write
• Update verify script to remove separate pnpm lint and pnpm biome calls, replacing with single pnpm lint that now invokes Biome
• Consider adding biome:fix or lint:fix script for running biome check --write to auto-fix issues

Task 3: Remove ESLint and Prettier Configuration Files

Clean up obsolete configuration files from the repository root.

• Delete eslint.config.mjs
• Delete prettier.config.mjs
• Delete .prettierignore

Task 4: Remove ESLint and Prettier Dependencies

Remove all 11 linting/formatting dependencies from root package.json devDependencies.

• Remove @eslint/js, @typescript-eslint/parser, eslint, eslint-plugin-jsdoc, eslint-plugin-react-hooks
• Remove prettier, prettier-plugin-embed, prettier-plugin-jsdoc, prettier-plugin-sql-cst, prettier-plugin-tailwindcss, typescript-eslint
• Run pnpm install to update lockfile after dependency removal

🤖 Prompt for AI agents

Configure Biome as the single linting and formatting tool by updating biome.json
and root package.json, then removing ESLint and Prettier files and dependencies.

Update biome.json:
- Enable the formatter
- Add files.ignore array with patterns from .prettierignore (pnpm-lock.yaml,
generated API docs paths, PublicKysely.ts)
- Merge ignore patterns from eslint.config.mjs (.next/, .svelte-kit/, .turbo/,
dist/)

Update root package.json scripts:
- Change lint script to use biome check
- Change format script to use biome format --write
- Update verify script to use single pnpm lint call
- Add lint:fix script for biome check --write

Remove configuration files:
- Delete eslint.config.mjs
- Delete prettier.config.mjs
- Delete .prettierignore

Remove devDependencies from root package.json:
- Remove @eslint/js, @typescript-eslint/parser, eslint, eslint-plugin-jsdoc,
eslint-plugin-react-hooks
- Remove prettier, prettier-plugin-embed, prettier-plugin-jsdoc,
prettier-plugin-sql-cst, prettier-plugin-tailwindcss, typescript-eslint

Run pnpm install to update lockfile

Phase 2: Clean Up Workspace Packages and Examples

Remove format scripts and ESLint configurations from workspace packages to centralize linting/formatting at the root level.

Task 1: Remove Format Scripts from Workspace Packages

Eliminate redundant format scripts from the 8 workspace packages that have them.

• Locate packages with format: prettier --write "src/*.{ts,tsx,md}" scripts in their package.json files
• Remove these format script entries from each workspace package's package.json
• Document in comments or README if needed that formatting should be run from root with pnpm format

Task 2: Clean Up Example Projects

Remove standalone ESLint setups from examples while preserving framework-specific tools.

• Remove ESLint dependencies from react-vite-pwa example (7 dependencies including eslint-plugin-react-hooks, @typescript-eslint/eslint-plugin, etc.)
• Remove .eslintrc.cjs from react-electron example
• Remove lint: eslint . script from react-vite-pwa package.json
• Keep lint: expo lint in react-expo (framework-specific tool)
• Keep lint: next lint and related ESLint dependencies in react-nextjs (Next.js requires these for its lint wrapper)

🤖 Prompt for AI agents

Clean up workspace packages and examples by removing redundant format scripts
and standalone ESLint configurations while preserving framework-specific tools.

Remove format scripts from workspace packages:
- Find all package.json files in packages/* with format scripts using prettier
- Remove the format script entries from each package.json

Clean up examples:
- In react-vite-pwa: Remove ESLint dependencies (eslint-plugin-react-hooks,
@typescript-eslint/eslint-plugin, etc.) and remove lint script
- In react-electron: Remove .eslintrc.cjs file
- Preserve lint: expo lint in react-expo example
- Preserve lint: next lint and ESLint dependencies in react-nextjs example

Phase 3: Update Development Environment and CI Pipeline

Integrate Biome into developer tooling and continuous integration.

Task 1: Update VSCode Settings

Configure the editor to use Biome instead of Prettier.

• Update .vscode/settings.json to change editor.defaultFormatter from esbenp.prettier-vscode to Biome's formatter extension ID
• Add VSCode extension recommendation for Biome in .vscode/extensions.json if not already present
• Consider adding editor.formatOnSave: true and editor.codeActionsOnSave settings for auto-fix behavior

Task 2: Add Biome Checks to CI Pipeline

Implement linting and formatting verification in the CI workflow.

• Add new job or step to .github/workflows/ci.yaml that runs pnpm biome check (or pnpm lint after scripts are updated)
• Place the Biome check step after dependency installation but before build steps
• Configure the step to fail the CI pipeline if linting/formatting issues are detected
• Consider adding a separate format-check step with biome format for explicit formatting verification

Task 3: Run Initial Format and Commit

Apply Biome formatting across the codebase as a one-time migration.

• Execute pnpm biome check --write (or pnpm biome format --write) from repository root to format all files according to new Biome configuration
• Review the formatting changes to ensure they're reasonable and don't introduce unintended alterations
• Commit the formatting changes as a dedicated "chore: apply Biome formatting" commit
• Run pnpm lint to verify no linting errors remain after formatting

🤖 Prompt for AI agents

Integrate Biome into development environment and CI pipeline, then apply initial
formatting.

Update VSCode configuration:
- Change editor.defaultFormatter in .vscode/settings.json to Biome's extension
ID
- Add Biome extension recommendation to .vscode/extensions.json
- Add editor.formatOnSave and editor.codeActionsOnSave settings

Update CI pipeline:
- Add Biome check step to .github/workflows/ci.yaml
- Place step after dependency installation but before build steps
- Configure step to run pnpm biome check and fail on errors

Apply formatting:
- Run pnpm biome check --write from root
- Review changes
- Commit as "chore: apply Biome formatting"
- Verify with pnpm lint

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Configure Biome as the single linting and formatting tool by updating biome.json
and root package.json, then removing ESLint and Prettier files and dependencies.

Update biome.json:
- Enable the formatter
- Add files.ignore array with patterns from .prettierignore (pnpm-lock.yaml,
generated API docs paths, PublicKysely.ts)
- Merge ignore patterns from eslint.config.mjs (.next/, .svelte-kit/, .turbo/,
dist/)

Update root package.json scripts:
- Change lint script to use biome check
- Change format script to use biome format --write
- Update verify script to use single pnpm lint call
- Add lint:fix script for biome check --write

Remove configuration files:
- Delete eslint.config.mjs
- Delete prettier.config.mjs
- Delete .prettierignore

Remove devDependencies from root package.json:
- Remove @eslint/js, @typescript-eslint/parser, eslint, eslint-plugin-jsdoc,
eslint-plugin-react-hooks
- Remove prettier, prettier-plugin-embed, prettier-plugin-jsdoc,
prettier-plugin-sql-cst, prettier-plugin-tailwindcss, typescript-eslint

Run pnpm install to update lockfile
===============================================================================

Task: 2

Clean up workspace packages and examples by removing redundant format scripts
and standalone ESLint configurations while preserving framework-specific tools.

Remove format scripts from workspace packages:
- Find all package.json files in packages/* with format scripts using prettier
- Remove the format script entries from each package.json

Clean up examples:
- In react-vite-pwa: Remove ESLint dependencies (eslint-plugin-react-hooks,
@typescript-eslint/eslint-plugin, etc.) and remove lint script
- In react-electron: Remove .eslintrc.cjs file
- Preserve lint: expo lint in react-expo example
- Preserve lint: next lint and ESLint dependencies in react-nextjs example
===============================================================================

Task: 3

Integrate Biome into development environment and CI pipeline, then apply initial
formatting.

Update VSCode configuration:
- Change editor.defaultFormatter in .vscode/settings.json to Biome's extension
ID
- Add Biome extension recommendation to .vscode/extensions.json
- Add editor.formatOnSave and editor.codeActionsOnSave settings

Update CI pipeline:
- Add Biome check step to .github/workflows/ci.yaml
- Place step after dependency installation but before build steps
- Configure step to run pnpm biome check and fail on errors

Apply formatting:
- Run pnpm biome check --write from root
- Review changes
- Commit as "chore: apply Biome formatting"
- Verify with pnpm lint

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- @coderabbitai You can skip phase 3. Add a simple unit test case for phase 2.
- @coderabbitai For assumption 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord or schedule a call!