Biome (ESLint + Prettier Alternative)

Q: Can I migrate my existing ESLint and Prettier configs to Biome?

These commands convert your existing configs into biome.json equivalents.

Q: Gotcha: Does Biome support third-party plugins?

No. Biome has no plugin system. There is no equivalent of eslint-plugin-tailwindcss or eslint-plugin-testing-library. If you need Tailwind class sorting, use prettier-plugin-tailwindcss alongside Biome for that single task.

Q: Does Biome include Next.js-specific rules?

No. Biome does not ship eslint-plugin-next equivalents (no-img-element, no-head-element, etc.). Run next lint alongside Biome for Next.js-specific checks. Most generic React and accessibility rules are covered.

Q: How are Biome rule names different from ESLint?

Biome uses camelCase: noUnusedVariables instead of no-unused-vars. Rules are grouped by category: correctness, suspicious, style, a11y, complexity. Use npx biome migrate eslint to convert rule names automatically.

Q: What categories are Biome rules organized into?

correctness -- bugs and logic errors (exhaustive deps, unused variables) suspicious -- code that is likely wrong (explicit any, duplicate keys) style -- code style preferences (const, naming) a11y -- accessibility checks (alt text, ARIA) complexity -- overly complex code performance -- performance anti-patterns security -- security vulnerabilities

Use Biome as a single, fast tool for linting, formatting, and import organization - replacing both ESLint and Prettier.

Recipe

Quick-reference recipe card - copy-paste ready.

# Install Biome
npm install --save-dev @biomejs/biome
 
# Initialize config
npx biome init
 
# Format files
npx biome format --write .
 
# Lint files
npx biome lint .
 
# Lint + format + organize imports in one command
npx biome check --write .

When to reach for this: When you want a single tool that is significantly faster than ESLint + Prettier combined, with minimal configuration.

Working Example

// biome.json
{
  "$schema": "https://biomejs.dev/schemas/1.9.0/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80,
    "lineEnding": "lf"
  },
  "javascript": {
    "formatter": {
      "semicolons": "always",
      "quoteStyle": "double",
      "trailingCommas": "all",
      "arrowParentheses": "always"
    }
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "correctness": {
        "useExhaustiveDependencies": "warn",
        "noUnusedVariables": "error",
        "noUnusedImports": "error"
      },
      "suspicious": {
        "noExplicitAny": "warn"
      },
      "style": {
        "useConst": "error",
        "noNonNullAssertion": "warn"
      },
      "a11y": {
        "useAltText": "error",
        "useAnchorContent": "warn"
      }
    }
  },
  "files": {
    "ignore": [
      "node_modules/",
      ".next/",
      "out/",
      "coverage/",
      "*.min.js"
    ]
  }
}

// package.json scripts
{
  "scripts": {
    "lint": "biome lint .",
    "format": "biome format --write .",
    "check": "biome check --write .",
    "check:ci": "biome check ."
  }
}

What this demonstrates:

Single biome.json replaces both .eslintrc and .prettierrc
Formatter options mirror Prettier's familiar settings
Linter rules cover React hooks, unused variables, accessibility, and TypeScript patterns
biome check runs lint + format + import organization in one pass

Deep Dive

How It Works

Biome is written in Rust, making it 10 to 100 times faster than ESLint + Prettier
It uses a single AST parse for linting, formatting, and import organization (no separate tools)
Rules are grouped by category: correctness, suspicious, style, a11y, complexity, performance, security
The recommended preset enables sensible defaults similar to eslint:recommended + react/recommended
No plugin system - all rules are built in

Variations

Migrating from ESLint + Prettier:

# Biome can migrate your ESLint config
npx biome migrate eslint --write
 
# Migrate Prettier config
npx biome migrate prettier --write

Performance comparison:

Tool	Time (1000 files)	Notes
ESLint + Prettier	5 to 15 seconds	Two separate AST parses
Biome	100 to 500 milliseconds	Single Rust-based parse

IDE integration:

