Last updated:
October 23, 2026

Biome and ESLint Flat Config: Modern Code Quality Tools for JavaScript

Last updated October 2026

Biome (the Rust-based successor to Rome) and ESLint’s new flat config system represent the two leading approaches to JavaScript/TypeScript code quality in 2026. Biome offers an all-in-one linter, formatter, and import sorter that runs 10-50x faster than ESLint+Prettier, while ESLint flat config modernizes the established ecosystem with a simpler configuration model. For Indian development teams choosing between them, the decision depends on project size, existing tooling, and whether speed or ecosystem breadth matters more.

What Is Biome and Why Should Developers Care?

Biome is a high-performance code quality toolchain written in Rust that combines:

  • Linting: 300+ rules for JavaScript, TypeScript, JSX, CSS, and GraphQL — covering most of what ESLint + eslint-plugin-react + eslint-plugin-typescript provides
  • Formatting: Prettier-compatible formatting with near-identical output
  • Import sorting: Automatic, consistent import organization
  • All in one binary: No plugin installation, no dependency management, no configuration inheritance chains

The key selling point is speed. On a typical 100-file TypeScript project:

  • ESLint + Prettier: 3-8 seconds
  • Biome: 50-200 milliseconds

This speed difference transforms the developer experience — Biome can lint and format on every keystroke without lag, making it practical as a real-time IDE integration rather than just a CI check.

What Is ESLint Flat Config?

ESLint flat config (eslint.config.js) is ESLint’s new configuration system, replacing the legacy .eslintrc format. Key changes:

  • Single configuration file: One eslint.config.js (or .mjs/.ts) instead of cascading .eslintrc files in nested directories
  • Explicit plugin loading: Plugins are imported as JavaScript modules, not resolved by name strings — no more “cannot find module eslint-plugin-X” errors
  • No extends keyword: Configuration composition uses JavaScript spread/array operations — clearer and more debuggable
  • Glob-based file matching: Apply different rules to different files using glob patterns within the config array

Flat Config Example

// eslint.config.js
import js from '@eslint/js';
import typescript from '@typescript-eslint/eslint-plugin';
import tsParser from '@typescript-eslint/parser';
import react from 'eslint-plugin-react';

export default [
    js.configs.recommended,
    {
        files: ['**/*.ts', '**/*.tsx'],
        languageOptions: {
            parser: tsParser,
            parserOptions: { project: './tsconfig.json' }
        },
        plugins: { '@typescript-eslint': typescript },
        rules: {
            '@typescript-eslint/no-unused-vars': 'error',
            '@typescript-eslint/no-explicit-any': 'warn',
        }
    },
    {
        files: ['**/*.tsx'],
        plugins: { react },
        rules: {
            'react/jsx-uses-react': 'off',
            'react/react-in-jsx-scope': 'off',
        }
    },
    {
        ignores: ['dist/', 'node_modules/', '.next/']
    }
];

Biome vs ESLint Flat Config: Feature Comparison

AspectBiomeESLint (Flat Config)
LanguageRust (single binary)JavaScript (Node.js)
Speed10-50x fasterBaseline
FormattingBuilt-in (Prettier-compatible)Requires Prettier separately
Import sortingBuilt-inRequires eslint-plugin-import
Rule count (JS/TS)300+1000+ (with plugins)
Custom rulesNot supportedFull custom rule API
Plugin ecosystemBuilt-in rules onlyThousands of plugins
CSS lintingBuilt-in (basic)Requires stylelint
Framework pluginsReact/Next (built-in)React, Vue, Angular, Svelte, etc.
Configurationbiome.json (simple)eslint.config.js (flexible)
Editor supportVS Code, IntelliJ (extension)All major editors
CI integrationGitHub Action availableMature ecosystem

When to Choose Biome

  • New projects: Starting fresh with no existing ESLint configuration to migrate
  • Monorepos: Biome’s speed advantage is most dramatic in large monorepos where ESLint takes 30+ seconds
  • Simplicity-focused teams: One tool, one config file, no plugin management. Ideal for small Indian dev teams and startups that want code quality without configuration overhead.
  • Performance-critical CI: If your CI pipeline spends 2-5 minutes on linting, Biome cuts that to seconds
  • React/Next.js projects: Biome’s built-in React rules cover most common needs without plugins

When to Choose ESLint Flat Config

  • Existing ESLint projects: Migrating to flat config is easier than switching to Biome entirely
  • Custom lint rules: If your team has written custom ESLint rules for business logic or coding standards, Biome cannot replicate this
  • Vue/Angular/Svelte projects: Framework-specific plugins for these are mature in ESLint, limited or unavailable in Biome
  • Accessibility linting: eslint-plugin-jsx-a11y has no Biome equivalent yet
  • Enterprise environments: Established teams with existing tooling, shareable configs, and organizational ESLint presets

Migration Guide: Moving from ESLint to Biome

  1. Install Biome: npm install --save-dev --exact @biomejs/biome
  2. Initialize config: npx biome init — creates biome.json
  3. Migrate rules: npx biome migrate eslint — automatically converts compatible ESLint rules to Biome equivalents
  4. Run check: npx biome check --write . — lint + format all files
  5. Update CI: Replace ESLint/Prettier CI steps with npx biome ci .
  6. Remove old tools: Uninstall ESLint, Prettier, and related plugins once confident

Frequently Asked Questions

Can Biome fully replace ESLint and Prettier in 2026?

For React and Next.js projects using TypeScript, Biome covers 80-90% of common ESLint rules. The gaps are in specialized plugins: accessibility (jsx-a11y), testing (jest/vitest rules), and framework-specific rules for Vue/Angular/Svelte. If your project only needs standard JavaScript/TypeScript/React linting and Prettier-style formatting, Biome is a complete replacement.

Is ESLint flat config backward compatible with .eslintrc?

No. Flat config is a separate system. ESLint provides the @eslint/eslintrc compatibility package that lets you use legacy configs within a flat config file during migration. ESLint 9+ uses flat config by default, but provides backward compatibility for the transition period.

How much faster is Biome compared to ESLint for Indian agency projects?

On a typical agency project (50-200 files, React + TypeScript), Biome completes in 100-500ms where ESLint + Prettier takes 5-15 seconds. In CI pipelines, this translates to 30-60 seconds saved per build. For agencies running CI on multiple projects daily, this adds up to meaningful time and cost savings on CI runner minutes.

Should Indian development teams invest time learning Biome now?

Yes, for new projects. Biome’s one-tool approach reduces configuration complexity that often plagues JavaScript projects. For teams maintaining existing ESLint setups, migrate to flat config first (it is the future of ESLint), and evaluate Biome for the next new project. Learning both is a minor investment since Biome’s configuration is deliberately simple.

Does Biome support CSS and HTML linting?

Biome added CSS linting in 2024 and has been expanding its CSS rule set. HTML linting is not yet supported. For projects requiring comprehensive CSS linting, stylelint remains the more complete option. Biome’s CSS support is sufficient for basic quality checks but does not yet match stylelint’s depth of rules and plugin ecosystem.

Related Articles

Ready to Start Your Project?

Free consultation and custom proposal within 24 hours. No obligation.

Leave a Reply

Your email address will not be published. Required fields are marked *