@aprx/biome-config

Setup

• Install the package

npm install --dev @aprx/biome-config @biomejs/biome

• Choose which preset you need from the list below and add it to your biome.json

{
  "extends": ["@aprx/biome-config/react", "@aprx/biome-config/testing"]
}

Presets

Hierarchy

Presets are organized in layers. Each preset inherits all rules from its parent:

base                  Universal JS/TS rules (formatter, linter, assist)
├── dom               + browser/DOM rules (a11y, security)
│   ├── react         + React-specific rules
│   │   └── nextjs    + Next.js-specific rules
│   └── vue           + Vue-specific rules
└── lib               + Node.js-specific rules

testing               Composable with any preset above

Reference

| Preset | Use case | |----------------------------------|--------------------------------------------| | @aprx/biome-config | Base rules only (e.g. universal library) | | @aprx/biome-config/dom | Browser/DOM application without framework | | @aprx/biome-config/lib | Node.js library or backend service | | @aprx/biome-config/react | React application (includes dom) | | @aprx/biome-config/nextjs | Next.js application (includes react) | | @aprx/biome-config/vue | Vue application (includes dom) | | @aprx/biome-config/testing | Test files (combine with any preset above) |

Examples

React application with tests:

{
  "extends": ["@aprx/biome-config/react", "@aprx/biome-config/testing"]
}

Node.js backend with tests:

{
  "extends": ["@aprx/biome-config/lib", "@aprx/biome-config/testing"]
}

Vanilla browser application:

{
  "extends": ["@aprx/biome-config/dom"]
}

Monorepo usage

In a monorepo, create a biome.json at the root and per-package configs that extend it using the "//" syntax:

monorepo/
├── biome.json                  Root config
├── packages/
│   ├── ui/
│   │   └── biome.json          Extends root + react preset
│   ├── api/
│   │   └── biome.json          Extends root + lib preset
│   └── shared/
│       └── biome.json          Extends root only

Root biome.json:

{
  "extends": ["@aprx/biome-config"]
}

Package packages/ui/biome.json:

{
  "extends": ["//", "@aprx/biome-config/react", "@aprx/biome-config/testing"]
}

The "//" syntax tells Biome to inherit from the root configuration regardless of the package location. See the Biome monorepo guide for more details.

VS Code integration

Install the Biome extension (biomejs.biome), then add the following to your .vscode/settings.json:

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

This enables format on save, auto-fix of lint issues, and import sorting.

Resources

• https://biomejs.dev/
• https://biomejs.dev/guides/big-projects/
• https://biomejs.dev/reference/vscode/

License

MIT