// .vscode/settings.json
{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

// .vscode/extensions.json
{
  "recommendations": ["biomejs.biome"]
}

Selective overrides per directory:

{
  "overrides": [
    {
      "include": ["tests/**"],
      "linter": {
        "rules": {
          "suspicious": {
            "noExplicitAny": "off"
          }
        }
      }
    }
  ]
}

TypeScript Notes

// Biome understands TypeScript natively - no parser plugin needed.
// It catches:
 
// Unused imports
import type { User } from "@/types"; // Removed if unused
 
// Unused variables
const unused = "hello"; // Error: noUnusedVariables
 
// Explicit any
const data: any = fetch("/api"); // Warn: noExplicitAny
 
// Non-null assertions
const name = user!.name; // Warn: noNonNullAssertion

Gotchas

Things that will bite you. Each gotcha includes what goes wrong, why it happens, and the fix.

No plugin ecosystem - Biome does not support third-party plugins. No equivalent of eslint-plugin-tailwindcss or eslint-plugin-testing-library. Fix: If you need Tailwind class sorting, use prettier-plugin-tailwindcss alongside Biome (Biome for linting, Prettier only for Tailwind class sorting), or accept the limitation.
No Next.js-specific rules - Biome does not include eslint-plugin-next rules (no-img-element, no-head-element, etc.). Fix: Run next lint alongside Biome for Next.js-specific checks, or accept the gap.
Different rule names - Rule names differ from ESLint (e.g., noUnusedVariables vs no-unused-vars). Fix: Use npx biome migrate eslint to convert your config automatically.
Formatting differences from Prettier - Biome aims for Prettier compatibility but is not 100% identical. Some edge cases in JSX and TypeScript formatting differ. Fix: Run npx biome format across your codebase once and review the diff. Most differences are minor.

Alternatives

Other ways to solve the same problem - and when each is the better choice.

Alternative	Use When	Don't Use When
ESLint + Prettier	You need the full plugin ecosystem (Tailwind, testing, etc.)	Performance is a top concern
`oxlint` + Prettier	You want fast linting but keep Prettier for formatting	You want a single unified tool
`dprint` + ESLint	You want a fast Rust formatter with ESLint for linting	You want to reduce tooling complexity

FAQs

How much faster is Biome than ESLint + Prettier?

Biome is typically 10 to 100 times faster.
It parses the AST once for linting, formatting, and import organization.
On 1000 files, Biome takes 100-500ms versus 5-15 seconds for ESLint + Prettier.

What does biome check --write do?

It runs linting, formatting, and import organization in a single pass.
--write applies all fixes and formatting changes in place.
Without --write, it only reports issues (use this mode in CI).

Can I migrate my existing ESLint and Prettier configs to Biome?

npx biome migrate eslint --write
npx biome migrate prettier --write

These commands convert your existing configs into biome.json equivalents.

Gotcha: Does Biome support third-party plugins?

No. Biome has no plugin system.
There is no equivalent of eslint-plugin-tailwindcss or eslint-plugin-testing-library.
If you need Tailwind class sorting, use prettier-plugin-tailwindcss alongside Biome for that single task.

Does Biome include Next.js-specific rules?

No. Biome does not ship eslint-plugin-next equivalents (no-img-element, no-head-element, etc.).
Run next lint alongside Biome for Next.js-specific checks.
Most generic React and accessibility rules are covered.

How are Biome rule names different from ESLint?

Biome uses camelCase: noUnusedVariables instead of no-unused-vars.
Rules are grouped by category: correctness, suspicious, style, a11y, complexity.
Use npx biome migrate eslint to convert rule names automatically.

How do I set up Biome in VS Code?

{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

Does Biome handle TypeScript without extra configuration?

Yes. Biome understands TypeScript natively with no parser plugin needed.
It catches unused imports, unused variables, explicit any, and non-null assertions.
Type-only imports are handled via its import organization feature.

Gotcha: Is Biome formatting 100% compatible with Prettier?

Not quite. Biome aims for Prettier compatibility but has minor differences in edge cases.
Run npx biome format across your codebase and review the diff before committing.
Most differences are in JSX and TypeScript formatting and are cosmetic.

How do I apply different rules for test files?

{
  "overrides": [
    {
      "include": ["tests/**"],
      "linter": {
        "rules": {
          "suspicious": { "noExplicitAny": "off" }
        }
      }
    }
  ]
}

What categories are Biome rules organized into?

correctness -- bugs and logic errors (exhaustive deps, unused variables)
suspicious -- code that is likely wrong (explicit any, duplicate keys)
style -- code style preferences (const, naming)
a11y -- accessibility checks (alt text, ARIA)
complexity -- overly complex code
performance -- performance anti-patterns
security -- security vulnerabilities

Can I use Biome for linting and Prettier for formatting?

Yes, but it defeats the purpose of Biome's unified approach.
If you only need Prettier for Tailwind class sorting, disable Biome's formatter and use Prettier for formatting only.

ESLint Setup for Next.js - traditional ESLint setup
Prettier Setup - traditional formatting setup
ESLint + Prettier Integration - making the traditional tools coexist
Linting in CI/CD - running Biome in CI

Recipe

Quick-reference recipe card - copy-paste ready.

# Install Biome
npm install --save-dev @biomejs/biome
 
# Initialize config
npx biome init
 
# Format files
npx biome format --write .
 
# Lint files
npx biome lint .
 
# Lint + format + organize imports in one command
npx biome check --write .

When to reach for this: When you want a single tool that is significantly faster than ESLint + Prettier combined, with minimal configuration.

Working Example

// biome.json
{
  "$schema": "https://biomejs.dev/schemas/1.9.0/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80,
    "lineEnding": "lf"
  },
  "javascript": {
    "formatter": {
      "semicolons": "always",
      "quoteStyle": "double",
      "trailingCommas": "all",
      "arrowParentheses": "always"
    }
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "correctness": {
        "useExhaustiveDependencies": "warn",
        "noUnusedVariables": "error",
        "noUnusedImports": "error"
      },
      "suspicious": {
        "noExplicitAny": "warn"
      },
      "style": {
        "useConst": "error",
        "noNonNullAssertion": "warn"
      },
      "a11y": {
        "useAltText": "error",
        "useAnchorContent": "warn"
      }
    }
  },
  "files": {
    "ignore": [
      "node_modules/",
      ".next/",
      "out/",
      "coverage/",
      "*.min.js"
    ]
  }
}

