Biome and Ultracite

Biome lints and formats JavaScript, TypeScript, JSON and CSS in one fast binary, so there's no ESLint plus Prettier plus plugins to keep in sync. Ultracite is a strict, ready-made Biome preset with React and Next.js rules, so I don't build the rule list by hand.

SetupCopy Anchor Link

pnpm add -D @biomejs/biome ultracite

{
  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
  "extends": [
    "ultracite/biome/core",
    "ultracite/biome/react",
    "ultracite/biome/next"
  ]
}

{
  "scripts": {
    "lint": "ultracite check",
    "format": "ultracite fix",
    "typecheck": "tsc --noEmit"
  }
}

Overrides, each with a reasonCopy Anchor Link

A preset is a starting point. When a rule fights a decision the project has already made, turn it off and write down why, in the config itself.

Handlers don't need stable referencesCopy Anchor Link

"linter": {
  "rules": {
    "performance": {
      // Avoid unnecessary useCallback. Handlers passed to DOM elements
      // gain nothing from stable references, so this rule is off.
      "noJsxPropsBind": "off"
    }
  }
}

PascalCase only where the convention says soCopy Anchor Link

Component files are PascalCase, but UI primitives, hooks and utilities stay kebab-case. A scoped override enforces that only in the folders where it applies:

"overrides": [
  {
    "includes": [
      "src/components/shared/**/*.tsx",
      "src/features/*/components/**/*.tsx"
    ],
    "linter": {
      "rules": {
        "style": {
          "useFilenamingConvention": {
            "level": "error",
            "options": { "filenameCases": ["PascalCase"], "requireAscii": true }
          }
        }
      }
    }
  }
]

Tailwind v3 directives in CSSCopy Anchor Link

Biome doesn't know @tailwind, so it reports it as an unknown at-rule. Allow it in the one file that uses it:

{
  "includes": ["src/styles/globals.css"],
  "linter": {
    "rules": {
      "suspicious": {
        "noUnknownAtRules": {
          "level": "error",
          "options": { "ignore": ["tailwind"] }
        }
      }
    }
  }
}

Don't lint vendored codeCopy Anchor Link

Folders that a tool rewrites on every update (for example installed agent skills) aren't your code. Exclude them with !! so Biome skips them entirely:

"files": {
  "includes": ["!!.claude/skills", "!!.cursor/skills"]
}

Fix on save, for people and AI editorsCopy Anchor Link

Formatting should never be a review comment. In my projects, Biome fixes run automatically:

• In the editor, through the Biome extension with format on save.
• After an AI edit, through a hook. Cursor runs it from .cursor/hooks.json and Claude Code from .claude/settings.json, both calling pnpm dlx ultracite fix, so generated code lands already formatted.