Replace ESLint and Prettier with Biome in a React/TypeScript Project

What you'll build

Swap ESLint and Prettier out of an existing React/TypeScript project and replace both with Biome, ending up with a single biome.json, one devDependency, and noticeably faster lint and format runs.

Prerequisites

• Node.js 18 or later
• An existing React + TypeScript project (Vite, Create React App, or any setup)
• npm 7+ (commands use npm; substitute yarn add -D or pnpm add -D as needed)
• VS Code, if you want editor integration

1. Install Biome

npm install --save-dev --exact @biomejs/biome

The --exact flag pins the version. Biome's own docs recommend it because minor version bumps can change formatting output and create noisy diffs in CI.

2. Create the config

npx @biomejs/biome init

This writes biome.json in your project root with sensible defaults. Open it and you'll see linting and formatting already enabled, with recommended rules turned on. The $schema line points to the exact version you installed.

3. Migrate your ESLint rules

If you have a non-trivial .eslintrc.* config, let Biome read it:

npx @biomejs/biome migrate eslint --write

Biome maps what it can into biome.json and lists any ESLint rules it couldn't translate. For most React/TypeScript projects the recommended ruleset already covers the important ones, so the gaps are usually small.

4. Match your Prettier settings

Biome doesn't auto-read .prettierrc, so translate your options manually. Common ones:

A typical biome.json after this step (the init command generates the $schema line; omitted here for brevity):

{
  "organizeImports": { "enabled": true },
  "linter": {
    "enabled": true,
    "rules": { "recommended": true }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "trailingComma": "all",
      "semicolons": "asNeeded"
    }
  }
}

5. Remove ESLint and Prettier

Delete their config files:

rm -f .eslintrc.js .eslintrc.cjs .eslintrc.json .eslintrc.yaml .eslintignore \
       .prettierrc .prettierrc.js .prettierrc.json .prettierignore

Uninstall the packages (adjust for what your project actually has):

npm uninstall eslint prettier eslint-config-prettier eslint-plugin-react \
  eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin

6. Update package.json scripts

{
  "scripts": {
    "lint": "biome check src/",
    "lint:fix": "biome check --write src/",
    "format": "biome format --write src/"
  }
}

biome check runs linting, formatting, and import organization in one pass. It's the command you'll reach for most.

7. Set up VS Code (optional)

Install the Biome extension (ID: biomejs.biome) from the Extensions panel, then add to .vscode/settings.json:

{
  "[javascript]": { "editor.defaultFormatter": "biomejs.biome" },
  "[typescript]": { "editor.defaultFormatter": "biomejs.biome" },
  "[javascriptreact]": { "editor.defaultFormatter": "biomejs.biome" },
  "[typescriptreact]": { "editor.defaultFormatter": "biomejs.biome" },
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

Verify it works

npx @biomejs/biome check src/

Expected output:

Checked 47 file(s) in 41ms
Found 2 error(s)

To auto-fix everything Biome considers safe:

npx @biomejs/biome check --write src/

Zero errors and reformatted files means you're done. On a mid-size project, expect Biome to finish in under 100ms where ESLint plus Prettier took several seconds.

Troubleshooting

Files aren't being checked. If you scoped the command to src/ but have TypeScript files elsewhere (like vite.config.ts), run npx @biomejs/biome check . to cover the whole project, then add a files.ignore list in biome.json for build outputs.

A rule I relied on in ESLint doesn't exist in Biome. Check the full rule list at biomejs.dev/linter/rules. Coverage is broad but not complete. For a critical missing rule, you can keep just that ESLint plugin installed and run it as a separate CI step alongside Biome.

CI fails with "unformatted files". Use biome ci src/ in pipelines instead of biome check. It's the same checks but exits non-zero on any formatting or lint issue without writing anything, which is exactly what you want in CI.

--write flag not recognized. You're on a Biome version older than 1.7, which used --apply. Since you just installed with --exact, this shouldn't happen. If it does: npm install --save-dev --exact @biomejs/biome@latest.

Next steps

• Review biomejs.dev/linter/rules to enable rules beyond recommended, including the nursery group for newer, experimental checks.
• Add lint-staged and configure it to pass staged file paths to biome check --write so every commit is automatically clean.
• In a monorepo, each package can have its own biome.json that references a shared root config via the extends array, keeping per-package overrides local without duplicating everything.