Skip to content

feat(biome-config)!: migrate presets to Biome 2.6 #835

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tutods merged 1 commit into from
Oct 27, 2026
Merged

feat(biome-config)!: migrate presets to Biome 2.6 #835

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 47 additions & 66 deletions configs/biome-config/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
---

## Table of Contents

- [📄 Goal](#-goal)
- [What you will find](#what-you-will-find)
- [✨ Features](#-features)
Expand Down Expand Up @@ -36,15 +37,15 @@ Built with **monorepo support** in mind, every config uses glob patterns that wo

Seven composable configurations. Extend only what you need:

| Config | Description |
|--------|-------------|
| **`base.json`** | Framework-agnostic core — formatting, VCS, file exclusions, and strict linting rules for any JS/TS project. Includes type-inference rules, logic simplification, and auto-enables test domain rules when jest/vitest is detected. |
| **`react.json`** | React rules — hooks, fragments, a11y, `noReactForwardRef`. Uses the `react` domain (auto-activates when `react` is in `package.json`). |
| **`nextjs.json`** | Next.js rules — uses the `next` and `react` domains (auto-activates when `next >= 14` is detected). Includes App Router overrides (`noDefaultExport` off for pages/layouts/routes). Use together with `react.json` for additional a11y/fragment rules. |
| **`tailwind.json`** | Tailwind CSS utility class sorting via `useSortedClasses`. Supports `className`, `class`, `clsx`, `cva`, `cn`, `twMerge`, `tv`. |
| **`nestjs.json`** | NestJS — enables unsafe parameter decorators, disables a11y rules, turns off rules that conflict with NestJS patterns. Auto-enables test domain rules (Jest). |
| **`solidjs.json`** | SolidJS — uses the `solid` domain. Includes SolidStart entry point overrides. |
| **`sanity.json`** | Sanity CMS — uses the `react` domain. Includes overrides for `sanity.config.*`, `sanity.cli.*`, schema and studio directories (default exports allowed). |
| Config | Description |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`base.json`** | Framework-agnostic core — formatting, VCS, file exclusions, and strict linting rules for any JS/TS project. Includes type-inference rules, logic simplification, and auto-enables test domain rules when jest/vitest is detected. |
| **`react.json`** | React rules — hooks, fragments, a11y, `noReactForwardRef`. Uses the `react` domain (auto-activates when `react` is in `package.json`). |
| **`nextjs.json`** | Next.js rules — uses the `next` and `react` domains (auto-activates when `next >= 14` is detected). Includes App Router overrides (`noDefaultExport` off for pages/layouts/routes). Use together with `react.json` for additional a11y/fragment rules. |
| **`tailwind.json`** | Tailwind CSS utility class sorting via `nursery.useTailwindSortedClasses` (Tailwind v4 order). The top-level `tailwind` section covers `className`, `class`, `classList`, `classNames`, `css`, merge functions `clsx`, `cn`, `tw`, `twMerge` and variant functions `cva`, `tv`. |
| **`nestjs.json`** | NestJS — enables unsafe parameter decorators, disables a11y rules, turns off rules that conflict with NestJS patterns. Auto-enables test domain rules (Jest). |
| **`solidjs.json`** | SolidJS — uses the `solid` domain. Includes SolidStart entry point overrides. |
| **`sanity.json`** | Sanity CMS — uses the `react` domain. Includes overrides for `sanity.config.*`, `sanity.cli.*`, schema and studio directories (default exports allowed). |


## ✨ Features
Expand Down Expand Up @@ -86,7 +87,7 @@ Edit your `biome.json` to extend the configs you need:

```json
{
"$schema": "https://biomejs.dev/schemas/2.4.16/schema.json",
"$schema": "https://biomejs.dev/schemas/2.6.3/schema.json",
"extends": ["@tutods/biome-config"]
}
```
Expand All @@ -111,24 +112,17 @@ Add lint scripts to your `package.json`:

```json
{
"$schema": "https://biomejs.dev/schemas/2.4.16/schema.json",
"extends": [
"@tutods/biome-config",
"@tutods/biome-config/react"
]
"$schema": "https://biomejs.dev/schemas/2.6.3/schema.json",
"extends": ["@tutods/biome-config", "@tutods/biome-config/react"]
}
```

#### React + Tailwind CSS project

```json
{
"$schema": "https://biomejs.dev/schemas/2.4.16/schema.json",
"extends": [
"@tutods/biome-config",
"@tutods/biome-config/react",
"@tutods/biome-config/tailwind"
]
"$schema": "https://biomejs.dev/schemas/2.6.3/schema.json",
"extends": ["@tutods/biome-config", "@tutods/biome-config/react", "@tutods/biome-config/tailwind"]
}
```

Expand All @@ -138,20 +132,16 @@ Next.js projects extend **both** `react` and `nextjs`. The `nextjs` config inclu

```json
{
"$schema": "https://biomejs.dev/schemas/2.4.16/schema.json",
"extends": [
"@tutods/biome-config",
"@tutods/biome-config/react",
"@tutods/biome-config/nextjs"
]
"$schema": "https://biomejs.dev/schemas/2.6.3/schema.json",
"extends": ["@tutods/biome-config", "@tutods/biome-config/react", "@tutods/biome-config/nextjs"]
}
```

#### Next.js + Tailwind CSS + Sanity CMS

```json
{
"$schema": "https://biomejs.dev/schemas/2.4.16/schema.json",
"$schema": "https://biomejs.dev/schemas/2.6.3/schema.json",
"extends": [
"@tutods/biome-config",
"@tutods/biome-config/react",
Expand All @@ -166,23 +156,17 @@ Next.js projects extend **both** `react` and `nextjs`. The `nextjs` config inclu

```json
{
"$schema": "https://biomejs.dev/schemas/2.4.16/schema.json",
"extends": [
"@tutods/biome-config",
"@tutods/biome-config/nestjs"
]
"$schema": "https://biomejs.dev/schemas/2.6.3/schema.json",
"extends": ["@tutods/biome-config", "@tutods/biome-config/nestjs"]
}
```

#### SolidJS project

```json
{
"$schema": "https://biomejs.dev/schemas/2.4.16/schema.json",
"extends": [
"@tutods/biome-config",
"@tutods/biome-config/solidjs"
]
"$schema": "https://biomejs.dev/schemas/2.6.3/schema.json",
"extends": ["@tutods/biome-config", "@tutods/biome-config/solidjs"]
}
```

Expand All @@ -192,25 +176,23 @@ Just the base — no framework, no UI rules.

```json
{
"$schema": "https://biomejs.dev/schemas/2.4.16/schema.json",
"extends": [
"@tutods/biome-config"
]
"$schema": "https://biomejs.dev/schemas/2.6.3/schema.json",
"extends": ["@tutods/biome-config"]
}
```


### Available configurations

| Export | Config | Use for |
|--------|--------|---------|
| `@tutods/biome-config` | `base.json` | Any JS/TS project |
| `@tutods/biome-config/react` | `react.json` | React (Vite, CRA, Remix) |
| `@tutods/biome-config/nextjs` | `nextjs.json` | Next.js (use with `react`) |
| `@tutods/biome-config/tailwind` | `tailwind.json` | Tailwind CSS projects |
| `@tutods/biome-config/nestjs` | `nestjs.json` | NestJS backends |
| `@tutods/biome-config/solidjs` | `solidjs.json` | SolidJS, SolidStart |
| `@tutods/biome-config/sanity` | `sanity.json` | Sanity CMS projects |
| Export | Config | Use for |
| ------------------------------- | --------------- | -------------------------- |
| `@tutods/biome-config` | `base.json` | Any JS/TS project |
| `@tutods/biome-config/react` | `react.json` | React (Vite, CRA, Remix) |
| `@tutods/biome-config/nextjs` | `nextjs.json` | Next.js (use with `react`) |
| `@tutods/biome-config/tailwind` | `tailwind.json` | Tailwind CSS projects |
| `@tutods/biome-config/nestjs` | `nestjs.json` | NestJS backends |
| `@tutods/biome-config/solidjs` | `solidjs.json` | SolidJS, SolidStart |
| `@tutods/biome-config/sanity` | `sanity.json` | Sanity CMS projects |


## 🏗️ Monorepo Support
Expand All @@ -235,7 +217,7 @@ The root `biome.json` extends the base config:

```json
{
"$schema": "https://biomejs.dev/schemas/2.4.16/schema.json",
"$schema": "https://biomejs.dev/schemas/2.6.3/schema.json",
"vcs": {
"enabled": true,
"clientKind": "git",
Expand All @@ -244,11 +226,7 @@ The root `biome.json` extends the base config:
},
"extends": ["@tutods/biome-config"],
"files": {
"includes": [
"!**/packages/**/package.json",
"!**/configs/**/package.json",
"!**/dist"
]
"includes": ["!**/packages/**/package.json", "!**/configs/**/package.json", "!**/dist"]
}
}
```
Expand Down Expand Up @@ -279,22 +257,24 @@ The `"//"` always resolves to the workspace root, regardless of nesting depth.
When using CSS selectors with single quotes (like `class*='size-'`) in JSX attributes, you may encounter issues with Biome's formatting. To resolve this:

1. Use template literals for className strings with complex selectors:
```jsx
className={`component [&_svg:not([class*='size-'])]:size-4`}
```

```jsx
className={`component [&_svg:not([class*='size-'])]:size-4`}
```

2. Or escape the single quotes in your selectors:
```jsx
className="component [&_svg:not([class*=\\'size-\\'])]:size-4"
```

```jsx
className="component [&_svg:not([class*=\\'size-\\'])]:size-4"
```


## 📋 Compatibility

This configuration package is tested with:

- **Biome** v2.4.x
- **Peer dependency** `@biomejs/biome >=2.4.16`
- **Biome** v2.6.x
- **Peer dependency** `@biomejs/biome >=2.6.3` (2.6 renamed `useSortedClasses` to `useTailwindSortedClasses` and moved its options to the top-level `tailwind` section, so older Biome versions reject `tailwind.json`)
- **Node.js** v20+

Uses Biome v2 features:
Expand All @@ -310,4 +290,5 @@ Uses Biome v2 features:
Issues and pull requests are welcome at [github.com/tutods/lib](https://github.com/tutods/lib).

---
*Last updated: Biome v2.4.x — setup examples, rule groups, and domain improvements*

_Last updated: Biome v2.6.x — `useTailwindSortedClasses`, top-level `tailwind` section, rule `preset`_
18 changes: 9 additions & 9 deletions configs/biome-config/base.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
]
}
},
"recommended": true
"preset": "recommended"
}
}
},
Expand Down Expand Up @@ -121,29 +121,29 @@
"rules": {
"complexity": {
"noForEach": "off",
"recommended": true,
"preset": "recommended",
"useSimplifiedLogicExpression": {
"fix": "safe",
"level": "error"
}
},
"correctness": {
"recommended": true,
"preset": "recommended",
"noUnusedImports": {
"level": "error",
"fix": "safe"
}
},
"nursery": {
"recommended": true
"preset": "recommended"
},
"performance": {
"noAccumulatingSpread": "off",
"recommended": true
"preset": "recommended"
},
"recommended": true,
"preset": "recommended",
"security": {
"recommended": true
"preset": "recommended"
},
"style": {
"noDefaultExport": "warn",
Expand All @@ -162,7 +162,7 @@
]
}
},
"recommended": true,
"preset": "recommended",
"useBlockStatements": {
"fix": "safe",
"level": "error"
Expand Down Expand Up @@ -190,7 +190,7 @@
}
},
"noEmptyBlockStatements": "off",
"recommended": true
"preset": "recommended"
}
}
},
Expand Down
13 changes: 7 additions & 6 deletions configs/biome-config/tailwind.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,9 @@
"linter": {
"rules": {
"nursery": {
"useSortedClasses": {
"useTailwindSortedClasses": {
"fix": "safe",
"level": "error",
"options": {
"attributes": ["css", "class", "classList", "classNames", "className"],
"functions": ["clsx", "cva", "tv", "tw", "twMerge", "cn"]
}
"level": "error"
}
},
"suspicious": {
Expand All @@ -39,5 +35,10 @@
}
}
}
},
"tailwind": {
"attributes": ["css", "class", "classList", "classNames", "className"],
"mergeFunctions": ["clsx", "tw", "twMerge", "cn"],
"variantFunctions": ["cva", "tv"]
}
}
Loading