Biome 2.0 - High-Speed Tool Replacing ESLint/Prettier

What is Biome

Biome is a high-speed linter and formatter written in Rust. As an alternative to ESLint and Prettier, you can manage code quality and formatting with a single tool.

New Features in Biome 2.0

Phenomenal Performance

Formatting 1000 files:
- Prettier: 15 seconds
- Biome: 0.5 seconds (30x faster)

Linting:
- ESLint: 45 seconds
- Biome: 1.5 seconds (30x faster)

CSS/SCSS Support

/* Biome formats and lints */
.container {
  display: flex;
  flex-direction: column;
}

/* Warning: Unused selector */
.unused-class {
  color: red;
}

GraphQL Support

# Biome formats and lints
query GetUser($id: ID!) {
  user(id: $id) {
    name
    email
  }
}

Installation and Configuration

npm install --save-dev @biomejs/biome
npx biome init

// biome.json
{
  "$schema": "https://biomejs.dev/schemas/1.0.0/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "suspicious": {
        "noExplicitAny": "error"
      },
      "style": {
        "useConst": "warn"
      }
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2
  }
}

Migration from ESLint/Prettier

Configuration Conversion

# Convert ESLint config to Biome
npx biome migrate eslint

# Convert Prettier config to Biome
npx biome migrate prettier

Main Rule Mapping

CLI Commands

# Format
biome format --write ./src

# Lint
biome lint ./src

# Run both
biome check ./src

# Auto-fix
biome check --apply ./src

# CI mode (exit code 1 on errors)
biome ci ./src

IDE Integration

VS Code

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

New Lint Rules

Security

// Warning: Use of eval()
eval("console.log('hello')");

// Warning: Dangerous innerHTML
element.innerHTML = userInput;

Performance

// Warning: Unnecessary use of Array.prototype.reduce()
const sum = arr.reduce((a, b) => a + b, 0);

// Recommended: Simple for loop
let sum = 0;
for (const num of arr) sum += num;

Plugin System (Experimental)

// biome-plugin-custom.js
export default {
  rules: {
    'no-custom-pattern': {
      meta: { /* ... */ },
      create(context) {
        // Custom rule logic
      }
    }
  }
};

Comparison with Prettier/ESLint

Summary

Biome 2.0 integrates ESLint and Prettier into one tool, running at overwhelming speed. It’s particularly effective for reducing build times in large-scale projects and CI environments. The plugin ecosystem is still developing, but basic rules are well covered.