@hzblj/biome-config

Opinionated, shareable Biome config for TypeScript / React / React Native projects. Formatter opinions, import & key sorting, and a curated set of lint rules — packaged so you can drop it into any repo with a single extends.

Three presets:

| Preset | Import specifier | What it is | | ---------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------- | | base | @hzblj/biome-config | Formatter + import/key sorting + general JS/TS lint rules. Framework-agnostic. Use it on its own. | | react | @hzblj/biome-config/react | Add-on for React on the web: Rules of Hooks, JSX correctness, and DOM accessibility rules. Layer on base. | | react-native | @hzblj/biome-config/react-native | Add-on for React Native / Expo: Rules of Hooks + RN-friendly relaxations (no DOM a11y). Layer on base. |

[!NOTE] react and react-native are add-ons, not standalone configs — list them after base in extends, and don't combine the two (pick the one for your platform). Biome doesn't reliably propagate a base config's formatter through a transitively-extended preset, so the recommended pattern is to extend the presets directly (this is also Biome's documented approach for composing shared configs).

Install

npm install --save-dev @hzblj/biome-config @biomejs/biome
# or
yarn add --dev @hzblj/biome-config @biomejs/biome

@biomejs/biome (v2+) is a peer dependency — install it alongside the config.

Usage

Create a biome.json at the root of your project and extend a preset.

[!IMPORTANT] A shared config must not hard-code project paths, so it ships without files.includes. Every consuming project provides its own — Biome requires it. Add the paths you want linted/formatted (and the ones you don't) in your local biome.json.

Base preset

{
  "$schema": "https://biomejs.dev/schemas/2.5.4/schema.json",
  "extends": ["@hzblj/biome-config"],
  "files": {
    "includes": ["**", "!**/node_modules", "!**/dist", "!**/build"]
  }
}

React (web) preset

Extend both presets — base first, then the react add-on:

{
  "$schema": "https://biomejs.dev/schemas/2.5.4/schema.json",
  "extends": ["@hzblj/biome-config", "@hzblj/biome-config/react"],
  "files": {
    "includes": ["**", "!**/node_modules", "!**/dist", "!**/build", "!**/.next"]
  }
}

React Native / Expo preset

Extend both presets — base first, then the react-native add-on:

{
  "$schema": "https://biomejs.dev/schemas/2.5.4/schema.json",
  "extends": ["@hzblj/biome-config", "@hzblj/biome-config/react-native"],
  "files": {
    "includes": [
      "**",
      "!**/node_modules",
      "!**/.expo",
      "!**/android",
      "!**/ios",
      "!**/*.generated.*"
    ]
  }
}

Overriding rules

extends merges shallowly per-section and later entries win, so you can tweak anything locally:

{
  "extends": ["@hzblj/biome-config", "@hzblj/biome-config/react-native"],
  "files": { "includes": ["**", "!**/node_modules"] },
  "linter": {
    "rules": {
      "suspicious": { "noConsole": "off" }
    }
  }
}

What's inside

Formatter — 2-space indent, lf line endings, 120 print width, useEditorconfig. JS/TS: single quotes, double quotes in JSX, semicolons as-needed, es5 trailing commas, as-needed arrow parens, no space inside braces (bracketSpacing: false for JS).

Assist — organizes imports and sorts object keys on save (organizeImports, useSortedKeys).

Linter — recommended: false with an explicit, curated rule set (correctness, suspicious, complexity, style). TypeScript files turn off rules the compiler already covers (e.g. noConstAssign, noUndeclaredVariables) and enforce useConst / noVar. JSON files are left untouched (formatter, linter and assist disabled) so hand-formatted JSON stays as-is.

react preset adds — useHookAtTopLevel (error) and useExhaustiveDependencies (warn) for the Rules of Hooks, JSX correctness (useJsxKeyInIterable, noChildrenProp), a curated set of DOM accessibility rules (useAltText, useValidAnchor, useKeyWithClickEvents, useAriaPropsForRole, noBlankTarget, …), plus the same DX relaxations (allows any / non-null assertions, noConsole as a warning).

react-native preset adds — the same Rules of Hooks and DX relaxations, but no DOM a11y rules (they don't apply to native), and warns on console usage.

See biome/base.json, biome/react.json and biome/react-native.json for the full rule sets.

Editor setup

Install the Biome VS Code extension and set it as your default formatter:

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

License

MIT © Jan Blazej