// package.json scripts
{
  "scripts": {
    "lint": "biome lint .",
    "format": "biome format --write .",
    "check": "biome check --write .",
    "check:ci": "biome check ."
  }
}

What this demonstrates:

Single biome.json replaces both .eslintrc and .prettierrc
Formatter options mirror Prettier's familiar settings
Linter rules cover React hooks, unused variables, accessibility, and TypeScript patterns
biome check runs lint + format + import organization in one pass

Deep Dive

How It Works

Biome is written in Rust, making it 10 to 100 times faster than ESLint + Prettier
It uses a single AST parse for linting, formatting, and import organization (no separate tools)
Rules are grouped by category: correctness, suspicious, style, a11y, complexity, performance, security
The recommended preset enables sensible defaults similar to eslint:recommended + react/recommended
No plugin system - all rules are built in

Variations

Migrating from ESLint + Prettier:

# Biome can migrate your ESLint config
npx biome migrate eslint --write
 
# Migrate Prettier config
npx biome migrate prettier --write

Performance comparison:

Tool	Time (1000 files)	Notes
ESLint + Prettier	5 to 15 seconds	Two separate AST parses
Biome	100 to 500 milliseconds	Single Rust-based parse

IDE integration:

// .vscode/settings.json
{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

// .vscode/extensions.json
{
  "recommendations": ["biomejs.biome"]
}

Selective overrides per directory:

{
  "overrides": [
    {
      "include": ["tests/**"],
      "linter": {
        "rules": {
          "suspicious": {
            "noExplicitAny": "off"
          }
        }
      }
    }
  ]
}

TypeScript Notes

// Biome understands TypeScript natively - no parser plugin needed.
// It catches:
 
// Unused imports
import type { User } from "@/types"; // Removed if unused
 
// Unused variables
const unused = "hello"; // Error: noUnusedVariables
 
// Explicit any
const data: any = fetch("/api"); // Warn: noExplicitAny
 
// Non-null assertions
const name = user!.name; // Warn: noNonNullAssertion

Gotchas

Things that will bite you. Each gotcha includes what goes wrong, why it happens, and the fix.

No plugin ecosystem - Biome does not support third-party plugins. No equivalent of eslint-plugin-tailwindcss or eslint-plugin-testing-library. Fix: If you need Tailwind class sorting, use prettier-plugin-tailwindcss alongside Biome (Biome for linting, Prettier only for Tailwind class sorting), or accept the limitation.
No Next.js-specific rules - Biome does not include eslint-plugin-next rules (no-img-element, no-head-element, etc.). Fix: Run next lint alongside Biome for Next.js-specific checks, or accept the gap.
Different rule names - Rule names differ from ESLint (e.g., noUnusedVariables vs no-unused-vars). Fix: Use npx biome migrate eslint to convert your config automatically.
Formatting differences from Prettier - Biome aims for Prettier compatibility but is not 100% identical. Some edge cases in JSX and TypeScript formatting differ. Fix: Run npx biome format across your codebase once and review the diff. Most differences are minor.

Alternatives

Other ways to solve the same problem - and when each is the better choice.

Alternative	Use When	Don't Use When
ESLint + Prettier	You need the full plugin ecosystem (Tailwind, testing, etc.)	Performance is a top concern
`oxlint` + Prettier	You want fast linting but keep Prettier for formatting	You want a single unified tool
`dprint` + ESLint	You want a fast Rust formatter with ESLint for linting	You want to reduce tooling complexity

FAQs

How much faster is Biome than ESLint + Prettier?

Biome is typically 10 to 100 times faster.
It parses the AST once for linting, formatting, and import organization.
On 1000 files, Biome takes 100-500ms versus 5-15 seconds for ESLint + Prettier.

What does biome check --write do?

It runs linting, formatting, and import organization in a single pass.
--write applies all fixes and formatting changes in place.
Without --write, it only reports issues (use this mode in CI).

Can I migrate my existing ESLint and Prettier configs to Biome?

npx biome migrate eslint --write
npx biome migrate prettier --write

These commands convert your existing configs into biome.json equivalents.

Gotcha: Does Biome support third-party plugins?

No. Biome has no plugin system.
There is no equivalent of eslint-plugin-tailwindcss or eslint-plugin-testing-library.
If you need Tailwind class sorting, use prettier-plugin-tailwindcss alongside Biome for that single task.

Does Biome include Next.js-specific rules?

No. Biome does not ship eslint-plugin-next equivalents (no-img-element, no-head-element, etc.).
Run next lint alongside Biome for Next.js-specific checks.
Most generic React and accessibility rules are covered.

How are Biome rule names different from ESLint?

Biome uses camelCase: noUnusedVariables instead of no-unused-vars.
Rules are grouped by category: correctness, suspicious, style, a11y, complexity.
Use npx biome migrate eslint to convert rule names automatically.

How do I set up Biome in VS Code?

{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

Does Biome handle TypeScript without extra configuration?

Yes. Biome understands TypeScript natively with no parser plugin needed.
It catches unused imports, unused variables, explicit any, and non-null assertions.
Type-only imports are handled via its import organization feature.

Gotcha: Is Biome formatting 100% compatible with Prettier?

Not quite. Biome aims for Prettier compatibility but has minor differences in edge cases.
Run npx biome format across your codebase and review the diff before committing.
Most differences are in JSX and TypeScript formatting and are cosmetic.

How do I apply different rules for test files?

{
  "overrides": [
    {
      "include": ["tests/**"],
      "linter": {
        "rules": {
          "suspicious": { "noExplicitAny": "off" }
        }
      }
    }
  ]
}

What categories are Biome rules organized into?

correctness -- bugs and logic errors (exhaustive deps, unused variables)
suspicious -- code that is likely wrong (explicit any, duplicate keys)
style -- code style preferences (const, naming)
a11y -- accessibility checks (alt text, ARIA)
complexity -- overly complex code
performance -- performance anti-patterns
security -- security vulnerabilities

Can I use Biome for linting and Prettier for formatting?

Yes, but it defeats the purpose of Biome's unified approach.
If you only need Prettier for Tailwind class sorting, disable Biome's formatter and use Prettier for formatting only.

ESLint Setup for Next.js - traditional ESLint setup
Prettier Setup - traditional formatting setup
ESLint + Prettier Integration - making the traditional tools coexist
Linting in CI/CD - running Biome in CI

Biome (ESLint + Prettier Alternative)

Search Documentation

Biome (ESLint + Prettier Alternative)