@red-ant-colony/biome-config

Shared Biome configuration for Red Ant Colony frontend projects.

Overview

This package provides a comprehensive Biome configuration for linting and formatting JavaScript, TypeScript, JSON, and CSS files. It replaces ESLint and Prettier with a single, fast tool.

Installation

In your monorepo, reference this package in your workspace package.json:

{
  "devDependencies": {
    "@red-ant-colony/biome-config": "workspace:*",
    "@biomejs/biome": "^2.3.7"
  }
}

Usage

For React Projects

Create a biome.json in your project root:

{
  "extends": ["@red-ant-colony/biome-config/react.json"]
}

For Next.js Projects

Create a biome.json in your project root:

{
  "extends": ["@red-ant-colony/biome-config/nextjs.json"]
}

For Library/Shared Packages

Create a biome.json in your project root:

{
  "extends": ["@red-ant-colony/biome-config/library.json"]
}

For Strict Mode (Production-ready projects)

Create a biome.json in your project root:

{
  "extends": ["@red-ant-colony/biome-config/strict.json"]
}

Basic Setup (Minimal rules)

Create a biome.json in your project root:

{
  "extends": ["@red-ant-colony/biome-config/base.json"]
}

With Custom Overrides

{
  "extends": ["@red-ant-colony/biome-config/react.json"],
  "files": {
    "ignore": ["custom-ignore-folder"]
  },
  "linter": {
    "rules": {
      "suspicious": {
        "noConsoleLog": "off"
      }
    }
  }
}

Legacy Support (Full config in single file)

For backward compatibility, you can still use the comprehensive config:

{
  "extends": ["@red-ant-colony/biome-config/biome.json"]
}

Package.json Scripts

Add these scripts to your package.json:

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

Available Configurations

This package provides multiple configuration presets for different use cases:

| Config | Description | Use Case | |--------|-------------|----------| | base.json | Minimal essential rules | Starting point or custom configs | | react.json | Base + React/JSX + A11y rules | React applications | | nextjs.json | React + Next.js optimizations | Next.js applications | | library.json | Base + Stricter types | Shared libraries/packages | | strict.json | All rules enforced as errors | Production apps, max quality | | biome.json | Legacy comprehensive config | Backward compatibility |

Configuration Hierarchy

base.json (minimal)
  ├── react.json (+ React/JSX/A11y)
  │     └── nextjs.json (+ Next.js specific)
  ├── library.json (+ strict types)
  └── strict.json (all rules as errors)

Features

Linting Rules

• ✅ Accessibility (a11y) - Comprehensive accessibility checks
• ✅ Complexity - Code complexity and optimization rules
• ✅ Correctness - Error prevention and correctness rules
• ✅ Security - Security best practices
• ✅ Style - Code style consistency
• ✅ Suspicious - Suspicious patterns detection

Formatting

• Indent: Tabs (NX monorepo style)
• Line Width: 100 characters
• Quote Style: Double quotes for JS/TS/JSX
• Semicolons: Always
• Trailing Commas: ES5
• Line Ending: LF
• Tailwind: CSS parser supports Tailwind directives

Supported File Types

• JavaScript (.js, .jsx)
• TypeScript (.ts, .tsx)
• JSON (.json)
• CSS (.css)

Commands

| Command | Description | |---------|-------------| | biome check . | Run both linting and formatting checks | | biome check --write . | Fix all auto-fixable issues | | biome lint . | Run only linting | | biome lint --write . | Fix linting issues | | biome format . | Check formatting | | biome format --write . | Fix formatting | | biome ci . | Run checks in CI mode (faster, no fixes) |

IDE Integration

VS Code

Install the Biome extension and add to your .vscode/settings.json:

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

JetBrains IDEs

Biome support is available through the Biome plugin.

Migration from ESLint/Prettier

1. Remove ESLint and Prettier dependencies
2. Remove .eslintrc.*, .prettierrc.*, and .prettierignore files
3. Install Biome and this config package
4. Create biome.json extending this config
5. Update package.json scripts
6. Run biome check --write . to format all files

Ignored Files

The following patterns are ignored by default:

• node_modules
• dist
• build
• .next
• .turbo
• coverage
• *.min.js
• *.min.css
• public
• .git

Performance

Biome is significantly faster than ESLint + Prettier:

• ~10-100x faster than ESLint
• ~20-30x faster than Prettier
• Written in Rust for maximum performance
• Single tool for both linting and formatting

Resources

• Biome Documentation
• Biome vs ESLint
• Biome vs Prettier