@mfyuu/biome-config

English | Japanese

Shareable Biome configuration package for JavaScript/TypeScript projects by @mfyuu.

Choose from three configurations based on your project type: base, React, or Next.js.

Usage

Starter Wizard (Recommended)

The easiest way to set up Biome in your project is using our interactive CLI wizard:

npx @mfyuu/biome-config

This command will:

• Detect your project type (base, React, or Next.js)
• Install required dependencies (@biomejs/biome and @mfyuu/biome-config)
• Create biome.json or biome.jsonc with the appropriate configuration
• Add Biome scripts to your package.json (format, lint, lint-fix, check)
• Set up VS Code integration with .vscode/settings.json
  • Choose between Biome-only formatting or Biome with Prettier for Markdown files
• Optionally integrate Lefthook for Git hooks automation
  • Installs lefthook dependency
  • Creates lefthook configuration file
  • Adds prepare script for automatic Git hooks installation

For all available options:

npx @mfyuu/biome-config --help

Manual Setup

If you prefer to set up manually:

1. Install the required packages:

npm i -D @biomejs/biome @mfyuu/biome-config

2. Create biome.json or biome.jsonc in your project root:

Base Configuration (Node.js/TypeScript Projects)

{
  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
  "extends": ["@mfyuu/biome-config/base"]
}

React Configuration

{
  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
  "extends": ["@mfyuu/biome-config/react"]
}

Next.js Configuration

{
  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
  "extends": ["@mfyuu/biome-config/next"]
}

Note

If you have problems with resolving the physical file, you can use the one published on this site:

"$schema": "https://biomejs.dev/schemas/2.2.0/schema.json"

Configuration Contents

base

• Basic formatting settings (indentation, line breaks, etc.)
• Common TypeScript/JavaScript lint rules
• General best practices

react

• Inherits all settings from base
• React/JSX specific rules
• Hooks-related rules
• Accessibility rules

next

• Inherits all settings from react
• Next.js specific file pattern exclusions
• Support for both App Router and Pages Router

Customization

You can override inherited settings by adding custom configuration in your biome.json or biome.jsonc:

{
  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
  "extends": ["@mfyuu/biome-config/base"],
  "formatter": {
    "indentStyle": "space"
  }
}

License

MIT License © 2025-PRESENT Kazuya Suzuki