Biome Config

A collection of reusable Biome configuration files for JavaScript/TypeScript projects, with a primary focus on React applications.

What is Biome?

Biome is a fast, modern alternative to ESLint and Prettier combined. It's written in Rust, which makes it extremely fast, and combines formatting and linting in a single tool.

Installation

Using bun:

bun add -D @biomejs/biome @gagigante/biome-config

Using npm:

npm install --save-dev @biomejs/biome @gagigante/biome-config

Using yarn:

yarn add -D @biomejs/biome @gagigante/biome-config

Usage

React Projects

Create a biome.json file in the root of your project:

{
  "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
  "extends": ["./node_modules/@gagigante/biome-config/configs/react.json"]
}

Customizing the Configuration

You can extend the base configuration and override specific rules:

{
  "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
  "extends": ["./node_modules/@gagigante/biome-config/configs/react.json"],
  "linter": {
    "rules": {
      "suspicious": {
        "noExplicitAny": "warn" // Override from "error" to "warn"
      },
      "style": {
        "useTemplate": "off" // Disable this rule
      }
    }
  },
  "formatter": {
    "indentWidth": 4 // Override indent width
  }
}

Add Scripts to package.json

Add these scripts to your package.json:

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