BiomeJS Configuration

Configures BiomeJS for code formatting and linting using best practices for monorepos, UI projects, and Git hooks.

·58installs58stars

SKILL.md

Full skill instructions

name description

biome

This skill should be used when the user asks to "configure Biome", "extend biome config", "set up BiomeJS", "add biome overrides", "biome lint-staged", "fix biome errors", or mentions biome.jsonc, Biome linting, or Biome formatting configuration.

BiomeJS Skill

Quick guidance for BiomeJS configuration based on Sablier project patterns.

Core Concepts

Extending Shared Configs

Extend shared configs via npm package exports. The consuming project must always provide its own files.includes :

{ "$schema" : " ./node_modules/@biomejs/biome/configuration_schema.json " , "extends" : [ " @sablier/devkit/biome " ], "files" : { "includes" : [ " /.{js,json,jsonc,ts} " , " !node_modules/*/* " ] } }

For UI projects, extend both base and ui configs:

{ "extends" : [ " @sablier/devkit/biome/base " , " @sablier/devkit/biome/ui " ], "files" : { "includes" : [ " */.{css,js,jsx,json,jsonc,ts,tsx} " ] } }

Monorepo Inheritance

In monorepos, workspace configs inherit from root using "//" :

// packages/my-package/biome.jsonc { "extends" : [ " // " ], "overrides" : [ // package-specific overrides ] }

File Includes Pattern

Always specify files.includes explicitly. Common patterns:

Project Type Pattern

Library */.{js,json,jsonc,ts}

UI/Frontend */.{css,js,jsx,json,jsonc,ts,tsx}

With GraphQL */.{css,graphql,js,jsx,json,jsonc,ts,tsx}

Exclusions: !node_modules/**/* , !**/generated , !dist

Common Overrides

Test Files

Relax strict rules in test files:

{ "overrides" : [ { "includes" : [ " /tests//*.ts " , " */.test.ts " ], "linter" : { "rules" : { "style" : { "noNonNullAssertion" : " off " }, "suspicious" : { "noExplicitAny" : " off " } } } } ] }

Generated/ABI Files

Disable sorting and compact formatting for generated code:

{ "overrides" : [ { "includes" : [ " /abi//*.ts " , " /generated//*.ts " ], "assist" : { "actions" : { "source" : { "useSortedKeys" : " off " } } }, "javascript" : { "formatter" : { "expand" : " never " } } } ] }

Import Restrictions

Enforce barrel imports for specific modules:

{ "overrides" : [ { "includes" : [ " src/**/*.{ts,tsx} " ], "linter" : { "rules" : { "correctness" : { "noRestrictedImports" : { "level" : " error " , "options" : { "paths" : { "@/core" : " Import from @/core (barrel) instead of subpaths " } } } } } } } ] }

Key Rules Reference

Rule Default Rationale

noFloatingPromises error Floating promises cause bugs

noUnusedImports off Allow during dev, enforce in pre-commit

noUnusedVariables error Keep code clean

useImportType warn (separatedType) Explicit type imports

useSortedKeys on Consistent object ordering

useSortedClasses warn (UI) Tailwind class sorting

useFilenamingConvention kebab/camel/Pascal Flexible naming

noVoid off Useful for useEffect callbacks

useTemplate off Allow string concatenation

Git Hooks Integration

Lint-Staged Configuration

Standard pattern for pre-commit hooks:

// .lintstagedrc.js module . exports = { ".{json,jsonc,ts,tsx}" : "bun biome check --write" , ".{md,yml,yaml}" : "bun prettier --cache --write" , "*.{ts,tsx}" : "bun biome lint --write --only correctness/noUnusedImports" , } ;

The separate noUnusedImports pass enforces import cleanup only at commit time, not during development.

Husky Setup

.husky/pre-commit

bun lint-staged

Just Recipes

Standard Biome recipes from devkit:

Recipe Alias Command

biome-check bc biome check .

biome-lint bl biome lint .

biome-write bw biome check --write + unused imports

full-check fc biome + prettier + tsc

full-write fw biome + prettier fixes

Usage: just bw to fix all issues, just bc to check without fixing.

UI-Specific Configuration

For frontend projects with Tailwind CSS:

{ "css" : { "parser" : { "cssModules" : true , "tailwindDirectives" : true } }, "assist" : { "actions" : { "source" : { "useSortedAttributes" : " on " } } }, "linter" : { "rules" : { "nursery" : { "useSortedClasses" : { "fix" : " safe " , "level" : " warn " , "options" : { "attributes" : [ " classList " ], "functions" : [ " clsx " , " cva " , " cn " , " tv " , " tw " ] } } } } } }

Troubleshooting

Common Issues

"No files matched" : Check files.includes patterns match your file structure.

Conflicting rules : Overrides are applied in order; later overrides take precedence.

Schema errors : Use local schema reference for IDE support:

" $schema " : " ./node_modules/@biomejs/biome/configuration_schema.json "

Biome vs Prettier

Biome handles JS/TS/JSON/CSS formatting. Use Prettier for:

Markdown ( .md , .mdx )

YAML ( .yml , .yaml )

Additional Resources

Examples