@duclonghoang/biome-config

Shared Biome configuration for consistent code formatting and linting.

Features

• Tabs for indentation (width: 2)
• Line width: 120 characters
• Single quotes for JS/JSX
• No semicolons (ASI)
• Arrow function parentheses always
• Trailing commas everywhere
• Tailwind CSS class sorting with cn, clsx, twMerge support
• Recommended linter rules enabled

Installation

pnpm add -D @duclonghoang/biome-config @biomejs/biome

Usage

Create a biome.json in your project root:

{
  "schema": "https://biomejs.dev/schemas/2.3.11/schema.json",
  "extends": ["@duclonghoang/biome-config"]
}

Override Settings

{
  "extends": ["@duclonghoang/biome-config"],
  "formatter": {
    "lineWidth": 100
  },
  "linter": {
    "rules": {
      "suspicious": {
        "noConsole": "off"
      }
    }
  }
}

Project-Specific Includes

{
  "extends": ["@duclonghoang/biome-config"],
  "files": {
    "includes": ["src/**", "!dist"]
  }
}

Configuration Details

Formatter

• Indent: Tabs (width 2)
• Line width: 120 characters
• Line ending: LF
• Quote style: Single quotes
• JSX quotes: Single quotes
• Semicolons: Disabled (ASI)
• Trailing commas: All
• Arrow parens: Always

Linter

• All recommended rules enabled
• Tailwind class sorting with support for:
  • className and class attributes
  • cn(), cx(), clsx(), tw(), twMerge() functions

JavaScript-Specific

• Single quotes for strings and JSX
• No semicolons
• Trailing commas everywhere
• Arrow functions always use parentheses

JSON-Specific

• Comments allowed
• No trailing commas
• Tab indentation (width 2)

IDE Setup

VS Code

Install the Biome extension:

code --install-extension biomejs.biome

Add to .vscode/settings.json:

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

Other Editors

See Biome editor integration docs

Monorepo Usage

For monorepos with different standards per package:

Root biome.json:

{
  "schema": "https://biomejs.dev/schemas/2.3.11/schema.json",
  "extends": ["@duclonghoang/biome-config"]
}

Package-specific biome.json:

{
  "schema": "https://biomejs.dev/schemas/2.3.11/schema.json",
  "extends": ["//"],
  "linter": {
    "rules": {
      "suspicious": {
        "noConsole": "off"
      }
    }
  }
}

The extends: ["//"] inherits from the root configuration.

Why Biome?

• Fast: 20-50x faster than ESLint + Prettier
• Single tool: Replaces ESLint, Prettier, and more
• Zero config: Works out of the box
• Built in Rust: Native performance
• Growing ecosystem: Active development and community

License

MIT © Duc Long Hoang

Links

• npm Package
• Source Code
• Biome Documentation
• Report Issues